/* =====================================================================
   AlyniaRP — Classement des votes.

   La page reprend les jetons de main.css et n ajoute que ce qui lui est
   propre : les cartes de lots, le podium et le tableau.

   Deux medailles seulement sont inventees ici, l or et le bronze : main.css
   a deja --gold, et l argent n est qu un blanc casse. Aucune autre couleur
   n entre dans la charte — le rouge du site reste le seul accent.

   Le classement est un vrai <table> : ce sont des donnees, pas une mise en
   page. Sur telephone il se replie en fiches, chaque cellule reprenant son
   en-tete par un ::before plutot que de dupliquer le texte dans le HTML.
   ===================================================================== */

:root{
  --argent:#D6D9DE;
  --bronze:#D08B52;
}

/* --- Entete de page ---------------------------------------------------- */

/* L etoile du bouton « Voter » n a pas de metrique de police : elle suit la
   meme correction que les autres icones de bouton, sinon elle flotte
   au-dessus de la ligne du texte. */
.icoVote{
  width:1.05em;
  height:1.05em;
  display:block;
  transform:translateY(-.05em);
}

.vtAstuce{
  margin-top:1.6rem;
  max-width:60ch;
  color:var(--dim);
  font-size:.9rem;
}

.vtAstuce strong{ color:var(--text); font-weight:900; }

.vtAstuce code{
  padding:.1em .45em;
  border-radius:6px;
  background:var(--elem);
  border:1px solid var(--line-soft);
  color:var(--accent);
  font-family:inherit;
  font-weight:700;
}

/* --- Les lots ----------------------------------------------------------- */

/* Cinq marches de front sur grand ecran, et la bande des 250 en dessous.
   La largeur minimale est calculee pour cela : a 11 rem, cinq colonnes et
   leurs gouttieres tiennent dans les 1120 px du site, six n y tiennent pas.
   Sans ce calcul, la grille formait quatre colonnes et « Top 5 » se
   retrouvait seul sur sa ligne, comme oublie. */
.vtLots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap:1rem;
}

.vtLot{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1.4rem 1.3rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  overflow:hidden;
}

/* Le trait de couleur du haut : c est lui, et non un fond teinte, qui
   distingue les trois premieres marches. Un fond dore sur quatre cartes
   ferait sapin de Noel, et la charte n a qu un accent. */
.vtLot::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:var(--line-hi);
}

.vtLot--or::before{ background:linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.vtLot--argent::before{ background:linear-gradient(90deg, rgba(214,217,222,.55), var(--argent)); }
.vtLot--bronze::before{ background:linear-gradient(90deg, rgba(208,139,82,.55), var(--bronze)); }

/* La derniere carte couvre 245 rangs a elle seule : elle prend toute la
   largeur plutot que de se faire passer pour une marche de plus. Elle se
   couche alors en ligne — debout, une carte large de cinq colonnes pour
   trois lignes de texte n est qu un grand vide. */
.vtLot--large{ grid-column:1 / -1; }

@media (min-width:761px){
  .vtLot--large{ flex-direction:row; align-items:center; gap:1.1rem; }
  .vtLot--large .vtLotPlus{ margin:0 0 0 auto; text-align:right; }
}

.vtLotRang{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}

.vtLot--or .vtLotRang{ color:var(--gold); }
.vtLot--argent .vtLotRang{ color:var(--argent); }
.vtLot--bronze .vtLotRang{ color:var(--bronze); }

.vtLotGain{
  font-size:1.35rem;
  font-weight:900;
  font-style:italic;
  letter-spacing:.01em;
  line-height:1.25;
}

.vtLotPlus{
  margin-top:.15rem;
  font-size:.88rem;
  color:var(--dim);
}

/* « tirage au sort » accole au rang : la mention doit voyager AVEC le
   « Top 6 a 250 », pas se perdre dans la phrase du dessous. Sans elle, un
   « 500 coins » en gros caracteres se lit comme un du. */
.vtLot--tirage .vtLotRang em{
  display:inline-block;
  margin-left:.5rem;
  padding:.1rem .45rem;
  border-radius:999px;
  background:var(--elem-hi);
  border:1px solid var(--line-hi);
  color:var(--dim);
  font-size:.68rem;
  font-style:normal;
  letter-spacing:.08em;
}

/* Dans le tableau, la meme reserve, en plus discret : la ligne annonce un
   montant qui n est pas garanti. */
.vtTirage{
  color:var(--faint);
  font-style:italic;
  white-space:nowrap;
}

.vtNote{
  margin-top:1.4rem;
  max-width:70ch;
  color:var(--dim);
  font-size:.9rem;
}

/* --- Podium ------------------------------------------------------------- */

/* Les trois premiers sortent du tableau : a hauteur egale ils se lisent
   comme trois lignes de plus, et le classement perd sa tete. */
.vtPodium{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:end;
  gap:1rem;
  margin-bottom:1.8rem;
}

.vtMarche{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.45rem;
  padding:1.6rem 1.1rem 1.4rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  text-align:center;
}

/* L ordre visuel n est pas l ordre du document : la premiere place est au
   MILIEU, comme sur un vrai podium, et plus haute que ses voisines. Le HTML,
   lui, reste dans l ordre 1-2-3 — c est celui qu on lit a la voix. */
.vtMarche--1{ order:2; padding-top:2.4rem; border-color:rgba(242,200,121,.34); }
.vtMarche--2{ order:1; }
.vtMarche--3{ order:3; }

.vtMedaille{
  display:grid;
  place-items:center;
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  font-size:1.05rem;
  font-weight:900;
  font-style:italic;
  color:var(--bg);
}

.vtMarche--1 .vtMedaille{ background:linear-gradient(160deg, var(--gold-hi), var(--gold)); }
.vtMarche--2 .vtMedaille{ background:linear-gradient(160deg, #FFFFFF, var(--argent)); }
.vtMarche--3 .vtMedaille{ background:linear-gradient(160deg, #E9A868, var(--bronze)); }

.vtMarcheNom{
  font-size:1.02rem;
  font-weight:900;
  font-style:italic;
  line-height:1.3;
  /* Un pseudo sans espace peut faire quarante signes : il se coupe plutot
     que de pousser la carte hors de la grille. */
  overflow-wrap:anywhere;
}

.vtMarcheVotes{
  font-size:.86rem;
  color:var(--dim);
}

.vtMarcheVotes b{ color:var(--text); font-weight:900; }

.vtMarcheLot{
  margin-top:.3rem;
  padding-top:.7rem;
  width:100%;
  border-top:1px solid var(--line-soft);
  font-size:.82rem;
  color:var(--dim);
  line-height:1.45;
}

.vtMarche--1 .vtMarcheLot b{ color:var(--gold); font-weight:900; }
.vtMarche--2 .vtMarcheLot b{ color:var(--argent); font-weight:900; }
.vtMarche--3 .vtMarcheLot b{ color:var(--bronze); font-weight:900; }

/* --- Entete du tableau --------------------------------------------------- */

.vtTete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.9rem;
}

.vtMaj{
  font-size:.82rem;
  color:var(--faint);
}

.vtCherche{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  min-width:min(100%, 17rem);
  border-radius:var(--radius-sm);
  background:var(--elem);
  border:1px solid var(--line-soft);
  color:var(--faint);
  transition:border-color .18s var(--ease);
}

.vtCherche:focus-within{ border-color:var(--accent-soft); }

.vtCherche svg{ width:1rem; height:1rem; flex:none; }

.vtCherche input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:none;
  color:var(--text);
  font-family:inherit;
  font-size:.88rem;
}

.vtCherche input::placeholder{ color:var(--faint); }

/* Le X natif de <input type="search"> n existe que sur certains
   navigateurs : on pose le notre et on efface celui de Chrome. */
.vtCherche input::-webkit-search-cancel-button{ display:none; }

.vtCherche button{
  flex:none;
  padding:0 .25rem;
  background:none;
  border:0;
  color:var(--faint);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}

.vtCherche button:hover{ color:var(--text); }

.vtMsg{
  padding:1.1rem 1.2rem;
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  color:var(--dim);
  font-size:.92rem;
}

/* --- Le tableau ---------------------------------------------------------- */

.vtTableau{
  border-radius:var(--radius);
  background:rgba(21,21,21,.82);
  border:1px solid var(--line-soft);
  overflow:hidden;
}

.vtTableau table{
  width:100%;
  border-collapse:collapse;
}

.vtTableau th{
  padding:.9rem 1.1rem;
  background:rgba(0,0,0,.28);
  border-bottom:1px solid var(--line-soft);
  color:var(--faint);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
}

.vtTableau td{
  padding:.8rem 1.1rem;
  border-top:1px solid var(--line-soft);
  font-size:.92rem;
  vertical-align:middle;
}

.vtTableau tbody tr:first-child td{ border-top:0; }
.vtTableau tbody tr:hover{ background:rgba(255,255,255,.022); }

/* Large assez pour « #250 ▼12 » sur UNE ligne, et nowrap pour que ca reste
   vrai : sans les deux, la pastille de tendance passait sous le rang et la
   ligne doublait de hauteur, au hasard des valeurs. */
.vtRang{
  width:7.2rem;
  white-space:nowrap;
  color:var(--faint);
  font-weight:900;
  font-style:italic;
}

.vtNom{ font-weight:700; overflow-wrap:anywhere; }

/* --- La tendance ---------------------------------------------------------
   Trois etats, trois couleurs, et un chiffre. Les teintes viennent de
   main.css : le vert et le rouge de la charte, deja utilises ailleurs pour
   dire la meme chose. */
.vtT{
  display:inline-block;
  margin-left:.35rem;
  font-size:.72rem;
  font-weight:900;
  font-style:normal;
  letter-spacing:0;
  white-space:nowrap;
  vertical-align:.05em;
}

.vtT--haut{ color:var(--green); }
.vtT--bas{ color:var(--red); }
.vtT--stable{ color:var(--faint); }
.vtT--neuf{ color:var(--accent); }

/* Aucune comparaison possible : un point a peine visible plutot qu'un blanc,
   pour que la colonne garde la meme largeur d'une ligne a l'autre. */
.vtT--rien{ color:rgba(255,255,255,.18); }

/* Sur le podium la tendance est sous la medaille, seule sur sa ligne. */
.vtMarche .vtT{
  margin-left:0;
  margin-top:-.15rem;
  font-size:.8rem;
}

/* Un code de vote qui ne mene a aucun compte garde sa place — l ecarter
   decalerait tous les rangs suivants, et un rang vaut une recompense. */
.vtNom--vide{ color:var(--faint); font-weight:400; font-style:italic; }

.vtVotes{
  width:7rem;
  text-align:right;
  font-weight:900;
  white-space:nowrap;
}

.vtLotCell{
  width:15rem;
  color:var(--dim);
  font-size:.86rem;
}

.vtLotCell b{ color:var(--text); font-weight:900; }

.vtPlusLigne{
  display:flex;
  justify-content:center;
  margin-top:1.4rem;
}

/* --- Telephone ----------------------------------------------------------- */

@media (max-width:760px){
  /* Le podium en colonne : a trois cartes de front sur 360 px, plus un seul
     pseudo ne tient. L ordre visuel redevient 1-2-3. */
  .vtPodium{ grid-template-columns:1fr; align-items:stretch; }
  .vtMarche--1{ order:0; padding-top:1.6rem; }
  .vtMarche--2{ order:0; }
  .vtMarche--3{ order:0; }

  .vtTete{ flex-direction:column; align-items:stretch; }

  /* Le tableau se replie en fiches. L en-tete de colonne revient devant
     chaque valeur par ::before, pris dans data-t : rien n est ecrit deux
     fois dans le HTML. */
  .vtTableau thead{ display:none; }
  .vtTableau table, .vtTableau tbody, .vtTableau tr, .vtTableau td{ display:block; width:auto; }

  .vtTableau tr{
    padding:.9rem 1.1rem;
    border-top:1px solid var(--line-soft);
  }

  .vtTableau tbody tr:first-child{ border-top:0; }
  .vtTableau td{ padding:.15rem 0; border-top:0; }

  .vtTableau td[data-t]::before{
    content:attr(data-t) ' ';
    color:var(--faint);
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .vtRang, .vtVotes, .vtLotCell{ width:auto; text-align:left; }
  .vtNom{ font-size:1rem; }
}