/* Apparence reprise de l'ancien site (styles.css + Bootstrap 5.3.3), mais
   sans Bootstrap et sans aucune ressource distante : la CSP de
   app/web/security.py impose style-src/font-src 'self'. Une @import vers
   fonts.googleapis.com, comme le faisait l'ancien fichier, serait bloquee
   par le navigateur en silence -- la page s'afficherait simplement sans la
   police. Verrouille par tests/unit/test_static_assets.py. */

/* Poppins vendorisee (SIL Open Font License, voir ../fonts/OFL.txt).
   Sous-ensemble latin, 3 graisses : les 400/500/600/700/800/900 que
   declarait l'ancien @import n'etaient pas toutes utilisees, et chaque
   graisse est un fichier a telecharger. */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  --bg: #212529;          /* fond de l'ancien site */
  --fg: #e8eaed; --muted: #9aa0a6;
  --accent: #4ea1ff; --warn: #ffb44e; --line: #2a2e35;
  /* Ligne du visiteur dans le tableau : le violet que l'ancien site
     appliquait via .table>tbody>tr.table-active. */
  --me: rgba(110, 36, 175, 0.87);
  /* Degrades des deux tuiles de rang, repris tels quels. */
  --tile-promo: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
  --tile-piscine: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  /* Texte pose sur ces degrades clairs : noir, comme l'ancien
     .custom-rank-text. */
  --on-tile: #000;
  /* Alerte lisible sur un degrade clair : --warn (orange) sur la tuile
     promo (orange) serait illisible. */
  --warn-on-tile: #8a1c00;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.5 "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
/* Photo + titre restent solidaires a gauche, le bouton de deconnexion a
   droite : sans ce groupe, space-between repartirait les trois enfants et
   le titre atterrirait au milieu. */
.ident { display: flex; align-items: center; gap: 1rem; }
h1 { font-size: 1.6rem; margin: 0.5rem 0; color: #fff;
  text-transform: uppercase; font-weight: 700; }
/* #pp de l'ancien site. width/height sont aussi poses en attributs dans
   ranking.html.j2 pour reserver la place avant le chargement. */
.pp { width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  display: block; }
.lede { color: var(--muted); }
.note { color: var(--muted); font-size: 0.9rem; }
.warn { color: var(--warn); }
.btn, .btn-ghost {
  display: inline-block; padding: 0.55rem 1rem;
  text-decoration: none; cursor: pointer; font: inherit;
}
/* #loginBtn de l'ancien site : pilule a bordure noire epaisse. */
.btn { background: var(--accent); color: #06101c; border: 4px solid #000;
  border-radius: 25px; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--fg);
  border: 1px solid var(--line); border-radius: 25px; }
.tiles { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 40rem) { .tiles { grid-template-columns: 1fr 1fr; } }
/* .custom-rank de l'ancien site : radius 15px, padding 20px, centre. */
.tile { border-radius: 15px; padding: 20px; text-align: center;
  color: var(--on-tile); }
.tile-promo { background-image: var(--tile-promo); }
.tile-piscine { background-image: var(--tile-piscine); }
.tile h2 { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: var(--on-tile); }
.big { font-size: 2.4rem; font-weight: 700; margin: 0.25rem 0;
  text-transform: uppercase; }
.sub { margin: 0.25rem 0; font-weight: 500; text-transform: uppercase; }
.cohort { font-size: 0.9rem; margin: 0.5rem 0 0; }
/* Dans une tuile, .warn se pose sur un degrade clair : l'orange du theme
   sombre y disparaitrait. */
.tile .warn { color: var(--warn-on-tile); }
.picker { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin: 1.5rem 0; }
.picker select { background: #1b1f26; color: var(--fg);
  border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.45rem 0.6rem;
  font: inherit; }
table.rank { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
table.rank th, table.rank td { text-align: left; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line); }
table.rank tr.is-me { background: var(--me); font-weight: 600; color: #fff; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  display: block; }
/* Sur fond sombre : l'ancien .position-click-btn etait noir parce qu'il
   vivait sur un degrade clair. Le reprendre ici le rendrait invisible. */
.pager { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0;
  color: var(--fg); }
.pager a, .pager button { color: var(--fg); cursor: pointer; }
.skeleton { padding: 1rem 0; }
.skel-row { height: 2.1rem; border-radius: 0.4rem; margin-bottom: 0.4rem;
  background: linear-gradient(90deg, #1b1f26, #232833, #1b1f26);
  background-size: 200% 100%; animation: sweep 1.2s linear infinite; }
@keyframes sweep { to { background-position: -200% 0; } }
.foot { border-top: 1px solid var(--line); color: var(--muted);
  font-size: 0.85rem; display: flex; gap: 1rem; justify-content: center;
  padding: 1rem; }
.foot a { color: var(--accent); }