/* Page des grades — la page qui vend. Le design system (couleurs, plaques, boutons, engrenages) vit
   dans varuna.css ; ici, la mise en scene des paliers, du comptoir, du tableau et des insignes.
   Les hooks JS (roles.js) imposent la structure : #comptoirAnonyme/Attente/Connu, .palier/.socle/
   .phare, .insigne + grade, .prix, .detail, .achat[data-formule], .marqueur. On restyle, on ne
   touche pas aux noms. */

/* --- En-tete ---------------------------------------------------------------------------------- */
.entete { padding-block:var(--e6) var(--e5); position:relative; z-index:1 }
.grades-hero { overflow:hidden; border-bottom:1px solid var(--bord) }
.grades-hero .rouages .engrenage { color:var(--bord-clair) }
/* Couple engrene, meme module (une dent = 15 px) : gh1 20 dents, gh2 11. Sens opposes, tangents
   (entraxe 0,44*(D1+D2)=205), --d = 0,11 s/px : rapport 20/11 entier, dents en phase. */
.gh1 { width:300px; height:300px; top:-110px; right:-70px; opacity:.4; color:#4a3f2b; --d:33s }
.gh2 { width:165px; height:165px; top:70px; right:168px; opacity:.3; --d:18.15s }
.definitions { position:absolute; width:0; height:0 }

/* --- Bandeau mode test ----------------------------------------------------------------------- */
.bandeau-test {
  border:1px solid rgba(224,179,82,.45); border-radius:var(--rayon);
  background:linear-gradient(180deg, rgba(224,179,82,.08), rgba(224,179,82,.02));
  padding:.8rem var(--e3); margin-bottom:var(--e4); font-size:.92rem; color:var(--gris);
}
.bandeau-test b { color:var(--laiton) }

/* --- Le comptoir : un pupitre de commande ---------------------------------------------------- */
.comptoir {
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  border:1px solid var(--bord-clair); border-radius:var(--rayon);
  padding:var(--e3) var(--e4); margin-bottom:var(--e5); box-shadow:var(--arete), 0 12px 34px -22px rgba(0,0,0,.9);
  position:relative;
}
.comptoir::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:3px 0 0 3px; background:linear-gradient(180deg, var(--laiton), var(--cuivre)) }
.comptoir h2 { margin:0 0 .35rem; font-size:1.2rem }
.comptoir p { margin:.2rem 0 0; color:var(--gris); font-size:.96rem }
.comptoir .separateur { margin-top:var(--e3); font-size:.88rem; color:var(--gris-faible) }
.comptoir .actions { margin-top:var(--e3) }
.comptoir .bienvenue { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center }
.comptoir .bienvenue b { color:var(--creme); font-size:1.08rem }
.comptoir .erreur:not(:empty) { margin-top:.7rem; color:var(--rouge); font-size:.9rem }
#listeJoueurs { flex-wrap:wrap }

/* --- Les insignes : plaques de grade en pixels ----------------------------------------------- */
/* Chaque grade a sa couleur (celle du jeu). Encre sombre : sur du jade ou du laiton, le blanc est
   illisible. Le relief pixel : deux liseres nets, clair en haut, sombre en bas. */
.insigne {
  display:inline-flex; align-items:center; gap:.4em; vertical-align:middle;
  padding:.32em .6em; border:2px solid #16110a; border-radius:4px;
  font-family:var(--police-etiquette); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:#16110a; white-space:nowrap; font-weight:400;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.4);
}
.insigne .pixel { width:1.05em; height:1.05em; flex:none; fill:currentColor; shape-rendering:crispEdges }
.insigne.vagabond  { background:#9aa6b6 }
.insigne.roturier  { background:#5fd39a }
.insigne.chevalier { background:#7aa8e8 }
.insigne.souverain { background:#e0b352 }
thead .insigne { font-size:.62rem; letter-spacing:.04em }

/* --- Les paliers : quatre plaques rivetees --------------------------------------------------- */
.paliers {
  display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  margin-top:var(--e5); align-items:stretch;
}
.palier {
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  border:1px solid var(--bord-clair); border-radius:var(--rayon);
  padding:var(--e3); box-shadow:var(--arete), 0 12px 30px -22px rgba(0,0,0,.85);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Rivets aux coins hauts, discrets. */
.palier::before, .palier::after {
  content:""; position:absolute; top:11px; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,240,205,.5), rgba(0,0,0,.5));
  box-shadow:0 1px 1px rgba(0,0,0,.5);
}
.palier::before { left:11px } .palier::after { right:11px }
.palier:hover { transform:translateY(-4px); border-color:var(--laiton);
  box-shadow:var(--arete), 0 20px 40px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(224,179,82,.18) }

/* Le socle (Vagabond, gratuit) : enfonce d'un plan, present mais discret. */
.palier.socle { background:linear-gradient(180deg, var(--surface), var(--fond)); border-color:var(--bord) }
.palier.socle:hover { transform:none; border-color:var(--bord-clair); box-shadow:var(--arete) }

/* Le phare (Chevalier, populaire) : surleve, cadre cuivre et lueur, la carte qu'on regarde. */
.palier.phare {
  border-color:var(--cuivre);
  background:linear-gradient(180deg, #2a2013, var(--surface-haute));
  box-shadow:var(--arete), 0 0 0 1px rgba(207,132,70,.35),
    0 22px 46px -26px rgba(207,132,70,.55), 0 0 60px -30px rgba(207,132,70,.5);
}
.palier.phare::before, .palier.phare::after {
  background:radial-gradient(circle at 40% 35%, rgba(255,210,160,.7), rgba(120,60,20,.6));
}
.palier.phare:hover { transform:translateY(-6px); border-color:var(--cuivre-vif) }

.palier .insigne { align-self:flex-start; font-size:.78rem }
.palier > span:first-child { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
.palier .marqueur {
  font-family:var(--police-etiquette); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  color:#2a1608; background:linear-gradient(180deg, var(--cuivre-vif), var(--cuivre));
  padding:.28rem .5rem; border-radius:4px; font-weight:400;
  box-shadow:inset 0 1px 0 rgba(255,224,190,.5), 0 2px 4px rgba(0,0,0,.4);
}

.palier .prix {
  margin:var(--e3) 0 0; font-family:var(--police-titre); font-size:2.6rem; font-weight:700;
  line-height:1; letter-spacing:.01em; color:var(--creme); font-variant-numeric:tabular-nums;
}
.palier.phare .prix { color:var(--cuivre-vif) }
.palier.socle .prix { color:var(--fer-clair); font-size:2.1rem }
.palier .prix span { font-family:var(--police); font-size:.82rem; font-weight:500; color:var(--gris);
  letter-spacing:0 }
.palier .annuel { margin:.5rem 0 0; font-size:.85rem; color:var(--laiton) }
.palier.socle .annuel { color:var(--gris-faible) }

/* Le detail : une liste cochee, jamais un paragraphe — sur une page de tarifs on compare. */
.palier .detail {
  list-style:none; padding:0; margin:var(--e3) 0 0; padding-top:var(--e3);
  border-top:1px solid var(--bord); font-size:.94rem; color:var(--gris); flex:1;
}
.palier .detail li { position:relative; padding-left:1.6rem; margin:0 0 .55rem }
/* La coche : un engrenage minuscule dessine (deux traits), en laiton. */
.palier .detail li::before {
  content:""; position:absolute; left:.15rem; top:.34em;
  width:.4rem; height:.66rem; border:solid var(--laiton); border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.palier.phare .detail li::before { border-color:var(--cuivre-vif) }
.palier .detail b { color:var(--creme); font-weight:700 }
.palier .detail code { font-size:.8rem }
.palier .actions { margin-top:auto; padding-top:var(--e3); display:flex; flex-direction:column; gap:.5rem }
.palier .bouton { width:100%; font-size:.95rem; min-height:46px }

/* --- Bandeau de reassurance : les trois promesses qui debloquent l'achat --------------------- */
.reassurance {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px;
  margin-top:var(--e4); background:var(--bord); border:1px solid var(--bord-clair);
  border-radius:var(--rayon); overflow:hidden; box-shadow:var(--arete);
}
.reassurance div {
  background:linear-gradient(180deg, var(--surface-haute), var(--surface)); padding:var(--e3);
  display:flex; gap:.8rem; align-items:flex-start;
}
.reassurance .r-ico { flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:7px;
  display:grid; place-items:center; color:var(--laiton);
  background:rgba(224,179,82,.1); border:1px solid rgba(224,179,82,.28) }
.reassurance .r-ico svg { width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.reassurance b { display:block; color:var(--creme); font-size:.98rem }
.reassurance p { margin:.15rem 0 0; color:var(--gris); font-size:.86rem; line-height:1.5 }

/* --- Tableau comparatif : il defile seul sur mobile, jamais la page -------------------------- */
.cadre-table {
  overflow-x:auto; margin-top:var(--e5); border:1px solid var(--bord-clair);
  border-radius:var(--rayon); background:var(--surface); box-shadow:var(--arete);
}
table { border-collapse:collapse; width:100%; min-width:42rem; font-size:.93rem }
th, td { padding:.8rem 1rem; text-align:center; border-bottom:1px solid var(--bord) }
thead th {
  font-family:var(--police-etiquette); font-size:.6rem; letter-spacing:.05em;
  color:var(--gris); font-weight:400; background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  padding:.9rem 1rem;
}
thead th.phare { background:linear-gradient(180deg, #2a2013, var(--surface-haute)) }
tbody th {
  position:sticky; left:0; z-index:1; text-align:left; font-weight:400; color:var(--gris);
  white-space:nowrap; background:var(--surface); box-shadow:inset -1px 0 0 var(--bord); font-size:.9rem;
}
thead th:first-child { position:sticky; left:0; z-index:2;
  background:linear-gradient(180deg, var(--surface-haute), var(--surface));
  box-shadow:inset -1px 0 0 var(--bord) }
td.oui { color:var(--laiton); font-weight:700; font-family:var(--police-titre) }
td.non { color:var(--gris-faible) }
tbody tr:last-child th, tbody tr:last-child td { border-bottom:0 }
tbody tr:hover td, tbody tr:hover th { background:var(--surface-haute) }
caption { caption-side:bottom; padding:.9rem 1rem; color:var(--gris-faible); font-size:.83rem;
  text-align:left; border-top:1px solid var(--bord) }

/* --- Ce qu'un grade ne donne pas : croix rouges dessinees ------------------------------------ */
.liste { list-style:none; color:var(--gris); padding:0; margin:var(--e2) 0 0 }
.liste li { position:relative; padding-left:1.7rem; margin:.5rem 0 }
.liste li::before, .liste li::after {
  content:""; position:absolute; left:.25rem; top:.72em; width:.72rem; height:2px;
  background:var(--rouge); border-radius:2px;
}
.liste li::before { transform:rotate(45deg) } .liste li::after { transform:rotate(-45deg) }
.encart.espace { margin-top:var(--e4) }

@media (max-width:40rem) {
  .comptoir { padding:var(--e3) }
  .palier .prix { font-size:2.3rem }
  .gh1, .gh2 { display:none }
}

/* Le champ de saisie d'un renommage, dans sa carte. Le nom se tape ICI, avant de payer : l'achat
   applique directement, il n'y a rien a retaper en jeu. */
.champ-renom {
  display:flex; flex-direction:column; gap:.35rem;
  font-size:.82rem; color:var(--gris); margin-top:.7rem;
}
.champ-renom input {
  font:inherit; font-size:.95rem; color:var(--clair);
  background:var(--fond); border:1px solid var(--bord); border-radius:6px;
  padding:.5rem .6rem; width:100%;
}
.champ-renom input:focus-visible { outline:2px solid var(--laiton); outline-offset:1px; border-color:var(--laiton) }
.champ-renom input::placeholder { color:var(--gris-fonce, #6e7580) }