/* Formules : cartes des serveurs, formules en notation mathématique ; une valeur que le serveur ne publie pas porte un
   astérisque, que la légende du pied explique. */

/* Accueil : une carte par serveur, la carte entière est le lien. */
.serveurs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.serveurs li { display: flex; min-width: 0; }
.serveurs .fiche { flex: 1; display: grid; align-content: start; gap: 4px; text-decoration: none; color: var(--texte);
  transition: border-color .15s, box-shadow .15s; }
.serveurs .fiche:hover, .serveurs .fiche:focus-visible { border-color: var(--or); box-shadow: 0 4px 16px rgba(60, 35, 10, .08); }
.serveurs strong { font-family: var(--titre); font-size: 18px; color: var(--bleu); }
.serveurs .fiche:hover strong { color: var(--brun); }
.serveurs .faits { color: var(--doux); font-size: 14px; }

/* En-tête d'un serveur. */
.serveurs-nav { margin-bottom: 14px; }
.faits { margin: 0 0 6px; font-size: 14px; color: var(--doux); }
.faits a { font-weight: 600; }
main > .note { max-width: 760px; font-size: 14px; }

/* Cartes de formules. */
.formules { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; margin-bottom: 8px; }
.formule.large { grid-column: 1 / -1; }
.formule h3 { font-family: var(--titre); font-size: 16px; color: var(--brun); margin: 0 0 4px; }
.formule .groupe + .groupe, .formule .def + .groupe { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eadcc4; }
.formule .cl { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--bleu); }
/* Ce que la carte dit de ses formules ; un avis qui ne vaut que pour certaines classes les nomme. */
.formule .def { margin: 8px 0 0; font-size: 13px; color: var(--doux); }
.formule .def + .def { margin-top: 3px; }
.formule .def .qui { font-weight: 600; }
/* Dégâts critiques : une autre valeur, sous la chance de critique. */
.formule .degats { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eadcc4; }

/* Une formule : les termes ne se coupent pas, la ligne se coupe entre deux termes. */
.f { margin: 2px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 2.1; overflow-wrap: normal; }
.f .t { white-space: nowrap; display: inline-block; }
@media (max-width: 480px) {
  .formule { padding: 12px; }
  .f { font-size: 15px; }
}
/* Petits téléphones : un point de moins, pour qu'un dernier terme rejoigne sa ligne au lieu de partir seul. */
@media (max-width: 380px) {
  .f { font-size: 14px; }
}
.f var { font-style: italic; }
.f .g { font-family: var(--texte-police); font-size: 14px; font-weight: 600; color: var(--bleu); }
.f .eq { font-style: italic; color: var(--brun); }
.f .fn { font-style: italic; color: var(--brun); }
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .84em; line-height: 1.25; margin: 0 .1em; }
.fr > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .25em .05em; }
.fr > span:last-child { padding: .05em .25em 0; }
.br { font-size: 1.35em; line-height: 1; color: var(--doux); vertical-align: -.08em; }
.cond { font-family: var(--texte-police); font-size: 12px; color: var(--doux); }
.variante { color: var(--doux); font-size: 15px; }
.variante .ref { font-family: var(--texte-police); font-size: 12px; font-weight: 600; margin-right: .4em; }

/* Astérisque d'une valeur reprise d'ailleurs (.repli de site.css) : dans une formule, la police du texte, pas celle des
   formules. */
.f .repli { font-family: var(--texte-police); }

/* Stats de départ, paliers, quêtes. */
/* Les tableaux courts gardent leur largeur naturelle (le cadre suit), au lieu de s'étirer sur toute la page. */
.defile.serre { width: fit-content; max-width: 100%; }
/* La classe est l'en-tête de sa ligne : texte normal du tableau, pas l'en-tête bleu collant des colonnes. */
.tableau th[scope=row] { position: static; background: none; color: var(--texte); font-size: 14px; font-weight: 600; z-index: auto; }
.tableau th[scope=row] a { text-decoration: none; }
.tableau th[scope=row] a:hover { text-decoration: underline; }
.tableau.base th, .tableau.base td { padding-left: 8px; padding-right: 8px; }
.tableau abbr { text-decoration: none; cursor: help; }
/* Quêtes : le nom et la récompense passent à la ligne, le tableau tient dans la largeur du téléphone. */
.tableau.quetes td { white-space: normal; }
.tableau.quetes td:first-child { width: 1%; white-space: nowrap; }
.tableau small { color: var(--doux); }
.tableau .f { font-size: 15px; line-height: 1.6; }
.paliers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.paliers li { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.paliers b { font-family: var(--titre); font-size: 18px; color: var(--bleu); margin-right: 2px; }
.paliers small { display: block; color: var(--doux); font-size: 12px; }
.competences { margin: 14px 0 0; }

/* Règles du combat et de l'expérience : barèmes en liste, table de précision repliée, parts du groupe. */
.baremes { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.baremes li { padding: 3px 0; }
.baremes li + li { border-top: 1px dashed #eadcc4; }
.precision { margin-top: 8px; }
.precision summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bleu); min-height: 32px; display: flex; align-items: center; }
.precision .defile { max-height: 60vh; margin-top: 6px; }
.formule .tableau { font-size: 14px; }
.formule .tableau td, .formule .tableau th { padding: 4px 10px; }
.orbes-regle { max-width: 760px; font-size: 14px; color: var(--doux); margin: 8px 0 0; }

/* Pied : la légende des astérisques (seulement s'il y en a), puis celle des arrondis. */
.pied-formules { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--bord); color: var(--doux); font-size: 12px; }
.pied-formules p { margin: 0 0 6px; }