/* Direction artistique : logo GRIM — noir profond, rouge sang incandescent, contours chromés */
:root {
  --fond: #070203;
  --fond-2: #100506;
  --fond-3: #1a0909;
  --bord: #3a1216;
  --texte: #f2e9ea;
  --texte-2: #a8898c;
  --chrome: #ececf0;
  --rouge: #c8102e;
  --rouge-vif: #ff2a3a;
  --rouge-sombre: #5c0a12;
  --halo: rgba(230, 20, 40, .55);
  --halo-doux: rgba(230, 20, 40, .18);
  --rayon: 6px;
  --titres: "Montserrat", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

a { color: inherit; }
:focus-visible { outline: 2px solid var(--rouge-vif); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- En-tête : halo rouge, rayons, logo ---------- */
.entete {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse 60% 90% at 50% 40%, #4a0508 0%, #1c0204 45%, var(--fond) 80%);
  border-bottom: 1px solid var(--rouge-sombre);
  box-shadow: 0 1px 24px var(--halo-doux);
}
.rayons {
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 40, 50, .16) 0deg 1.5deg, transparent 1.5deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 32%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 32%);
  animation: rotation 90s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

.entete-contenu {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo { display: block; line-height: 0; }
.logo img {
  width: min(380px, 80vw);
  height: auto;
  mix-blend-mode: screen; /* le fond noir du logo devient transparent */
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 70%, transparent 100%);
  animation: pulsation 4s ease-in-out infinite alternate;
}
@keyframes pulsation {
  from { filter: brightness(.9) saturate(1); }
  to { filter: brightness(1.15) saturate(1.15); }
}
.sous-titre {
  margin: 0 0 12px;
  color: var(--texte-2);
  font-family: var(--titres);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
nav a {
  display: block;
  position: relative;
  padding: 10px 22px 12px;
  text-decoration: none;
  color: var(--texte-2);
  font-family: var(--titres);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .2s, text-shadow .2s;
}
nav a::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background .2s, box-shadow .2s;
}
nav a:hover { color: var(--chrome); text-shadow: 0 0 10px var(--halo); }
nav a[aria-current="page"] { color: #fff; text-shadow: 0 0 12px var(--halo), 0 0 2px #fff; }
nav a[aria-current="page"]::after { background: var(--rouge-vif); box-shadow: 0 0 12px 2px var(--halo); }

/* ---------- Contenu ---------- */
main { max-width: 1400px; margin: 0 auto; padding: 24px 16px 40px; }
h2 {
  margin: 0 0 14px;
  font-family: var(--titres);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chrome);
  text-shadow: 0 0 14px var(--halo);
}

.barre-outils,
.stat {
  background: linear-gradient(180deg, #150708 0%, #0c0405 100%);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.champ { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .08em; }
.champ-ligne { flex-direction: row; align-items: center; gap: 8px; font-size: .9rem; color: var(--texte); padding-bottom: 6px; text-transform: none; letter-spacing: 0; }
input[type="date"], select, button {
  font: inherit;
  font-size: .9rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 6px 10px;
  min-height: 34px;
  text-transform: none;
  letter-spacing: 0;
}
input[type="date"] { color-scheme: dark; }
input[type="checkbox"] { accent-color: var(--rouge); width: 16px; height: 16px; }
button { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button:hover { border-color: var(--rouge); box-shadow: 0 0 8px var(--halo-doux); }
button[aria-pressed="true"] {
  background: linear-gradient(180deg, #d81a34 0%, #8a0a18 100%);
  border-color: var(--rouge-vif);
  color: #fff;
  box-shadow: 0 0 12px var(--halo);
}
.segment { display: inline-flex; }
.segment button { border-radius: 0; }
.segment button:first-child { border-radius: 4px 0 0 4px; }
.segment button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.boutons { display: flex; gap: 6px; flex-wrap: wrap; }
.pousser { margin-left: auto; }
.compteur { color: var(--texte-2); font-size: .9rem; padding-bottom: 6px; }

.resume { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  font-size: .85rem;
  color: var(--texte);
}
button.puce { min-height: 0; }
.puce b { color: var(--rouge-vif); font-variant-numeric: tabular-nums; }

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stat { flex: 1 1 160px; padding: 14px 18px; }
.stat-valeur {
  font-family: var(--titres);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 14px var(--halo);
  font-variant-numeric: tabular-nums;
}
.stat-libelle { font-size: .75rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .08em; }

.message { padding: 24px; text-align: center; color: var(--texte-2); }

footer { max-width: 1400px; margin: 0 auto; padding: 0 16px 24px; color: var(--texte-2); font-size: .8rem; }

/* ---------- Tableaux (surcharge du thème Tabulator « midnight ») ---------- */
#table { max-width: 100%; min-width: 0; }
.tabulator {
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  font-size: .9rem;
}
.tabulator .tabulator-header {
  background: #130608;
  border-bottom: 2px solid var(--rouge);
  box-shadow: 0 2px 14px var(--halo-doux);
  color: var(--chrome);
}
.tabulator .tabulator-header .tabulator-col {
  background: #130608;
  border-right-color: var(--bord);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-family: var(--titres);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: #1e0a0d; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: #5a3a3e; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--rouge-vif); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--rouge-vif); }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
  background: var(--fond); color: var(--texte); border: 1px solid var(--bord); border-radius: 3px; padding: 3px 6px;
}
.tabulator .tabulator-header .tabulator-col input:focus { border-color: var(--rouge); outline: none; box-shadow: 0 0 6px var(--halo-doux); }
.tabulator .tabulator-tableholder { background: var(--fond-2); }
.tabulator-row { background: var(--fond-2); border-bottom-color: #22090c; }
.tabulator-row.tabulator-row-even { background: #0b0304; }
.tabulator-row.tabulator-selectable:hover { background: rgba(200, 16, 46, .14); }
.tabulator-row .tabulator-cell { border-right-color: transparent; }
.tabulator .tabulator-footer { background: #130608; border-top-color: var(--bord); color: var(--texte-2); }
.tabulator .tabulator-footer .tabulator-footer-contents { flex-wrap: wrap; gap: 8px; }
.tabulator .tabulator-footer .tabulator-paginator { flex-wrap: wrap; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.tabulator .tabulator-footer .tabulator-page { background: var(--fond); color: var(--texte); border-color: var(--bord); }
.tabulator .tabulator-footer .tabulator-page.active { color: #fff; border-color: var(--rouge-vif); box-shadow: 0 0 8px var(--halo); }
.tabulator-row.tabulator-group {
  background: linear-gradient(90deg, rgba(200, 16, 46, .30) 0%, rgba(200, 16, 46, .04) 60%, transparent 100%), var(--fond-2);
  border-top: 1px solid var(--rouge-sombre);
  border-bottom-color: var(--bord);
  border-left: 3px solid var(--rouge);
  color: var(--texte);
}
.tabulator-row.tabulator-group:hover { background: linear-gradient(90deg, rgba(200, 16, 46, .40) 0%, rgba(200, 16, 46, .08) 60%, transparent 100%), var(--fond-2); }
.tabulator-row.tabulator-group .tabulator-arrow { border-left-color: var(--rouge-vif); }
.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { border-top-color: var(--rouge-vif); border-left-color: transparent; }
.tabulator-row.tabulator-group span { color: var(--texte-2); margin-left: 8px; font-weight: 400; }
.tabulator-row.tabulator-group .g-nom {
  color: #fff;
  margin-left: 0;
  font-family: var(--titres);
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 0 10px var(--halo);
}

.inactif { opacity: .4; }
.a-completer { color: var(--texte-2); font-style: italic; }
.tabulator-row.tabulator-group .g-note { font-style: italic; }
.session { margin-top: 4px; }
.niveau { color: var(--texte-2); font-size: .8em; margin-left: 4px; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .75rem; border: 1px solid var(--bord); }
.badge-main { color: #fff; border-color: var(--rouge); background: rgba(200, 16, 46, .18); }
.badge-reroll { color: var(--texte-2); }
.lien-discret { text-decoration: none; }
.lien-discret:hover { text-decoration: underline; text-decoration-color: var(--rouge-vif); }
.objet { text-decoration: none; font-weight: 500; }
.objet:hover { text-decoration: underline; }

@media (max-width: 640px) {
  nav { width: 100%; }
  nav ul { gap: 0; }
  nav li { flex: 1; }
  nav a { padding: 10px 6px 12px; letter-spacing: .1em; }
  .pousser { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rayons, .logo img { animation: none; }
}

/* ---------- Page Présence ---------- */
.titre-section { margin-top: 32px; font-size: 1rem; }
.jauge {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 8px;
  margin-right: 10px;
  border-radius: 4px;
  background: #2a0d10;
  overflow: hidden;
}
.jauge span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #7a0a16, var(--rouge-vif));
  box-shadow: 0 0 8px var(--halo);
}
.taux { font-variant-numeric: tabular-nums; }