/* Site Chapaland : leur modèle (bandeau 1146 px, boutons en sprite, bloc blanc de 946 px, menu de gauche),
   rendu fluide : en dessous de 960 px les boutons défilent, en dessous de 720 px le menu passe au-dessus. */
@font-face { font-family: "Titillium Web Black"; src: url(/salon/assets/titillium-web-black.woff2) format("woff2"); font-display: swap; }
:root { --sky: #60cefc; --ink: #1d2b36; --muted: #6b7c88; --title: #1D2552; --sub: #214A61; --link: #284555; --hot: #D03600;
  --accent: #f08a4b; --accent-dark: #c9652a; --frame: #4fb8e8; --frame-dark: #2e8fc0; --line: #d9e7ef; --t: "Titillium Web Black", "Trebuchet MS", sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font: 13px/1.45 "Trebuchet MS", "Nunito", system-ui, sans-serif; color: var(--ink);
  background: url(/site/assets/bg_fix_2.gif) center top repeat var(--sky); background-attachment: fixed; background-color: #6090be; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hot); }
h1, h2, h3 { margin: 0; font-weight: normal; }

/* ---------- bandeau ---------- */
.header { height: 195px; width: 100%; background: url(/site/assets/body_bg_normal.png) repeat-x; }
#header-bloc { position: relative; max-width: 1146px; height: 100%; margin: auto; background: url(/site/assets/header_alchemiz.jpg) center top no-repeat; }
#header-logo { position: absolute; left: 140px; top: 4px; width: 252px; height: 96px; background: url(/site/assets/chapaland.png) center/contain no-repeat; }
#header-buttons { position: absolute; left: 50%; top: 135px; transform: translateX(-50%); width: 946px; height: 51px; display: flex; }
.header-button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 51px; padding-bottom: 3px; background-image: url(/site/assets/header_button.png);
  font: 17px/1 var(--t); letter-spacing: -1px; color: #004861; white-space: nowrap; }
a.header-button:hover { color: var(--hot); }
.header-button .t { margin-left: 32px; }
.boutique span, .credits span { margin-left: 30px; } /* l'icône du sprite est à gauche */
.hmc { width: 34px; background-position: 0 0; } a.hmc:hover { background-position: 0 -50px; }
.tchat { width: 153px; font-size: 24px; background-position: -34px 0; } a.tchat:hover { background-position: -34px -50px; }
.message { width: 146px; background-position: -187px 0; }
.friend { width: 105px; background-position: -333px 0; }
.community { width: 196px; background-position: -438px 0; } a.community:hover { background-position: -438px -50px; }
a.credits:hover { background-position: -782px -50px; }
.boutique { width: 148px; color: #4F3F01; background-position: -634px 0; }
.credits { width: 134px; color: #4F3F01; background-position: -782px 0; }
.help { width: 30px; background-position: -916px 0; } a.help:hover { background-position: -916px -50px; }
/* Connexion (ou Salut X / Mon compte / Déconnexion) : juste au-dessus du menu, à droite, 8 px d'écart */
.account-box { position: absolute; right: max(8px, calc(50% - 473px)); top: calc(135px - 8px - 26px); z-index: 2; height: 26px; display: flex; gap: 10px; align-items: center;
  padding: 0 12px; background: #ffffffe6; border-radius: 13px; box-shadow: 0 2px 6px #0003; font-weight: bold; white-space: nowrap; }
.account-box .cta { color: #fff; background: var(--accent); border-radius: 10px; padding: 2px 10px; }
.account-box .cta:hover { background: var(--accent-dark); color: #fff; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.linkish:hover { color: var(--hot); }

/* « bientôt » : grisé, pas cliquable */
.soon { filter: grayscale(1); opacity: .55; cursor: not-allowed; position: relative; }
.soon::after { content: "bientôt"; position: absolute; top: 2px; right: 4px; padding: 0 5px; border-radius: 6px; background: #556; color: #fff;
  font: 9px/14px "Trebuchet MS", sans-serif; letter-spacing: 0; text-transform: uppercase; }
.header-button.soon::after { top: auto; bottom: 6px; right: 8px; }
.help.soon::after, .hmc.soon::after { display: none; }

/* ---------- bloc principal ---------- */
.maintable-community { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 946px; width: calc(100% - 16px); margin: -10px auto 0; padding-bottom: 24px;
  background: url(/site/assets/bg.png) no-repeat #fff; border-radius: 0 0 10px 10px; box-shadow: 0 4px 18px #0002; }
.bloc-header-community { flex: 0 0 100%; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 86px; }
.wording-header-community { color: var(--title); font: 26px var(--t); }
.picto-header { width: 50px; height: 50px; background: url(/site/assets/icon_big.png) no-repeat; }
.picto-header-community { background-position: -300px 0; } .picto-header-games { background-position: -350px 0; }
.picto-header-news { background-position: -250px 0; } .picto-header-trophy { background-position: -900px 0; }
.picto-header-credits { background-position: -600px 0; } .picto-header-help { background-position: -750px 0; }

#left_bar { flex: 0 0 160px; padding-left: 8px; display: flex; flex-direction: column; }
.left_menu_community { display: flex; align-items: center; width: 130px; height: 50px; margin-bottom: 2px; background: url(/site/assets/leftmenu_button.png);
  color: var(--title); font: 13px var(--t); }
a.left_menu_community:hover, .left_menu_community.on { background-position: 0 50px; color: var(--title); }
.picto-hmc-avatar { display: inline-block; flex: 0 0 34px; width: 34px; height: 34px; background: url(/site/assets/icon.png) no-repeat; }
.picto-community { margin: 0 5px 0 8px; }
.picto-community-community { background-position: -374px 0; } .picto-community-book { background-position: -408px 0; }
.picto-community-games { background-position: -476px 0; } .picto-community-bbs { background-position: -510px 0; }
.picto-community-trophy { background-position: -1088px 0; } .picto-community-join { background-position: -918px 0; }
.picto-community-account { background-position: -952px 0; } .picto-community-help { background-position: -340px 0; }

#content_newgen { flex: 1 1 0; min-width: 0; padding: 0 24px 0 10px; }
.subtitle-header-games { display: flex; align-items: center; gap: 10px; width: 256px; max-width: 100%; height: 36px; margin: 22px 0 12px; padding-left: 8px;
  background: url(/site/assets/subtitle_bg.png) no-repeat; }
#content_newgen > .subtitle-header-games:first-child { margin-top: 0; }
.wording-games { font: 16px/34px var(--t); color: var(--sub); white-space: nowrap; }
.picto-sub-games { background-position: -340px 0; } .picto-sub-bbs { background-position: -510px 0; } .picto-sub-trophy { background-position: -1088px 0; }
.muted { color: var(--muted); }
.right { text-align: right; }
.foot { text-align: center; color: #fff; text-shadow: 0 1px 2px #0006; padding: 14px 10px 24px; font-size: 12px; }

/* ---------- boutons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.btn { display: inline-block; border: 0; border-radius: 10px; padding: 8px 18px; cursor: pointer; font: 16px var(--t); color: #fff; letter-spacing: .2px;
  background: linear-gradient(#f7a46b, var(--accent)); box-shadow: inset 0 -3px 0 var(--accent-dark), 0 2px 4px #0002; }
.btn:hover { color: #fff; filter: brightness(1.06); }
.btn.big { font-size: 24px; padding: 10px 34px; }
.btn.alt { background: linear-gradient(#7fd2f6, var(--frame)); box-shadow: inset 0 -3px 0 var(--frame-dark), 0 2px 4px #0002; }
.btn.danger { background: linear-gradient(#f07b7b, #d94c4c); box-shadow: inset 0 -3px 0 #a83434, 0 2px 4px #0002; }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- accueil ---------- */
.welcome { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); }
.welcome > div:first-child { flex: 1 1 320px; }
.welcome .lead { font: 18px var(--t); color: var(--title); margin: 0 0 6px; }
.online { text-align: center; padding: 10px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); min-width: 140px; }
.online b { display: block; font: 34px/1 var(--t); color: var(--accent-dark); }

/* ---------- news ---------- */
.news-list { display: grid; gap: 12px; }
.news { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.news h3 { font: 18px var(--t); color: var(--title); }
.news-meta { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.news p { margin: 0 0 8px; overflow-wrap: anywhere; }
.news-img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin-bottom: 8px; object-fit: cover; }
.news-link { position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.news:has(.news-link):hover { border-color: var(--frame); box-shadow: 0 2px 8px #4fb8e833; }
.news .more { color: var(--accent-dark); font-weight: bold; }

/* ---------- classement ---------- */
.podium, .members { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 8px 0 4px; flex-wrap: wrap; }
.pod, .member { flex: 0 1 170px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* avatar debout sur son ombre */
.pod-av { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 166px; }
.pod-av::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 92px; height: 20px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, #00000047, #0000001c 60%, #0000 100%); }
.pod-av img { position: relative; z-index: 1; max-width: 140px; max-height: 160px; margin-bottom: 10px; }
.pod-1 .pod-av { height: 186px; }
.pod-rank { width: 30px; height: 30px; margin-top: 6px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 17px/1 var(--t); text-shadow: 0 1px 0 #0004; box-shadow: inset 0 -2px 0 #0002; }
.pod-1 .pod-rank { background: linear-gradient(#ffd85a, #e0a800); }
.pod-2 .pod-rank { background: linear-gradient(#e4ebf0, #a2afb8); }
.pod-3 .pod-rank { background: linear-gradient(#f0b37a, #c27a3a); }
.pod-nick { font: 16px var(--t); color: var(--title); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { color: var(--muted); font-weight: bold; }
.pod.empty { opacity: .45; }
.boosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.boost { padding: 12px 14px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3dfa6; text-align: center; }
.boost b { display: block; font: 26px/1.1 var(--t); color: #a77400; }
.board { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.board th { font: 14px var(--t); color: var(--sub); }
.board td:first-child, .board th:first-child { width: 48px; text-align: center; }
.board td:last-child, .board th:last-child { width: 90px; text-align: right; font-weight: bold; }
.board tbody tr:nth-child(-n+3) td:first-child { font: 15px var(--t); color: var(--accent-dark); }
.board tr.me td { background: #fff4c2; }

/* ---------- formulaires ---------- */
.form { display: grid; gap: 12px; max-width: 460px; }
.form label { display: grid; gap: 4px; font-weight: bold; color: var(--sub); }
.form small { font-weight: normal; color: var(--muted); }
.form input, .form textarea { width: 100%; padding: 8px 10px; border: 1px solid #b9d6e6; border-radius: 8px; font: 14px "Trebuchet MS", sans-serif; color: var(--ink); background: #fbfeff; }
.form input:focus, .form textarea:focus { outline: 2px solid #4fb8e866; border-color: var(--frame); }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; }
.form details summary { cursor: pointer; color: var(--muted); }
.form details label { margin-top: 6px; }
.msg { min-height: 18px; margin: 0; font-weight: bold; color: #c0392b; }
.msg.ok { color: #23864a; }
.starters { display: flex; gap: 10px; border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.starters legend { font-weight: bold; color: var(--sub); margin-bottom: 4px; padding: 0; }
.starter { position: relative; flex: 1 1 110px; display: flex !important; flex-direction: column; align-items: center; padding: 8px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.starter-av { display: flex; align-items: flex-end; justify-content: center; width: 90px; height: 124px; }
.starter-av img { max-width: 90px; max-height: 120px; }
.starter span { font: 15px var(--t); color: var(--title); }
.starter input { position: absolute; opacity: 0; pointer-events: none; }
.starter:has(input:checked) { border-color: var(--accent); background: #fff6ef; }
.starter:has(input:focus-visible) { outline: 2px solid var(--frame); }

/* ---------- compte ---------- */
.profile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile-av { max-width: 140px; max-height: 170px; padding: 8px; background: #eef8fd; border-radius: 10px; }
.profile dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.profile dt { color: var(--muted); }
.profile dd { margin: 0; }
.bar { display: inline-block; vertical-align: middle; width: 110px; height: 8px; border-radius: 4px; background: #dceaf2; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #7fd2f6, var(--frame-dark)); }
.role { display: inline-block; padding: 0 8px; border-radius: 8px; color: #fff; background: var(--c); font-size: 11px; font-weight: bold; vertical-align: 1px; }

/* ---------- petits écrans ---------- */
@media (max-width: 1100px) { #header-logo { left: 16px; } }
@media (max-width: 960px) {
  #header-buttons { left: 0; right: 0; transform: none; width: auto; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
  #header-buttons::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .header { height: 166px; }
  #header-logo { left: 8px; transform: none; top: 8px; width: 190px; height: 70px; }
  #header-buttons { top: 115px; }
  .account-box { right: 8px; top: calc(115px - 8px - 26px); font-size: 12px; }
  .bloc-header-community { min-height: 64px; }
  .wording-header-community { font-size: 22px; }
  #left_bar { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; justify-content: center; }
  .left_menu_community { width: auto; height: 40px; padding-right: 12px; background: #eef8fd; border: 1px solid var(--line); border-radius: 10px; }
  a.left_menu_community:hover, .left_menu_community.on { background: #fff1e6; border-color: var(--accent); }
  .picto-community { transform: scale(.85); margin: 0 2px 0 4px; }
  #content_newgen { flex-basis: 100%; padding: 0 12px; }
  .podium, .members { gap: 4px; flex-wrap: nowrap; }
  .pod-av { height: 120px; } .pod-1 .pod-av { height: 132px; }
  .pod-av img { max-width: 92px; max-height: 112px; margin-bottom: 8px; }
  .pod-av::after { width: 64px; height: 14px; }
  .left_menu_community.soon::after { position: static; margin-left: 6px; }
  .online { flex: 1 1 100%; }
  .btn.big { font-size: 20px; padding: 8px 24px; }
}

/* ---------- aide ---------- */
.steps, .tips { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; }
.cmds { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
code { font: bold 12px ui-monospace, Consolas, monospace; color: var(--accent-dark); background: #fff4ea; padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.offs { display: grid; gap: 6px; margin: 4px 0 10px; }
.off a { font-weight: bold; }

/* ---------- annuaire ---------- */
.search { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); }
.search label { display: grid; gap: 3px; font-weight: bold; color: var(--sub); font-size: 12px; }
.search label.grow { flex: 1 1 160px; }
.search input, .search select { padding: 6px 8px; border: 1px solid #b9d6e6; border-radius: 8px; font: 13px "Trebuchet MS", sans-serif; background: #fff; color: var(--ink); }
.search .range { display: flex; align-items: center; gap: 4px; font-weight: normal; }
.search .range input { width: 64px; }
.search label.check { display: flex; align-items: center; gap: 5px; padding-bottom: 7px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.mcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; min-width: 0; }
.mcard:hover { border-color: var(--frame); box-shadow: 0 2px 8px #4fb8e833; }
.pod-nick a { color: inherit; }
.member:hover .pod-nick, .pod-nick a:hover { text-decoration: underline; }
.mcard-av { height: 104px; display: flex; align-items: flex-end; }
.mcard-av img { max-width: 96px; max-height: 100px; }
.mcard-nick { font: 14px var(--t); color: var(--title); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-info { color: var(--muted); font-size: 12px; }
.mcard-sub { color: var(--muted); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* indicateur de présence : l'image « online » (orbe vert) ; offline = la même, désaturée */
.dot { display: inline-block; width: 13px; height: 13px; margin-right: 4px; background: url(/salon/assets/online.png) center / contain no-repeat; vertical-align: -2px; }
.dot.off { filter: grayscale(1) brightness(1.15) opacity(.55); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; }
.profile.card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfeff; }
.pod-av.big { width: 170px; height: 196px; }
/* liens dans le texte : visibles */
#content_newgen p a:not(.btn), #content_newgen li a, .off a { color: var(--frame-dark); font-weight: bold; }
#content_newgen p a:not(.btn):hover, #content_newgen li a:hover, .off a:hover { color: var(--hot); }

/* ---------- silhouette pendant le chargement d'un avatar ---------- */
.ph { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 90'%3E%3Cg fill='%23dbe9f2'%3E%3Ccircle cx='30' cy='24' r='19'/%3E%3Cellipse cx='30' cy='56' rx='13' ry='15'/%3E%3Cellipse cx='14' cy='53' rx='5' ry='7'/%3E%3Cellipse cx='46' cy='53' rx='5' ry='7'/%3E%3Cellipse cx='21' cy='82' rx='9' ry='5'/%3E%3Cellipse cx='39' cy='82' rx='9' ry='5'/%3E%3C/g%3E%3C/svg%3E") center bottom 10px / auto 70% no-repeat; animation: ph 1.3s ease-in-out infinite; }
.mcard-av.ph, .starter-av.ph { background-position: center bottom; background-size: auto 85%; }
.ph img { opacity: 0; }
.ph.broken { animation: none; filter: hue-rotate(150deg) saturate(2); opacity: .6; }
@keyframes ph { 50% { opacity: .55; } }
img { transition: opacity .25s; }

/* ---------- classement : compte à rebours ---------- */
.countdown { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3dfa6; margin: 0 0 8px; }
.countdown b { font: 18px var(--t); color: #a77400; font-variant-numeric: tabular-nums; }

/* ---------- annuaire : chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 4px; }
.stat { padding: 10px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); text-align: center; }
.stat b { display: block; font: 26px/1.1 var(--t); color: var(--frame-dark); }
.stat span { color: var(--muted); font-size: 12px; }
.mcard-tags { color: var(--accent-dark); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- carte de membre ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.badge { padding: 3px 10px; border-radius: 12px; background: #eef8fd; border: 1px solid var(--line); font-weight: bold; font-size: 12px; color: var(--sub); }
.badge.gold { background: #fff4c2; border-color: #f0d36b; color: #7a5600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 4px 12px; border-radius: 14px; background: #fff1e6; border: 1px solid #f6c9a6; color: var(--accent-dark) !important; font-weight: bold; }
.tag:hover { background: var(--accent); color: #fff !important; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.item-ic { width: 70px; height: 70px; display: grid; place-items: center; }
.item-ic img { max-width: 70px; max-height: 70px; }
.item-n { font-weight: bold; font-size: 12px; color: var(--title); }
.item small { color: var(--muted); font-size: 11px; }

/* ---------- mon compte : centres d'intérêt ---------- */
.form.wide { max-width: none; }
.form select { padding: 7px 10px; border: 1px solid #b9d6e6; border-radius: 8px; font: 14px "Trebuchet MS", sans-serif; background: #fbfeff; max-width: 260px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.chips legend { font-weight: bold; color: var(--sub); margin-bottom: 6px; padding: 0; }
.chip { position: relative; display: inline-flex !important; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--sub); font-weight: bold; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.chip input:focus-visible + span { outline: 2px solid var(--frame); }

/* ---------- signalements ---------- */
.scroll { overflow-x: auto; }
.reports td { vertical-align: top; } .reports td:last-child, .reports th:last-child { width: auto; text-align: right; }
.btn.small { font-size: 13px; padding: 4px 10px; }
.foot nav { margin-bottom: 4px; } .foot a { color: #fff; font-weight: bold; } .foot a:hover { color: #ffe066; }
.board.palmares td, .board.palmares th { width: auto !important; text-align: left !important; font: inherit !important; color: inherit !important; white-space: nowrap; }
.board.palmares th { font: 14px var(--t) !important; color: var(--sub) !important; }
.board.palmares small { color: var(--muted); }

/* ---------- mes jeux ---------- */
.picto-header-games { background-position: -150px 0; }
.picto-sub-multi { background-position: -1224px 0; } .picto-sub-mini { background-position: -1258px 0; }
.games { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-bottom: 8px; }
.game { display: flex; flex-direction: column; align-items: center; width: 248px; }
.game-thumb { display: block; width: 240px; height: 154px; align-self: flex-start; border: 1px solid #5a4a3a; border-radius: 9px; overflow: hidden; box-shadow: 0 2px 4px #0003; }
.game-thumb img { display: block; }
.btn-play { display: grid; place-items: center; width: 248px; height: 58px; margin-top: 4px; padding: 0 14px 6px 0; background: url(/site/assets/btn_play.png) 0 0 no-repeat;
  font: 30px/1 var(--t); color: #21384b !important; letter-spacing: .5px; text-decoration: none !important; }
.btn-play:hover { background-position: 0 -58px; color: #fff !important; text-shadow: 0 2px 2px #0005; }
.btn-small { display: grid; place-items: center; width: 178px; height: 25px; background: url(/site/assets/btn_small.png) 0 0 no-repeat;
  font: bold 11px/1 "Trebuchet MS", sans-serif; color: #12324a !important; text-decoration: none !important; }
.btn-small:hover { background-position: 0 -26px; color: #fff !important; }
.rule { padding: 10px 14px; margin-bottom: 6px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); scroll-margin-top: 12px; }
.rule h3 { font: 17px var(--t); color: var(--title); margin-bottom: 4px; }
.rule p { margin: 0; }

/* ---------- messages ---------- */
.header-button { position: relative; }
.msg-count { position: absolute; right: 7px; bottom: 7px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 4px; display: grid; place-items: center;
  font: bold 10px/1 "Trebuchet MS", sans-serif; letter-spacing: 0; color: #4a6b80; background: #ffffffd9; border: 1px solid #9cc6dc; }
.msg-count.new { color: #fff; background: #e74c3c; border-color: #b03a2e; box-shadow: 0 0 0 2px #e74c3c33; }
a.message:hover { background-position: -187px -50px; }
.picto-header-mail { background-position: -650px 0; } .picto-sub-mail { background-position: -204px 0; }
.mtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.mtabs a { padding: 6px 14px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); font: 14px var(--t); color: var(--sub); }
.mtabs a.on { background: var(--frame); border-color: var(--frame-dark); color: #fff; }
.mtabs a b { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 4px; background: #e74c3c; color: #fff; font: bold 11px/16px "Trebuchet MS", sans-serif; text-align: center; }
.mtabs a.write { margin-left: auto; background: #fff1e6; border-color: #f6c9a6; color: var(--accent-dark); }
.mlist { display: grid; gap: 6px; }
.mrow { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink) !important; }
.mrow:hover { border-color: var(--frame); }
.mrow.unread { background: #fff8e6; border-color: #f3dfa6; }
.mrow.unread .mrow-sub { font-weight: bold; }
.mrow-av { width: 44px; height: 52px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.mrow-av img { max-width: 44px; max-height: 52px; }
.mrow-main { display: grid; min-width: 0; }
.mrow-who { font: 14px var(--t); color: var(--title); }
.mrow-sub, .mrow-ex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-ex { color: var(--muted); font-size: 12px; }
.mrow-at { color: var(--muted); font-size: 12px; text-align: right; display: grid; }
.mview { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mview header { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.mview h3 { font: 18px var(--t); color: var(--title); }
.mview-text p { margin: 0 0 8px; overflow-wrap: anywhere; }
.quote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--frame); background: #f4fafd; border-radius: 0 8px 8px 0; color: var(--muted); }
.quote p { margin: 4px 0 0; }
@media (max-width: 720px) { .mrow { grid-template-columns: 36px 1fr; } .mrow-at { grid-column: 2; text-align: left; } .mrow-av { width: 36px; } }

/* ---------- amis ---------- */
a.friend:hover { background-position: -333px -50px; }
.picto-header-friends { background-position: -300px 0; } .picto-sub-friends { background-position: -918px 0; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-bottom: 6px; }
.fcard { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.fcard-av { flex: 0 0 52px; height: 62px; display: flex; align-items: flex-end; justify-content: center; }
.fcard-av img { max-width: 52px; max-height: 62px; }
.fcard-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fcard-nick { font: 15px var(--t); color: var(--title) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-info { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-act { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: #eef8fd; color: var(--sub) !important; font: bold 13px/1 "Trebuchet MS", sans-serif; cursor: pointer; padding: 0; }
.mini:hover { background: #fff1e6; border-color: #f6c9a6; }
.form.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: none; }
.form.inline label { flex: 0 1 240px; }
.form.inline .msg { flex-basis: 100%; }
.badge { align-self: center; }

/* ---------- panneau d'admin ---------- */
.picto-header-admin { background-position: 0 0; }
.account-box .adm { color: #a33; }
.flash { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; margin: 0 0 12px; border-radius: 10px; background: #e9f9ef; border: 1px solid #9fdcb4; color: #1d6b3a; font-weight: bold; user-select: all; }
.flash button { border: 0; background: none; cursor: pointer; color: inherit; font-weight: bold; user-select: none; }
.board.adm td, .board.adm th { width: auto !important; text-align: left !important; vertical-align: middle; font: inherit !important; color: inherit !important; }
.board.adm th { font: 14px var(--t) !important; color: var(--sub) !important; }
.board.adm tbody tr:hover td { background: #f6fbfe; }
.acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inl { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.inl select, .inl input { padding: 3px 5px; border: 1px solid #b9d6e6; border-radius: 6px; font: 12px "Trebuchet MS", sans-serif; background: #fff; }
.inl .msg { font-size: 11px; min-height: 0; }
.inl-wrap { margin-bottom: 8px; }
/* ---------- onglet Santé (admin) ---------- */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 10px; }
.gauge { padding: 10px 12px; border-radius: 10px; background: #eef8fd; border: 1px solid var(--line); }
.gauge .gtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.gauge .gtop b { color: var(--frame-dark); font: 16px var(--t); white-space: nowrap; }
.gauge .bar { display: block; width: 100%; height: 10px; }
.gauge.gold { background: #fffaf0; border-color: #f0d36b; }
.gauge.gold .bar i { background: linear-gradient(90deg, #f7d27a, #e0a500); }
.gauge.gold .gtop b { color: #a77400; }
.gauge.danger { background: #fdf0f0; border-color: #e7a3a3; }
.gauge.danger .bar i { background: linear-gradient(90deg, #f29b9b, #d94c4c); }
.gauge.danger .gtop b { color: #b23; }
.nowrap { white-space: nowrap; }
.board.adm tr.gold td { background: #fffaf0; }
.board.adm tr.danger td { background: #fdf0f0; color: #a33 !important; }

/* ---------- Styliz ---------- */
.plan { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.slot { padding: 6px 14px; border-radius: 10px; background: #f7e3f8; border: 1px solid #e2b5e6; font: 16px var(--t); color: #8a2a91; }
.slot.past { opacity: .45; }
.slot.next { background: #c94fd0; border-color: #8a2a91; color: #fff; }
.crowns { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.crown { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.crown small { color: var(--muted); font-size: 11px; }
.badge.styliz { background: #f7e3f8; border-color: #e2b5e6; color: #8a2a91; }
.board.sz td:nth-child(3), .board.sz th:nth-child(3) { width: 90px; text-align: right; }

/* Boutons, menus, onglets, images : pas de sélection de texte ni de glisser d'image au clic (le contenu des pages,
   lui, reste sélectionnable). */
button, .btn, .btn-play, .btn-small, .header-button, #header-buttons, .left_menu_community, .account-box, .linkish,
.mtabs, .pager, .badge, .dot, .game, .game-thumb, .pod, nav, label, img { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }

/* Record de course (page Mes Jeux) : la meilleure course de tous les temps, mise en avant. */
.record { font-size: 1.15rem; background: #fff7e6; border: 1px solid #ffd98a; border-radius: 8px; padding: 10px 14px; display: inline-block; }
.record b { color: #af7800; }