/* RUIN OF BLADES — l'interface : le salon, les fenêtres, la DA (16 au 18/10/2026).

   Les dix feuilles ajoutées par-dessus style.css (social.css, puis ui2.css … ui10.css), réunies
   le 18/10/2026 dans ce seul fichier, DANS LE MÊME ORDRE, une partie par ancienne feuille
   (leur nom reste dans le titre de chaque partie : les commentaires de js/ qui citent
   « css/ui10.css § 6 » renvoient à la partie « ex-ui10.css », § 6).
   L'ordre compte : à précision égale, une règle plus bas l'emporte sur une règle plus haut.
   Ce qui n'avait plus d'effet (écrasé plus loin, ou visant des classes disparues) est parti ;
   ce qui retouchait une règle de style.css y est revenu quand c'était sans risque.
   Une nouvelle retouche : dans la règle qu'elle corrige, plutôt qu'à la fin. */

/* ▓▓▓▓▓▓▓▓▓ PARTIE 1 · ex-social.css ▓▓▓▓▓▓▓▓▓
   le haut du salon (nouveautés, amis, burger), la boutique façon
   Clash Royale, le classement en podium, les amis et le clan, le chat, les
   nouveautés, l'historique et les touches du téléphone dans l'aide (16/10/2026). */

/* ═════════ LE HAUT DU SALON ═════════ */
#menu.salon .haut { z-index: 4; }
.rond-menu { position: relative; width: max(46px, calc(34px / var(--ech, 1))) !important; }
#btn-burger.ouvert { filter: brightness(1.12); transform: translateY(2px); }
.point-rouge { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px rgba(255,59,48,.8); animation: pulse-rouge 1.6s ease-in-out infinite; }
@keyframes pulse-rouge { 50% { transform: scale(1.2); } }
.badge-rouge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: #fff; font-style: normal; font-weight: 900; font-size: .62rem; line-height: 1; text-shadow: none; }
.rond-menu > .badge-rouge { position: absolute; top: -4px; right: -6px; }
.menu-burger { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 210px; border-radius: 16px;
  background: linear-gradient(180deg, #6a4422, #4a2c12); border: 3px solid #2a1604; box-shadow: 0 14px 40px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.12); animation: burger-entre .14s ease-out; }
@keyframes burger-entre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.menu-burger::before { content: ''; position: absolute; top: -9px; right: 16px; width: 14px; height: 14px; background: #6a4422; border-left: 3px solid #2a1604; border-top: 3px solid #2a1604; transform: rotate(45deg); }
.menu-burger button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 11px; text-align: left; font-family: var(--gras); font-weight: 900; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6dc, var(--cr-creme2)); color: var(--cr-encre); border: 2px solid var(--cr-brun2); box-shadow: 0 3px 0 var(--cr-brun2); text-shadow: none; }
@media (hover: hover) { .menu-burger button:hover { background: linear-gradient(180deg, #fff0a0, #ffd24a); } }
.menu-burger button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cr-brun2); }
.menu-burger svg { width: 20px; height: 20px; flex: none; color: var(--cr-brun2); }

/* ═════════ les boutons façon Clash Royale ═════════ */
.cr-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-family: var(--gras); font-weight: 900; font-size: .9rem; letter-spacing: .03em; color: #fff; cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.45); border: 2px solid rgba(0,0,0,.55); box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.cr-bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.cr-bouton.vert { background: linear-gradient(180deg, #9ff06a, #4cbf2a 55%, #2f9a1a); }
.cr-bouton.bleu { background: linear-gradient(180deg, #7cc0ff, #2d8bf0 55%, #1c62c0); }
.cr-bouton.or { background: linear-gradient(180deg, #fff0a0, #ffc030 55%, #e09010); color: #3a2300; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cr-bouton.gris { background: linear-gradient(180deg, #d8dde4, #a8b0bc); color: #2a3240; text-shadow: none; }
.cr-bouton:disabled { filter: saturate(.2) brightness(.9); cursor: default; transform: none; }
.cr-bouton .piece, .cr-carte .piece { display: inline-block; width: 16px; height: 16px; }

/* ═════════ LA BOUTIQUE ═════════ */
.panneau.boutique { width: min(980px, 96vw); gap: 10px; }
.boutique-defile { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; padding: 2px 4px 6px; margin: 0 -4px; min-height: 0; flex: 1; max-height: calc(66vh / var(--ech, 1)); }
.cr-section { display: flex; flex-direction: column; gap: 8px; }
.cr-bandeau { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 10px; border: 2px solid rgba(0,0,0,.5); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); }
.cr-bandeau b { font-family: var(--gras); font-weight: 900; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.cr-bandeau small { font-family: var(--corps); font-weight: 700; font-size: .75rem; color: rgba(255,255,255,.88); margin-left: auto; }
.cr-bandeau.rouge { background: linear-gradient(180deg, #ff6a5a, #c42018); }
.cr-bandeau.bleu { background: linear-gradient(180deg, #58a6f5, #1c4fa8); }
.cr-bandeau.violet { background: linear-gradient(180deg, #c07cff, #6a28c0); }
.cr-bandeau.or { background: linear-gradient(180deg, #ffd24a, #c47a00); }
.cr-minuteur { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.35); font-family: var(--gras); font-weight: 900; font-size: .78rem; color: #fff; }
.cr-minuteur i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; position: relative; }
.cr-minuteur i::after { content: ''; position: absolute; left: 3px; top: 1px; width: 2px; height: 4px; background: #fff; }
.cr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cr-grille.coffres { grid-template-columns: repeat(3, 1fr); }
.cr-grille.packs-boutique, .packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* une carte : la couleur de sa rareté, une vitrine, un ruban, un bouton vert */
.cr-carte { --r1: #c8d0da; --r2: #7c8898; --r3: #3c4656; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 9px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, var(--r1), var(--r2)); border: 3px solid var(--r3); box-shadow: 0 5px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.45); color: #fff; overflow: hidden; }
.cr-carte.rare { --r1: #8cc8ff; --r2: #2d78e0; --r3: #123c8a; }
.cr-carte.epique { --r1: #e0a8ff; --r2: #8a3ad8; --r3: #44107a; }
.cr-carte.legendaire { --r1: #fff0a0; --r2: #f0a020; --r3: #8a4a00; }
.cr-carte.legendaire::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,255,255,.45) 25%, transparent 30% 70%, rgba(255,255,255,.35) 75%, transparent 80%); animation: cr-tourne 6s linear infinite; pointer-events: none; }
@keyframes cr-tourne { to { transform: rotate(360deg); } }
.cr-carte > * { position: relative; }
.cr-ruban { align-self: stretch; margin: -10px -8px 0; padding: 3px 0; font-family: var(--gras); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; background: rgba(0,0,0,.28); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.cr-vitrine { width: 100%; display: flex; justify-content: center; padding: 6px 0; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,.08) 70%); }
.cr-vitrine canvas { width: 88px; height: 88px; image-rendering: pixelated; }
.cr-info { display: flex; flex-direction: column; gap: 1px; min-height: 34px; justify-content: center; }
.cr-info small { font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.cr-info b { font-family: var(--gras); font-weight: 900; font-size: .86rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cr-info p { margin: 4px 0 0; font-family: var(--corps); font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.94); text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cr-carte .cr-bouton { width: 100%; }
.cr-carte.possede { filter: saturate(.75); }
.cr-carte.possede::after { content: '✓'; position: absolute; top: 24px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #4cbf2a; border: 2px solid #fff; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
/* à la une : en grand, en largeur */
.cr-une .cr-carte.grande { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 12px 14px; }
.cr-une .cr-carte.grande .cr-ruban { position: absolute; top: 0; left: 0; right: 0; margin: 0; text-align: center; }
.cr-une .cr-carte.grande .cr-vitrine { width: 150px; flex: none; margin-top: 14px; }
.cr-une .cr-carte.grande .cr-vitrine canvas { width: 132px; height: 132px; }
.cr-une .cr-carte.grande .cr-info { flex: 1; margin-top: 14px; }
.cr-une .cr-carte.grande .cr-info b { font-size: 1.25rem; }
.cr-une .cr-carte.grande .cr-bouton { width: auto; min-width: 150px; font-size: 1.1rem; padding: 12px 18px; margin-top: 14px; }
/* les coffres */
.cr-carte.coffre { --r1: #a8743c; --r2: #6a4420; --r3: #2a1604; }
.cr-carte.coffre.argent { --r1: #b8c8dc; --r2: #5e7088; --r3: #222e40; }
.cr-carte.coffre.royal { --r1: #ff9a8a; --r2: #a82030; --r3: #4a0810; }
.cr-carte.coffre canvas { width: 110px; height: 110px; image-rendering: pixelated; margin: -6px 0 -10px; }
.coffre-nom { font-family: var(--gras); font-weight: 900; font-size: .9rem; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.chances { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.chances span { padding: 1px 6px; border-radius: 999px; font-family: var(--gras); font-weight: 900; letter-spacing: .04em; background: rgba(0,0,0,.35); color: #ddd; text-shadow: none; }
.chances .rare { color: #8cc8ff; } .chances .epique { color: #e0a8ff; } .chances .legendaire { color: #ffd24a; }
/* les packs */
.cr-carte.pack { --r1: #ffe88a; --r2: #d89a20; --r3: #6a4200; }
.cr-carte.pack canvas { width: 80px; height: 80px; }
.cr-carte.pack .type { font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #5a3a00; text-shadow: none; }
.cr-carte.pack .nom { font-family: var(--gras); font-weight: 900; font-size: .95rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cr-carte .pack-bonus { position: absolute; top: 6px; right: 6px; z-index: 1; }
/* le passe, en bannière */
.cr-passe { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(110deg, #ffcf3a, #ff8a00 45%, #c42018); border: 3px solid #5a1a00; box-shadow: 0 5px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.4); }
.cr-passe .promo-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cr-passe .promo-texte b { font-family: var(--gras); font-weight: 900; font-size: 1.05rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); letter-spacing: .03em; text-transform: uppercase; }
.cr-passe .promo-texte span { font-family: var(--corps); font-weight: 700; font-size: .8rem; color: #fff6dc; }
.cr-passe-etoile { width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffe46a 23% 40%, transparent 41%), conic-gradient(#fff6a0 0 8%, transparent 8% 17%, #fff6a0 17% 25%, transparent 25% 33%, #fff6a0 33% 42%, transparent 42% 50%, #fff6a0 50% 58%, transparent 58% 67%, #fff6a0 67% 75%, transparent 75% 83%, #fff6a0 83% 92%, transparent 92%); animation: cr-tourne 8s linear infinite; }
/* l'ouverture d'un coffre */
.coffre-voile { background: radial-gradient(circle at 50% 50%, rgba(40,60,120,.9), rgba(4,6,14,.97)); z-index: 60; display: flex; align-items: center; justify-content: center; --lueur: #ffffff; }
.coffre-voile.epique { background: radial-gradient(circle at 50% 50%, rgba(120,40,200,.9), rgba(10,4,20,.97)); }
.coffre-voile.legendaire { background: radial-gradient(circle at 50% 50%, rgba(255,180,40,.9), rgba(30,14,0,.97)); }
.coffre-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; zoom: var(--ech, 1); }
#coffre-cv { width: 260px; height: 260px; image-rendering: pixelated; }
.coffre-gain { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: gain-entre .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gain-entre { from { opacity: 0; transform: scale(.4); } }
.coffre-gain small { font-family: var(--gras); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; padding: 3px 14px; border-radius: 999px; background: rgba(0,0,0,.45); color: #c8d0da; }
.coffre-gain small.rare { color: #8cc8ff; } .coffre-gain small.epique { color: #e0a8ff; } .coffre-gain small.legendaire { color: #ffd24a; }
#coffre-objet { width: 180px; height: 180px; image-rendering: pixelated; filter: drop-shadow(0 0 24px rgba(255,255,255,.55)); }
.coffre-gain b { font-family: var(--gras); font-weight: 900; font-size: 1.6rem; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.coffre-gain span { font-family: var(--corps); font-weight: 700; color: #e6ecf4; }
.coffre-gain .cr-bouton { margin-top: 8px; font-size: 1.1rem; padding: 12px 34px; z-index: 3; }

/* ═════════ LE CLASSEMENT ═════════ */
.marche { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 0; border-radius: 14px 14px 0 0; cursor: pointer; text-shadow: none; border: 3px solid rgba(0,0,0,.5); border-bottom: 0; overflow: visible;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); }
.marche canvas { image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.marche .pseudo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--gras); font-weight: 900; font-size: .82rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.marche small { font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.marche.m1 { border-color: #8a5a00; box-shadow: 0 0 24px rgba(255,210,74,.35); }
.marche.moi { outline: 3px solid var(--cr-vert1); outline-offset: -1px; }
.couronne { position: absolute; top: -16px; left: 50%; margin-left: -15px; width: 30px; height: 20px; background: linear-gradient(180deg, #fff2a0, #ffb820); clip-path: polygon(0 100%, 0 30%, 25% 60%, 50% 0, 75% 60%, 100% 30%, 100% 100%); filter: drop-shadow(0 2px 0 #6a4200); animation: couronne 2.4s ease-in-out infinite; }
@keyframes couronne { 50% { transform: translateY(-3px); } }
.classement-liste { max-height: calc(30vh / var(--ech, 1)); gap: 3px; }
.classement-liste li canvas { width: 30px; height: 30px; image-rendering: pixelated; border-radius: 7px; background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); }
.classement-liste .rang { display: inline-flex; align-items: center; gap: 5px; }
.classement-liste .vict { font-family: var(--gras); font-weight: 900; font-size: .66rem; color: var(--cr-encre2); text-align: right; }
.classement-moi { display: flex; align-items: center; gap: 10px; justify-content: center; }
.classement-moi.classe { justify-content: flex-start; background: linear-gradient(180deg, #4a8a2a, #2a5a14); border-color: #163a08; color: #fff; font-family: var(--gras); font-weight: 900; }
.classement-moi.classe span:nth-child(2) { flex: 1; text-align: left; }
@media (max-height: 600px) { .marche.m1 canvas { width: 64px !important; height: 64px !important; }}

/* ═════════ LES AMIS ET LE CLAN ═════════ */
.panneau.amis { width: min(560px, 94vw); gap: 10px; }
.panneau.amis .note.vide, .liste-amis .note { text-align: center; color: #efe2c4; margin: 6px 0; }
#amis-avec-compte { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.onglets-amis { display: grid; gap: 6px; }
.onglet-ami { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 11px; font-family: var(--gras); font-weight: 900; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #5a6878, #34404e); color: #e6ecf4; border: 2px solid #1a222c; box-shadow: 0 3px 0 #1a222c; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.onglet-ami.choisi { background: linear-gradient(180deg, #fff0a0, #ffd24a 40%, #d9951e); color: #3a2300; border-color: var(--cr-or3); box-shadow: 0 3px 0 var(--cr-or3); text-shadow: none; }
.vue-amis, .vue-chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rangee-ajout { display: flex; gap: 6px; }
.rangee-ajout input { flex: 1; min-width: 0; }
.panneau.amis input, .panneau.annonces input, .panneau.annonces textarea { padding: 9px 12px; border-radius: 10px; border: 2px solid var(--cr-brun2); background: #fffaf0; color: var(--cr-encre); font-family: var(--corps); font-weight: 700; font-size: .9rem; user-select: text; -webkit-user-select: text; }
.panneau.amis input:focus, .panneau.annonces input:focus, .panneau.annonces textarea:focus { outline: none; border-color: var(--cr-or2); box-shadow: 0 0 0 3px rgba(255,181,42,.35); }
.rangee-ajout .gros { padding: 8px 14px; font-size: .85rem; }
.liste-amis { display: flex; flex-direction: column; gap: 5px; max-height: calc(38vh / var(--ech, 1)); overflow-y: auto; }
.liste-amis:empty { display: none; }
.liste-amis h3 { margin: 6px 0 0; font-family: var(--gras); font-weight: 900; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-or1); flex: none; }
.ligne-ami { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); text-shadow: none; }
.ligne-ami.cliquable { cursor: pointer; }
@media (hover: hover) { .ligne-ami.cliquable:hover { filter: brightness(1.04); } }
.ligne-ami.demande { background: linear-gradient(180deg, #fff6c0, #ffe080); border-color: var(--cr-or3); }
.ligne-ami.attente { opacity: .75; }
.ami-tete { position: relative; flex: none; }
.tete-ami { width: 40px; height: 40px; border-radius: 9px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); border: 2px solid var(--cr-brun); display: block; }
.ami-point { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #8a8f98; border: 2px solid #fff; }
.ligne-ami.en-ligne .ami-point { background: #4cd02a; box-shadow: 0 0 6px #4cd02a; }
.ami-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ami-nom b { color: var(--cr-encre); font-family: var(--gras); font-weight: 900; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ami-nom small { color: var(--cr-encre2); font-family: var(--corps); font-weight: 700; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ami-actions, .ami-droite { display: flex; gap: 5px; align-items: center; flex: none; }
.ami-droite .fleche { color: var(--cr-encre2); text-align: center; }
.ami-deplie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin: -3px 0 4px 24px; border-radius: 0 0 12px 12px; background: rgba(0,0,0,.28); border: 2px solid rgba(0,0,0,.4); border-top: 0; }
.ami-deplie .note { flex-basis: 100%; margin: 0; font-size: .74rem; color: #efe2c4; text-align: left; }
.pastille.vert { background: linear-gradient(180deg, #b8f590, #5cc83a); border-color: #22741a; box-shadow: 0 3px 0 #22741a; color: #0e3a06; }
button.petit { padding: 4px 8px; font-size: .72rem; }
.chef { padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, #ffe46a, #d89a10); border: 2px solid #8a5a00; font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #3a2300; }
.clan-bloc { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.22); border: 2px solid rgba(0,0,0,.35); }
.clan-bloc > b { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-or1); }
#clan-sans, #clan-avec { display: flex; flex-direction: column; gap: 8px; }
.clan-tete { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #7a2a2a, #4a1414); border: 3px solid #2a0808; box-shadow: inset 0 2px 0 rgba(255,255,255,.15); }
.clan-tete > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clan-tete b { font-family: var(--gras); font-weight: 900; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.clan-tete small { font-family: var(--corps); font-style: italic; color: #f0d8c0; font-size: .8rem; }
.clan-compte { font-family: var(--gras); font-weight: 900; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #ffd8a0; text-align: right; }
.blason { width: 38px; height: 44px; flex: none; background: linear-gradient(135deg, #ffd24a 0 50%, #c42018 50%); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.blason.petit { width: 26px; height: 30px; }
.clan-ligne { padding-left: 10px; }
.clan-actions { gap: 6px; flex-wrap: wrap; }
.clan-actions .gros { flex: 1; padding: 9px 10px; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* le chat */
.chat-tete { display: flex; align-items: center; gap: 10px; }
.chat-tete b { font-family: var(--gras); font-weight: 900; font-size: 1.05rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-messages { display: flex; flex-direction: column; gap: 6px; height: calc(40vh / var(--ech, 1)); min-height: 120px; overflow-y: auto; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid rgba(0,0,0,.4); }
.chat-messages .note { color: #efe2c4; text-align: center; }
.bulle { align-self: flex-start; max-width: 80%; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 12px 12px 12px 3px; background: #fffaf0; color: var(--cr-encre); text-shadow: none; font-family: var(--corps); font-size: .88rem; line-height: 1.35; user-select: text; -webkit-user-select: text; word-break: break-word; }
.bulle b { font-family: var(--gras); font-weight: 900; font-size: .7rem; color: #a0401c; }
.bulle small { align-self: flex-end; font-size: .62rem; color: var(--cr-encre2); }
.bulle.moi { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: linear-gradient(180deg, #c8f8a8, #96dc6c); }
/* le choix d'un ami à inviter */
.panneau.choix-ami { width: min(420px, 92vw); }
/* les invitations, en haut de l'écran */
.invitations-bulles { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 8px; pointer-events: none; zoom: var(--ech, 1); left: auto !important; right: calc(12px + var(--marge-d, env(safe-area-inset-right, 0px))) !important; top: calc(76px * var(--ech, 1)) !important; }
.bulle-invitation { pointer-events: auto; display: flex; align-items: center; border-radius: 14px;
  background: linear-gradient(180deg, #58a6f5, #1c4fa8); border: 3px solid #0b1f42; box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.3); color: #fff; font-family: var(--gras); font-weight: 900; animation: bulle-entre .35s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .3s, transform .3s; }
.bulle-invitation.duel { background: linear-gradient(180deg, #ff7a5a, #c42018); border-color: #4a0808; }
.bulle-invitation.part { opacity: 0; transform: translateY(-14px); }
@keyframes bulle-entre { from { opacity: 0; transform: translateY(-24px) scale(.9); } }
.bulle-invitation > div { flex: 1; display: flex; flex-direction: column; }
.bulle-invitation b { text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.bulle-invitation small { font-family: var(--corps); font-weight: 700; font-size: .78rem; color: rgba(255,255,255,.9); }
.btn-croix-bulle { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.4); color: #fff; font-weight: 900; }
/* la place « + » du salon privé */
.place.inviter { cursor: pointer; border-style: dashed; }
@media (hover: hover) { .place.inviter:hover { filter: brightness(1.08); } }
.place .plus { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--gras); font-weight: 900; font-size: 2.4rem; line-height: 1; color: #fff;
  background: linear-gradient(180deg, #9ff06a, #4cbf2a 55%, #2f9a1a); border: 3px solid #1a5a0e; box-shadow: 0 4px 0 #1a5a0e, inset 0 2px 0 rgba(255,255,255,.4); text-shadow: 0 2px 0 rgba(0,0,0,.4); animation: plus-bat 1.8s ease-in-out infinite; }
@keyframes plus-bat { 50% { transform: scale(1.07); } }

/* ═════════ LES NOUVEAUTÉS ═════════ */
.panneau.annonces { width: min(600px, 94vw); gap: 10px; }
.annonces-createur { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, #7a2a2a, #4a1414); border: 3px solid #2a0808; }
.annonces-createur > b { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-or1); }
.annonces-createur textarea { resize: vertical; min-height: 60px; }
.annonces-liste { display: flex; flex-direction: column; gap: 10px; max-height: calc(56vh / var(--ech, 1)); overflow-y: auto; padding-top: 8px; }
.annonce { position: relative; padding: 10px 14px 12px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); text-shadow: none; }
.annonce.neuve { border-color: #c42018; box-shadow: 0 0 0 2px rgba(255,59,48,.35); }
.annonce.neuve::before { content: 'Nouveau'; position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 999px; background: #d8261e; border: 2px solid #fff; color: #fff; font-family: var(--gras); font-weight: 900; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.annonce header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.annonce header b { flex: 1; font-family: var(--gras); font-weight: 900; font-size: 1rem; color: var(--cr-encre); }
.annonce header small { font-family: var(--corps); font-weight: 700; font-size: .72rem; color: var(--cr-encre2); white-space: nowrap; }
.annonce p { margin: 0 0 4px; color: #4a3a28; font-size: .86rem; line-height: 1.45; }

/* ═════════ L'HISTORIQUE ═════════ */
.panneau.historique { width: min(600px, 94vw); gap: 10px; }
.historique-resume { display: flex; gap: 8px; justify-content: center; }
.historique-resume:empty { display: none; }
.historique-resume span { padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.3); font-family: var(--gras); font-weight: 900; font-size: .74rem; letter-spacing: .04em; color: #efe2c4; }
.historique-resume .vert b { color: #9ff06a; } .historique-resume .rouge b { color: #ff8a7a; }
.historique-liste { display: flex; flex-direction: column; gap: 5px; max-height: calc(56vh / var(--ech, 1)); overflow-y: auto; }
.historique-liste .note { color: #efe2c4; text-align: center; }
.partie { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); text-shadow: none; }
.partie .issue { flex: none; width: 86px; padding: 8px 0; border-radius: 9px; text-align: center; font-family: var(--gras); font-weight: 900; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
.partie.gagnee .issue { background: linear-gradient(180deg, #9ff06a, #2f9a1a); }
.partie.perdue .issue { background: linear-gradient(180deg, #ff8a7a, #b02018); }
.partie.neutre .issue { background: linear-gradient(180deg, #8cc8ff, #2d78e0); }
.partie-milieu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.partie-milieu b { font-family: var(--gras); font-weight: 900; font-size: .88rem; color: var(--cr-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partie-milieu small { font-family: var(--corps); font-weight: 700; font-size: .72rem; color: var(--cr-encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partie-chiffres { display: flex; gap: 10px; font-family: var(--corps); font-size: .72rem; color: var(--cr-encre2); white-space: nowrap; }
.partie-chiffres b { font-family: var(--gras); color: var(--cr-encre); }
.partie-chiffres .vert b { color: #22741a; } .partie-chiffres .rouge b { color: #b02018; }

/* ═════════ L'AIDE : le téléphone ═════════ */
.aide-tactile h3 { margin: 0 0 8px; }
.tel-maquette { display: grid; gap: 14px; align-items: center; border-radius: 22px; background: linear-gradient(180deg, #1a2230, #0b0f16); border: 4px solid #000; box-shadow: inset 0 0 0 2px #3a4658, 0 8px 24px rgba(0,0,0,.45); grid-template-columns: 1fr 60px 1fr; padding: 12px 16px; justify-items: stretch; }
.tel-cote.droite { flex-direction: row-reverse; }
.tel-cote ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-family: var(--corps); font-size: .78rem; color: #c8d0da; line-height: 1.3; flex: 1; min-width: 0; width: auto; max-width: none; columns: auto; }
.tel-cote ul b { color: #fff; font-family: var(--gras); font-weight: 900; display: block; font-size: .74rem; letter-spacing: .03em; }
.tel-stick { position: relative; flex: none; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 3px solid rgba(255,255,255,.35); }
.tel-stick b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b8c4d4); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.tel-stick i { position: absolute; font-style: normal; font-size: .7rem; color: #ffd24a; }
.tel-stick .h { top: 3px; left: 50%; transform: translateX(-50%); } .tel-stick .b { bottom: 3px; left: 50%; transform: translateX(-50%); }
.tel-stick .g { left: 5px; top: 50%; transform: translateY(-50%); } .tel-stick .d { right: 5px; top: 50%; transform: translateY(-50%); }
.tel-boutons { position: relative; flex: none; width: 104px; height: 92px; }
.tel-rond { position: absolute; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--gras); font-weight: 900; font-size: 1.05rem; color: #fff; border: 3px solid rgba(0,0,0,.5); box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.tel-rond.f { right: 0; top: 0; width: 50px; height: 50px; background: linear-gradient(180deg, #ff7a5a, #c42018); }
.tel-rond.s { right: 8px; bottom: 0; background: linear-gradient(180deg, #7cc0ff, #1c62c0); }
.tel-rond.a { left: 0; bottom: 14px; width: 36px; height: 36px; font-size: .8rem; background: linear-gradient(180deg, #b0b8c4, #5a6474); }
.tel-milieu { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tel-pause { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; letter-spacing: -2px; color: #fff; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35); }
.tel-milieu small { font-family: var(--corps); font-size: .66rem; color: #8a96a6; }
@media (max-width: 760px) { .tel-milieu { display: none; } .tel-cote.droite { flex-direction: row; } }
@media (max-height: 600px) { .cr-une .cr-carte.grande .cr-vitrine { width: 110px; } .cr-une .cr-carte.grande .cr-vitrine canvas { width: 96px; height: 96px; } .cr-grille.coffres .cr-carte.coffre canvas { width: 84px; height: 84px; } }

/* ── corrections après les captures ── */
/* les bulles d'invitation : seulement au salon, jamais par-dessus un panneau (elles attendent qu'on le ferme) */
body:has(.voile:not([hidden]):not(#menu)) .invitations-bulles { display: none; }
/* dans une colonne qui défile, rien ne s'écrase */
.classement-liste li, .ligne-ami, .ami-deplie, .partie, .annonce, .bulle, .cr-section, .cr-passe, .clan-bloc, .clan-tete, .rangee-ajout, .onglets-amis, .liste-amis { flex: none; }
#vue-amis, #vue-clan { overflow-y: auto; max-height: calc(58vh / var(--ech, 1)); padding-right: 2px; }
#vue-amis .liste-amis, #vue-clan .liste-amis { max-height: none; overflow: visible; }

/* la maquette du téléphone : une grille franche (les règles de l'aide écrasaient la liste) */
.tel-cote, .tel-cote.droite { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; width: 100%; justify-self: stretch; }
.tel-cote.droite { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.tel-cote.droite .tel-boutons { order: 2; }

/* le classement : le podium à gauche, la liste à droite (les téléphones sont en paysage) */
.classement-moi.classe span[style] { padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.4); text-shadow: none; }
/* au-dessus des autres voiles */
#choix-ami { z-index: 70; }
.classement-liste .rang { padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.55); text-shadow: none; }
@media (max-width: 900px) {
  .tel-maquette { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  .tel-milieu { display: none; }
  .tel-cote, .tel-cote.droite { gap: 8px; }
  .tel-stick { width: 64px; height: 64px; } .tel-stick b { width: 26px; height: 26px; margin: -13px; }
  .tel-boutons { width: 84px; height: 76px; } .tel-rond.f { width: 40px; height: 40px; } .tel-rond { width: 34px; height: 34px; font-size: .85rem; } .tel-rond.a { width: 30px; height: 30px; }
  .tel-cote ul { font-size: .68rem; gap: 3px; } .tel-cote ul b { font-size: .64rem; }
}

/* ▓▓▓▓▓▓▓▓▓ PARTIE 2 · ex-ui2.css ▓▓▓▓▓▓▓▓▓
   les titres et leurs effets, le rang, le classement façon
   Clash Royale, la messagerie (16/10/2026). */

/* ═════════ LES TITRES : plus le défi est dur, plus ça brille ═════════ */
.titre-txt { font-family: var(--gras); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.titre-txt.aucun { color: #8a96a6; }
.titre-txt.commun { color: #e8e0cc; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.titre-txt.rare { color: #6ab4ff; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 6px rgba(106,180,255,.45); }
.titre-txt.epique { color: #d49aff; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 8px rgba(196,124,255,.85), 0 0 16px rgba(160,70,255,.55); animation: titre-luit 2.4s ease-in-out infinite; }
@keyframes titre-luit { 50% { text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 12px rgba(212,154,255,1), 0 0 24px rgba(160,70,255,.8); } }
.titre-txt.legendaire { background: linear-gradient(100deg, #b8780a 0%, #ffd24a 25%, #fffbe0 40%, #ffd24a 55%, #ff9a20 75%, #ffd24a 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(255,200,60,.75)); animation: titre-or 2.6s linear infinite; }
@keyframes titre-or { to { background-position: -250% 0; } }
/* le casier : l'onglet Titres */
.titres-zone { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.titre-fiche { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 3px solid #0a0e14; box-shadow: inset 0 2px 0 rgba(255,255,255,.08); }
.titre-fiche .note { margin: 0; font-size: .8rem; }
.titre-fiche-tete { display: flex; align-items: baseline; gap: 10px; }
.titre-txt.grand { font-size: 1.3rem; }
.titre-rarete { padding: 1px 8px; border-radius: 999px; font-family: var(--gras); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.titre-rarete.rare { color: #6ab4ff; } .titre-rarete.epique { color: #d49aff; } .titre-rarete.legendaire { color: #ffd24a; }
.titre-defi { margin: 0; font-family: var(--corps); font-size: .86rem; line-height: 1.4; }
.titre-progres { display: flex; align-items: center; gap: 10px; }
.titre-progres > i { flex: 1; height: 10px; border-radius: 999px; overflow: hidden; }
.titre-progres > i > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4cbf2a, #9ff06a); }
.titre-progres span { font-family: var(--gras); font-weight: 900; font-size: .74rem; white-space: nowrap; }
.titre-actions { justify-content: flex-start; gap: 8px; }
.titre-actions .cr-bouton { padding: 7px 16px; }
.grille-titres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; padding: 2px; }
.carte-titre { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; border-radius: 10px; text-align: left; cursor: pointer;
  text-shadow: none; }
.carte-titre .titre-txt { font-size: .82rem; }
.carte-titre small { font-family: var(--gras); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.carte-titre.gagne small { color: #22741a; }
.carte-titre.porte small { color: #9c5f00; }
.carte-titre.vu { outline: 3px solid #6ab4ff; outline-offset: -1px; }
.carte-titre.verrouille .titre-txt { opacity: .55; filter: saturate(.4); animation: none; }
.carte-titre.verrouille .titre-txt.legendaire { filter: saturate(.4) drop-shadow(0 1px 0 rgba(0,0,0,.7)); }
.carte-titre.rare { border-color: #12305f; } .carte-titre.epique { border-color: #3a1066; } .carte-titre.legendaire { border-color: #5a3a00; }
.titre-barre { display: block; width: 100%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.titre-barre > i { display: block; height: 100%; background: linear-gradient(90deg, #4cbf2a, #9ff06a); }
.carte-titre.gagne .titre-barre > i { background: linear-gradient(90deg, #ffd24a, #fff0a0); }
/* le profil : le titre porté, et le bouton qui mène au casier */
.titre-bouton { display: inline-flex; align-items: center; gap: 6px; }
.titre-bouton .titre-txt { font-size: .78rem; }
/* le VERSUS : le titre au-dessus du duelliste */
.vs-cote { position: relative; }

/* ═════════ TON RANG ═════════ */
.panneau.rang-panneau { width: min(620px, 94vw); gap: 12px; }
#rang-avec-compte { display: flex; flex-direction: column; gap: 12px; }
.rang-tete { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #1c2638, #10161f); border: 3px solid #0a0e14; }
.rang-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rang-titre { font-family: var(--gras); font-weight: 900; font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.rang-barre { position: relative; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; border: 2px solid rgba(0,0,0,.5); }
.rang-barre i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; box-shadow: inset 0 2px 0 rgba(255,255,255,.4); transition: width .5s; }
.rang-barre span { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--gras); font-weight: 900; font-size: .78rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.8); }
.rang-manque { margin: 0 !important; font-family: var(--gras); font-weight: 900; font-size: .9rem; color: #ffd24a !important; }
.rang-meilleur { font-family: var(--corps); font-size: .76rem; color: #a8b4c4; }
.rang-echelle { grid-template-columns: repeat(7, 1fr); display: flex !important; scroll-snap-type: x proximity; }
.echelon { --c: #888; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; background: rgba(0,0,0,.25); }
.echelon small { font-family: var(--gras); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #e6ecf4; }
.echelon.ici { background: rgba(255,210,74,.18); outline: 2px solid #ffd24a; }
.rang-note { margin: 0 !important; font-size: .78rem !important; }
.heros-rang { cursor: pointer; pointer-events: auto; line-height: 1.3; }
.heros-rang::after { content: " ▸"; opacity: .8; }
@media (hover: hover) { .heros-rang:hover { filter: brightness(1.15); } }
.profil-p-rang { cursor: pointer; }
.profil-p-rang::after { content: ' ▸'; opacity: .7; }

/* ═════════ LE CLASSEMENT, FAÇON CLASH ROYALE ═════════ */
.panneau.classement { width: min(640px, 94vw); gap: 8px; }
.onglets-cl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: none; }
.onglets-cl button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 11px; font-family: var(--gras); font-weight: 900; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #5a6878, #34404e); color: #e6ecf4; border: 2px solid #1a222c; box-shadow: 0 3px 0 #1a222c; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.onglets-cl button svg { width: 18px; height: 18px; }
.onglets-cl button.choisi { background: linear-gradient(180deg, #fff0a0, #ffd24a 40%, #d9951e); color: #3a2300; border-color: var(--cr-or3); box-shadow: 0 3px 0 var(--cr-or3); text-shadow: none; }
.cl-cadre { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; border-radius: 14px; background: linear-gradient(180deg, #0e2a56, #0a1d3c); border: 3px solid #061226; box-shadow: inset 0 2px 0 rgba(255,255,255,.08); overflow: hidden; }
.cl-liste { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 120px; max-height: calc(54vh / var(--ech, 1)); }
.cl-ligne { flex: none; display: grid; grid-template-columns: 38px 34px minmax(0, 1fr) auto 84px; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 10px; cursor: pointer; text-shadow: none;
  background: linear-gradient(180deg, #3b7fd6, #2a62b4); border: 2px solid #12366e; box-shadow: inset 0 2px 0 rgba(255,255,255,.22); color: #fff; }
.cl-liste .cl-ligne:nth-child(even) { background: linear-gradient(180deg, #3574c8, #2558a6); }
@media (hover: hover) { .cl-ligne:hover { filter: brightness(1.08); } }
.cl-ligne.moi { background: linear-gradient(180deg, #5cc83a, #2f9a1a); border-color: #145a0c; }
.cl-ligne.epingle { margin: 0; border-radius: 0; border: 0; border-top: 3px solid #061226; box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }
.cl-ligne.invite { display: block; text-align: center; font-family: var(--gras); font-weight: 900; font-size: .82rem; padding: 10px; background: linear-gradient(180deg, #5a6878, #34404e); }
.cl-place { display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; font-family: var(--gras); font-weight: 900; font-size: 1rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cl-place.or, .cl-place.argent, .cl-place.bronze { width: 32px; height: 36px; clip-path: polygon(50% 0, 100% 20%, 100% 70%, 50% 100%, 0 70%, 0 20%); font-size: .95rem; }
.cl-place.or { background: linear-gradient(180deg, #fff2a0, #ffc020 50%, #b07800); color: #5a3a00; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.cl-place.argent { background: linear-gradient(180deg, #ffffff, #c8d2de 50%, #7a8898); color: #2a3444; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.cl-place.bronze { background: linear-gradient(180deg, #ffd0a0, #d0844a 50%, #7a4418); color: #3a1a04; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.cl-tete { width: 34px; height: 34px; border-radius: 8px; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 70%, #c9b68a, #9a865c); border: 2px solid rgba(0,0,0,.45); }
.cl-blason { width: 30px; height: 34px; justify-self: center; }
.cl-nom { min-width: 0; display: flex; flex-direction: column; }
.cl-nom b { font-family: var(--gras); font-weight: 900; font-size: .95rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nom small { display: flex; gap: 4px; font-family: var(--corps); font-weight: 700; font-size: .72rem; color: rgba(255,255,255,.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blason.mini { width: 11px; height: 13px; flex: none; }
.cl-rang { --c: #fff; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 999px; background: rgba(0,0,0,.35); font-family: var(--gras); font-weight: 900; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.cl-points { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-family: var(--gras); font-weight: 900; font-size: 1rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.trophee { width: 18px; height: 18px; flex: none; background: linear-gradient(180deg, #fff2a0, #ffc020 55%, #b07800);
  clip-path: polygon(10% 0, 90% 0, 90% 18%, 100% 18%, 100% 40%, 76% 58%, 60% 66%, 60% 80%, 76% 80%, 76% 100%, 24% 100%, 24% 80%, 40% 80%, 40% 66%, 24% 58%, 0 40%, 0 18%, 10% 18%); }
.cl-vide { padding: 18px; text-align: center; color: #c8d8f0; font-family: var(--corps); font-weight: 700; font-size: .86rem; list-style: none; }
.classement-note { margin: 0 !important; font-size: .76rem !important; text-align: center; }
.classement-note:empty { display: none; }
@media (max-width: 640px) { .cl-ligne { grid-template-columns: 34px 30px minmax(0, 1fr) 74px; } .cl-rang { display: none; } }

/* ═════════ LA MESSAGERIE : les conversations ═════════ */
.onglets-amis { grid-template-columns: repeat(3, 1fr); }
.ligne-ami.fil { cursor: pointer; }
.ligne-ami.fil .ami-nom small { color: #6b5a46; }
.ligne-ami.fil.non-lu { background: linear-gradient(180deg, #fff6c0, #ffe9a0); border-color: var(--cr-or3); }
.ligne-ami.fil.non-lu .ami-nom small { color: var(--cr-encre); font-weight: 900; }
.fil-droite { flex-direction: column; align-items: flex-end; gap: 3px; }
.fil-heure { font-family: var(--corps); font-weight: 700; font-size: .66rem; color: var(--cr-encre2); }
.fil-blason { display: block; width: 36px; height: 40px; margin: 1px 2px; }
.cl-nom, .cl-nom b, .cl-nom small { text-align: left; align-items: flex-start; justify-content: flex-start; }
/* le titre dans le cadre du VERSUS, à la couleur de sa rareté */
.vs-carton .vs-titre.titre-txt { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .1em; }
.vs-carton .vs-titre.titre-txt.commun { color: #e8e0cc; }

/* le bandeau de la boutique pour qui n'a pas de compte */
.bandeau-invite { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, #2a3446, #1a2130); border: 3px solid #0a0e14; }
.bandeau-invite b { font-family: var(--gras); font-weight: 900; color: #ffd24a; white-space: nowrap; }
.bandeau-invite span { flex: 1; font-family: var(--corps); font-size: .82rem; color: #c8d0da; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 3 · ex-ui3.css ▓▓▓▓▓▓▓▓▓
   les corrections de l'audit d'ergonomie (16/10/2026). */

/* ═════════ 1. LE PIED DES PANNEAUX RESTE VISIBLE ═════════
   Sur téléphone, le bas des panneaux sortait de l'écran : il fallait deviner
   qu'on pouvait faire défiler pour trouver « Retour » (ou « Prendre le passe »).
   La dernière rangée du panneau reste collée en bas, sur une ombre qui dit
   qu'il y a encore du contenu dessous. */
.voile > .panneau > .gros:last-child,
.voile > .panneau > .rangee:last-child,
.voile > .panneau > button:last-child,
.voile > .panneau > .passe-pied {
  position: sticky; bottom: -14px; z-index: 6; margin-bottom: -6px;
  box-shadow: 0 -16px 18px -6px rgba(26, 14, 4, .92), 0 6px 0 rgba(0, 0, 0, .35);
}
.voile > .panneau > .rangee:last-child { padding: 8px 0 6px; background-size: 192px 96px; }
@media (max-height: 600px) {
  .voile > .panneau > .gros:last-child, .voile > .panneau > .rangee:last-child, .voile > .panneau > button:last-child { bottom: -10px; }
}

/* ═════════ 2. UN SEUL STYLE POUR SORTIR : « Retour », gris ═════════ */
button.gros.secondaire {
  background: linear-gradient(180deg, #e4e8ee, #b4bcc8 55%, #8e98a6); border: 3px solid #3a4250;
  box-shadow: 0 5px 0 #3a4250, inset 0 2px 0 rgba(255,255,255,.7);
}
@media (hover: hover) { button.gros.secondaire:hover {
  background: linear-gradient(180deg, #e4e8ee, #b4bcc8 55%, #8e98a6); border: 3px solid #3a4250;
  box-shadow: 0 5px 0 #3a4250, inset 0 2px 0 rgba(255,255,255,.7);
} }
button.gros.secondaire:active { transform: translateY(3px); box-shadow: 0 2px 0 #3a4250; }

/* ═════════ 3. DES CIBLES ASSEZ GRANDES POUR LE DOIGT (40 px au moins) ═════════ */
.rond-menu svg { width: 24px; height: 24px; }
.pastille { padding-top: 6px; padding-bottom: 6px; }
.btn-croix { font-size: 1.05rem !important; width: max(38px, calc(32px / var(--ech, 1))) !important; }
.heros-rang { padding: 7px 14px; font-size: .74rem; }
.teintes button, .teinte { min-width: 34px; min-height: 34px; }
.ami-droite .fleche { font-size: 1.2rem; width: 24px; }

/* ═════════ 4. DES TEXTES LISIBLES (11 px au moins) ═════════ */
.classement-salon small, .classement-salon span { font-size: .52rem !important; white-space: nowrap; letter-spacing: 0 !important; }
.cr-ruban, .chances span, .titre-rarete, .carte-titre small, .cr-info small, .cr-carte.pack .type { font-size: .66rem !important; }
.voie-etiquettes span { font-size: .74rem; }

/* ═════════ 5. LA FIN ET LA PAUSE DANS LA CHARTE DU JEU ═════════ */
#fin .panneau, #pause .panneau, #abandon .panneau { background-size: 192px 96px; border-color: #2a1604; }
#fin-titre.gagne { color: #ffe46a !important; }
#fin-titre.perdu { color: #ff9a8a !important; }
.fin-score { display: flex; justify-content: center; gap: 8px; }
.fin-score:empty { display: none; }
.fin-score span { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); font-family: var(--gras); font-weight: 900; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-encre2); text-shadow: none; }
.fin-score b { font-size: 1.3rem; color: var(--cr-encre); letter-spacing: 0; }
.fin-xp { font-family: var(--corps); font-weight: 700; line-height: 1.45; }
.fin-xp:empty { display: none; }
/* (19/10/2026) LES GAINS DU DUEL : une carte par gain, le chiffre en grand, une jauge qui se remplit */
.fin-score span { flex-direction: row; gap: 5px; align-items: baseline; min-width: 0; padding: 3px 10px; border-radius: 999px; }
.fin-score b { font-size: .95rem; }
.fin-ligne { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.fin-ligne > #fin-texte { margin: 0; }
.recompense-fin.plus { cursor: pointer; padding-left: 10px; color: #ffd84a; }
.fin-gains { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fin-gains[hidden] { display: none; }
.gain { display: flex; align-items: center; gap: 8px; min-width: 128px; padding: 6px 12px 6px 8px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(20,10,40,.85), rgba(10,5,22,.9)); border: 2px solid #0a0516; box-shadow: inset 0 0 0 2px rgba(255,216,74,.22), 0 3px 0 #0a0516;
  opacity: 0; transform: translateY(8px) scale(.96); animation: gain-arrive .32s cubic-bezier(.2,1.4,.4,1) forwards; }
.gain[hidden] { display: none; }
.gain.xp { animation-delay: .12s; } .gain.argent { animation-delay: .24s; }
@keyframes gain-arrive { to { opacity: 1; transform: none; } }
.gain-icone { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.gain-icone svg { width: 34px; height: 34px; }
.gain-icone .piece { width: 30px; height: 30px; }
.xp-icone { border-radius: 50%; background: radial-gradient(circle at 38% 32%, #c8fbff, #19c8e8 55%, #0a6f8a); border: 2px solid #06303c;
  font-family: var(--gras); font-weight: 900; font-size: .78rem; color: #06303c; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.gain-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gain b { font-family: var(--gras); font-weight: 900; font-size: 1.35rem; line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: var(--da-texte-contour, 0 2px 0 #000); white-space: nowrap; }
.gain.xp b { color: #8af0ff; } .gain.argent b { color: #ffd84a; }
.gain.lp.monte b { color: #6dff8a; } .gain.lp.baisse b { color: #ff6a5a; }
.gain small { font-family: var(--gras); font-weight: 800; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: #d8d0bc; white-space: nowrap; }
.gain-barre { display: block; width: 92px; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); border: 1px solid #000; }
.gain-barre i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .7s cubic-bezier(.3,.9,.4,1); }
.gain.xp .gain-barre i { background: linear-gradient(180deg, #ffffff, #8af0ff 40%, #19c8e8); }
.gain.lp .gain-barre i { background: linear-gradient(180deg, #fff6c8, #ffd84a 45%, #f09a12); }
.gain.lp.baisse .gain-barre i { background: linear-gradient(180deg, #ffd0c8, #ff6a5a 45%, #b0281c); }
/* promu, palier atteint : la carte s'allume */
.gain.fete { border-color: #5a3a00; box-shadow: inset 0 0 0 2px #ffd84a, 0 0 18px rgba(255,200,40,.55), 0 3px 0 #0a0516; }
.gain.fete small { color: #ffd84a; }
.fin-recompenses { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.fin-recompenses[hidden] { display: none; }
.recompense-fin { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; max-width: 100%;
  background: rgba(10,5,22,.8); border: 2px solid #0a0516; box-shadow: inset 0 0 0 1px rgba(255,216,74,.3);
  font-family: var(--corps); font-weight: 700; font-size: .78rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; animation: gain-arrive .3s ease-out forwards; }
.recompense-fin canvas { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.recompense-fin .ico { width: 22px; text-align: center; flex: none; }
.recompense-fin.grande { border-color: #5a3a00; box-shadow: inset 0 0 0 2px #ffd84a, 0 0 12px rgba(255,200,40,.45); }
@media (prefers-reduced-motion: reduce) { .gain, .recompense-fin { animation: none; opacity: 1; transform: none; } }
/* l'abandon cache la pause derrière lui */
body:has(#abandon:not([hidden])) #pause { visibility: hidden; }

/* ═════════ 6. LE DUEL : les cadres des joueurs, nets ; une vraie touche pause ═════════ */
.cartons-hud { position: fixed; top: calc(6px + env(safe-area-inset-top)); left: calc(6px + var(--marge-g, env(safe-area-inset-left, 0px))); right: calc(6px + var(--marge-d, env(safe-area-inset-right, 0px))); z-index: 14; display: flex; justify-content: space-between; pointer-events: none; }
.carton-hud { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px; border-radius: 9px; background: rgba(6,8,14,.72); border-left: 3px solid #ffff19; max-width: 40vw; }
.carton-hud.j2 { padding: 4px 4px 4px 9px; border-left: 0; border-right: 3px solid #19ffff; text-align: right; }
.carton-hud canvas { width: 28px; height: 28px; image-rendering: pixelated; border-radius: 6px; background: rgba(255,255,255,.08); flex: none; }
.carton-hud > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.carton-hud b { font-family: var(--gras); font-weight: 900; font-size: .78rem; letter-spacing: .04em; color: #fff; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carton-hud small { font-family: var(--gras); font-weight: 900; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: #c8d0da; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═════════ 7. LES BULLES D'INVITATION : une seule, compacte, sous la barre du haut ═════════ */
.bulle-invitation { min-width: 0; max-width: min(460px, 70vw); padding: 7px 7px 7px 12px; gap: 8px; }
.bulle-invitation b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulle-invitation small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulle-invitation > div { min-width: 0; }
.bulle-invitation .cr-bouton { padding: 6px 12px; font-size: .8rem; }
body:has(#menu-burger:not([hidden])) .invitations-bulles { display: none; }

/* ═════════ 8. LE PROFIL ═════════ */
.profil-p-rang { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(0,0,0,.5); }
.pseudo-fixe { font-family: var(--gras); font-weight: 900; font-size: .95rem; color: #fff; margin-right: 8px; }
.pseudo-fixe[hidden], #perso-pseudo[hidden], #btn-profil-pseudo[hidden], #btn-profil-casier[hidden], #btn-profil-classement[hidden] { display: none !important; }
.pastille:disabled { opacity: 1; color: #6b5a46; background: linear-gradient(180deg, #e2d8c2, #cbbfa4); border-color: #8a7a62; box-shadow: 0 3px 0 #8a7a62; }
.solde-pieces { margin: 0 !important; text-align: center; font-family: var(--gras); font-weight: 900; color: #fff !important; }
.solde-pieces b { color: #ffd24a !important; font-size: 1.2rem; }
.lien-confidentialite { font-family: var(--corps); font-size: .8rem; }

/* ═════════ 9. LE CASIER ═════════ */
          /* (la bordure dorée et « Portée » écrit dessous suffisent) */
.carte-tenue.verrou small { font-weight: 700; color: #6b4a1c !important; }
/* les titres : des cartes crème, comme les autres onglets */
.carte-titre { background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 3px solid var(--cr-brun2); box-shadow: 0 3px 0 var(--cr-brun2); }
.carte-titre .titre-txt.commun { color: #4a3a28; text-shadow: none; }
.carte-titre .titre-txt.rare { color: #1c62c0; text-shadow: none; }
.carte-titre .titre-txt.epique { color: #8a2ad8; text-shadow: 0 0 6px rgba(160,70,255,.45); }
.carte-titre small { color: #8a7a62; }
.carte-titre.porte { border-color: var(--cr-or3); box-shadow: 0 3px 0 var(--cr-or3), 0 0 0 3px var(--cr-or2); }
.carte-titre.verrouille { background: linear-gradient(180deg, #d9d0bb, #c4b89d); }
.carte-titre .titre-barre { background: rgba(0,0,0,.12); }
.titre-fiche { background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border-color: var(--cr-brun2); }
.titre-fiche .note, .titre-defi { color: #4a3a28 !important; }
.titre-defi b { color: #9c5f00; }
.titre-fiche .titre-txt.commun { color: #4a3a28; text-shadow: none; }
.titre-fiche .titre-txt.rare { color: #1c62c0; text-shadow: none; }
.titre-progres span { color: #2b1d12; }
.titre-progres > i { background: rgba(0,0,0,.14); }
.titre-rarete { background: rgba(0,0,0,.12); color: #4a3a28; }

/* ═════════ 10. LE RANG ═════════ */
.echelon.avenir { opacity: .62; filter: saturate(.5); }
.echelon small { font-size: .62rem; }

/* ═════════ 11. LE SALON ═════════ */
.bas .profil-stat { display: none; }                  /* (déjà dans le bouton Stats) */

/* ═════════ 12. LE CLASSEMENT SUR TÉLÉPHONE : plus de lignes visibles ═════════ */
@media (max-height: 600px) {
  .panneau.classement { gap: 6px; }
  .onglets-cl button { padding: 5px; font-size: .78rem; }
  .cl-liste { max-height: none; flex: 1; padding: 4px; gap: 3px; }
  .cl-ligne { padding: 3px 10px 3px 4px; grid-template-columns: 32px 28px minmax(0, 1fr) auto 70px; }
  .cl-tete { width: 28px; height: 28px; }
  .cl-place.or, .cl-place.argent, .cl-place.bronze { width: 26px; height: 30px; }
  .cl-nom b { font-size: .84rem; } .cl-nom small { font-size: .64rem; }
  .classement-note { display: none; }
  .panneau.classement .cl-cadre { max-height: calc(64vh / var(--ech, 1)); }
}

/* ═════════ 13. LA MESSAGERIE ═════════ */
.amis-vide { padding: 0 6px; text-align: center; }
.chat-tete #btn-chat-defier { margin-left: auto; padding: 6px 12px; font-size: .8rem; }
.ligne-ami.defi { background: linear-gradient(180deg, #ffd8c8, #ffb49a); border-color: #a01810; }

.voile > .panneau > .passe-pied { background-size: 192px 96px; padding: 6px 0; }
/* le passe : le panneau défile, le pied (Prendre le passe, Retour) reste en bas */
.voile > .panneau.passe { overflow-y: auto !important; }

.titre-ou { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-family: var(--gras); font-weight: 900; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; background: #2f9a1a; color: #fff; }
.titre-ou.passe, .titre-ou.exploit { background: #9c5f00; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 4 · ex-ui4.css ▓▓▓▓▓▓▓▓▓
   les modes en trois temps, la bêta, la pièce, le lexique,
   l'échelle des rangs, les signalements (16/10/2026). */

/* ═════════ LA PIÈCE : frappée aux deux lames croisées ═════════ */
.piece {
  display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fff8c0'/%3E%3Cstop offset='.45' stop-color='%23ffc62a'/%3E%3Cstop offset='1' stop-color='%23a06200'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='15.2' fill='%235a3600'/%3E%3Ccircle cx='16' cy='16' r='13.8' fill='url(%23g)'/%3E%3Ccircle cx='16' cy='16' r='10.8' fill='none' stroke='%238a5400' stroke-width='1.3' stroke-dasharray='1.7 1.2'/%3E%3Cpath d='M10.5 9.5 21.8 20.8M21.5 9.5 10.2 20.8' stroke='%236a3e00' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M8.8 19.2l3.6 3.6M23.2 19.2l-3.6 3.6' stroke='%236a3e00' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M11.2 9.2 20.6 18.6M20.8 9.2 11.4 18.6' stroke='%23fff3b0' stroke-width='.8' opacity='.9'/%3E%3Cpath d='M7 12a9.5 9.5 0 0 1 9-7' fill='none' stroke='%23fff' stroke-width='1.2' opacity='.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  border: 0 !important; border-radius: 50% !important; box-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}
.pieces .piece { width: 28px; height: 28px; }
.pieces.grand .piece { width: 24px; height: 24px; }
.cr-bouton .piece { width: 18px; height: 18px; }
.cr-bouton.pauvre .piece { filter: none; }

/* ═════════ LA BÊTA ═════════ */
.logo { position: relative; }
.logo .beta { position: absolute; right: -46px; top: -4px; padding: 2px 8px; border-radius: 999px; transform: rotate(8deg); font-style: normal; font-family: var(--gras); font-weight: 900; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #ff6a5a, #c42018); color: #fff; border: 2px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.version-beta { margin: 4px 0 0 !important; font-size: .78rem !important; color: #e8dcc0 !important; }
.version-beta b { color: #ff9a8a !important; }
#chargement b { font-family: var(--titre); font-size: 22px; letter-spacing: .25em; color: #ffd24a; }
#chargement span { font-family: var(--corps); font-size: 14px; letter-spacing: .04em; color: #c8d0da; font-style: italic; }
#chargement small { font-family: var(--gras); font-weight: 900; font-size: 11px; letter-spacing: .2em; color: #ff8a7a; text-transform: uppercase; }

/* ═════════ LES MODES : des cases de la même taille ; la difficulté en dessous ; « Jouer » ═════════ */
.modes-ligne { align-items: stretch; }
.modes-ligne .carte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.modes-ligne .carte.classe:not(.choisie) { background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)) !important; border-color: var(--cr-brun2) !important; box-shadow: 0 4px 0 var(--cr-brun2) !important; }
.modes-options { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.modes-options > span { font-family: var(--gras); font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd24a; }
.modes-options .difficulte { display: flex; gap: 6px; }
.modes-options .difficulte button { min-height: 38px; min-width: 88px; font-size: .82rem; }
.modes-pied { width: min(420px, 100%); gap: 10px; margin: 0 auto; }
.modes-pied > button { flex: 1; }

/* ═════════ LE LEXIQUE ═════════ */
.lexique { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.mot-lexique { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); text-shadow: none; }
.mot-lexique b { font-family: var(--gras); font-weight: 900; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #8a1a10; }
.mot-lexique span { font-family: var(--corps); font-size: .78rem; line-height: 1.35; color: #4a3a28; }

/* ═════════ LE RANG : un blason par rang, et ses trois divisions ═════════ */
.blason-grand { width: 96px; flex: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.blason-grand svg, .echelon-blason svg { display: block; width: 100%; height: auto; }
.rang-echelle { gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.groupe-rang { --c: #888; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 2px solid rgba(0,0,0,.35); scroll-snap-align: center; }
.groupe-rang > b { font-family: var(--gras); font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c); text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.groupe-rang.ici { background: rgba(255,210,74,.14); border-color: #ffd24a; }
.divisions { display: flex; gap: 4px; }
.echelon-blason { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.echelon-blason small { font-family: Georgia, serif; font-weight: 900; font-size: .7rem; color: #e6ecf4; }
.echelon-blason.avenir svg { filter: grayscale(.85) brightness(.7); opacity: .65; }
.echelon-blason.actuel { transform: scale(1.12); }
.echelon-blason.actuel svg { filter: drop-shadow(0 0 6px #ffd24a); }
.echelon-blason.actuel small { color: #ffd24a; }
.cl-rang svg { width: 16px; height: auto; flex: none; }
@media (max-height: 600px) { .blason-grand { width: 70px; } .echelon-blason { width: 34px; } }

/* ═════════ LA FIN : une phrase des ruines ═════════ */
.fin-phrase { margin: 0 !important; text-align: center; font-family: Georgia, 'Times New Roman', serif !important; font-style: italic; font-size: .92rem !important; color: #ffe9a0 !important; }
.fin-phrase:empty { display: none; }

/* ═════════ SIGNALER, ET LES SIGNALEMENTS ═════════ */
.panneau.signaler { width: min(460px, 92vw); }
.signaler-raisons { justify-content: center; }
.panneau.signaler textarea { flex: none; min-height: 64px; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--cr-brun2); background: #fffaf0; color: var(--cr-encre); font-family: var(--corps); font-weight: 700; font-size: .9rem; resize: vertical; user-select: text; -webkit-user-select: text; }
.danger-texte { color: #c42018 !important; }
button.discret.danger-texte { background: none; border: 0; box-shadow: none; text-decoration: underline; font-family: var(--corps); font-weight: 700; font-size: .78rem; padding: 4px 6px; min-height: 0; }
.panneau.moderation { width: min(680px, 94vw); }
.moderation-liste { display: flex; flex-direction: column; gap: 8px; max-height: calc(58vh / var(--ech, 1)); overflow-y: auto; }
.signalement { flex: none; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); text-shadow: none; }
.signalement.ouvert { border-color: #c42018; }
.signalement header { display: flex; align-items: baseline; gap: 10px; }
.signalement header b { font-family: var(--gras); font-weight: 900; font-size: 1rem; }
.signalement header small { font-family: var(--corps); font-size: .74rem; color: var(--cr-encre2); }
.signalement p { margin: 4px 0 !important; color: #4a3a28 !important; font-style: italic; }
.signalement ul { margin: 4px 0 8px; padding-left: 18px; font-family: var(--corps); font-size: .8rem; color: #4a3a28; }
.signalement .rangee { justify-content: flex-start; gap: 6px; }
.pastille.rouge { background: linear-gradient(180deg, #ff8a7a, #c42018); border-color: #6a0a04; box-shadow: 0 3px 0 #6a0a04; color: #fff; }
.ami-deplie .discret.danger-texte { margin-left: auto; }

/* ═════════ LE PROFIL, refait : une carte de duelliste à gauche, le reste à droite ═════════ */
.panneau.profil-panneau { width: min(860px, 96vw); gap: 10px; }
.profil-corps { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 14px; align-items: start; }
.carte-joueur { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #1f4d9a, #12305f 60%, #0b1f42); border: 3px solid #061226; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 5px 0 rgba(0,0,0,.4); }
.carte-joueur .cadre-avatar { position: relative; width: 132px; height: 132px; border-radius: 18px; border: 4px solid rgba(255,255,255,.2); background: radial-gradient(ellipse at 50% 70%, #3a5a8a, #10203c); display: flex; align-items: center; justify-content: center; overflow: visible !important; }
.carte-joueur .cadre-avatar canvas { width: 124px; height: 124px; image-rendering: pixelated; }
.niveau-badge { position: absolute; left: -10px; bottom: -10px; min-width: 38px; height: 38px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff2a0, #ffc020 55%, #b07800); border: 3px solid #5a3a00; font-family: var(--gras); font-weight: 900; font-size: 1rem; color: #3a2300; box-shadow: 0 3px 0 rgba(0,0,0,.4);
  z-index: 2;
}
.carte-pseudo { margin-top: 6px; font-family: var(--gras); font-weight: 900; font-size: 1.25rem; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-titre-porte { font-size: .82rem; min-height: 1.1em; }
.carte-xp { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.carte-xp .profil-xp { height: 10px; width: 100% !important; max-width: none !important; }
.carte-xp small { font-family: var(--gras); font-weight: 900; font-size: .64rem; letter-spacing: .06em; color: #cfe0ff; text-transform: uppercase; }
.carte-pieces { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(0,0,0,.35); font-family: var(--gras); font-weight: 900; color: #ffd24a; }
.carte-pieces .piece { width: 22px; height: 22px; }
.carte-joueur .profil-compte { width: 100%; padding: 0; background: none; border: 0; }
.carte-joueur .profil-compte .note { margin: 4px 0 6px; font-size: .78rem; }
.compte-ok { font-family: var(--corps); font-weight: 700; font-size: .74rem; color: #9ff06a; }
.compte-ok b { color: #fff; }
.profil-droite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.carte-rang { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #1c2638, #10161f); border: 3px solid #0a0e14; box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 4px 0 rgba(0,0,0,.4); }
@media (hover: hover) { .carte-rang:hover { filter: brightness(1.1); } }
.profil-blason { width: 58px; flex: none; }
.profil-blason svg { display: block; width: 100%; height: auto; }
.carte-rang-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.carte-rang-texte .profil-p-rang { padding: 0; background: none; font-size: 1.15rem; }
.carte-rang-texte .profil-p-rang::after { content: none; }
.carte-rang-texte small { font-family: var(--corps); font-size: .74rem; color: #c8d0da; }
.carte-rang-fleche { font-size: 1.4rem; color: #ffd24a; }
.profil-chiffres { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
.profil-chiffres .stat-carte { padding: 6px 4px; }
.profil-identite { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22); border: 2px solid rgba(0,0,0,.35); }
.profil-identite .perso-ligne { display: flex; align-items: center; gap: 10px; }
.cadres-mini { gap: 4px !important; }
.cadres-mini .pastille { min-height: 32px; padding: 4px 9px; font-size: .7rem; }
.profil-boutons { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.profil-boutons .pastille { min-height: 38px; }
@media (max-height: 600px), (max-width: 760px) {
  .profil-corps { grid-template-columns: 200px minmax(0, 1fr); gap: 10px; }
  .carte-joueur { padding: 10px 8px; gap: 4px; }
  .carte-joueur .cadre-avatar { width: 96px; height: 96px; } .carte-joueur .cadre-avatar canvas { width: 88px; height: 88px; }
  .carte-pseudo { font-size: 1rem; }
  .profil-blason { width: 44px; }
}
/* les panneaux s'ouvrent en douceur (au lieu d'apparaître d'un bloc) */
.voile:not([hidden]) > .panneau { animation: panneau-entre .2s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes panneau-entre { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ═════════ UN PRIX TROP CHER : le bouton reste vert, la pièce dorée ; c'est le chiffre qui le dit ═════════ */
.cr-bouton.pauvre { filter: none !important; background: linear-gradient(180deg, #7fcf58, #3f9a22 55%, #2a7414); color: #ffe0d8; text-shadow: 0 2px 0 rgba(100,0,0,.55); }
.cr-bouton.pauvre::after { content: '🔒'; margin-left: 2px; font-size: .78em; filter: grayscale(1) brightness(1.6); }
.titre-bouton .titre-txt.commun, .titre-bouton .titre-txt.aucun { color: #4a3a28 !important; text-shadow: none !important; }
.titre-bouton .titre-txt.rare { color: #1c62c0 !important; text-shadow: none !important; }
.titre-bouton .titre-txt.epique { color: #8a2ad8 !important; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 5 · ex-ui5.css ▓▓▓▓▓▓▓▓▓
   les émotes en duel, revoir un duel, la connexion perdue, les
   coffres gagnés, la fin de saison, les quêtes de clan (16/10/2026). */

/* ═════════ LES ÉMOTES EN DUEL ═════════ */
#btn-emote { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom)); left: calc(50% - 58px); transform: translateX(-50%); z-index: 15;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .85;
  background: rgba(11,13,17,.7); border: 2px solid rgba(255,255,255,.4); color: #fff; }
#btn-emote svg { width: 22px; height: 22px; }
.roue-emotes { position: fixed; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 16; display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: rgba(6,8,14,.85); border: 2px solid rgba(255,255,255,.25); translate: -50% 0; }
.emote-choix { position: relative; min-width: 76px; padding: 6px 10px; border-radius: 10px; font-family: var(--gras); font-weight: 900; font-size: .78rem; letter-spacing: .04em; color: #2b1d12; background: #fffaf0; border: 2px solid #2b1d12; }
.emote-choix.rare { background: #bfe0ff; border-color: #1c4a8a; color: #0a2a5a; }
.emote-choix.epique { background: #e0b0ff; border-color: #4a1a7a; color: #2a0a4a; }
.emote-choix.or { background: linear-gradient(180deg, #fff2a0, #ffc020); border-color: #7a4a00; color: #3a2300; box-shadow: 0 0 10px rgba(255,210,74,.7); }
.emote-choix small { position: absolute; top: -7px; left: -7px; width: 18px; height: 18px; border-radius: 50%; background: #2b1d12; color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; }
.roue-vide { font-family: var(--corps); font-size: .8rem; color: #c8d0da; padding: 6px 10px; }
/* le casier : les quatre émotes portées */
.emotes-portees { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.25); flex-wrap: wrap; }
.emotes-portees > span { font-family: var(--gras); font-weight: 900; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd24a; }
.emotes-portees > small { flex-basis: 100%; font-family: var(--corps); font-size: .72rem; color: #e8dcc0; }
.emotes-slots { display: flex; gap: 8px; }
.emote-slot { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 12px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 3px solid var(--cr-brun2); }
.emote-slot.vide { background: rgba(0,0,0,.25); border-style: dashed; border-color: rgba(255,255,255,.3); }
.emote-slot canvas { width: 100%; height: 100%; }
.emote-slot small { position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; border-radius: 50%; background: #2b1d12; color: #fff; font-family: var(--gras); font-weight: 900; font-size: .66rem; display: flex; align-items: center; justify-content: center; }
#perso-emotes-zone .grille-tenues { flex: 1; min-height: 0; overflow-y: auto; }

/* ═════════ REVOIR UN DUEL ═════════ */
.revoir-barre { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; background: rgba(6,8,14,.85); border: 2px solid rgba(255,255,255,.25); width: min(560px, 92vw); zoom: var(--ech, 1); }
.revoir-titre { font-family: var(--gras); font-weight: 900; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd24a; white-space: nowrap; }
.revoir-barre .pastille { padding: 4px 12px; }
.revoir-piste { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.revoir-piste i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd24a, #ff8a00); }

/* ═════════ LA CONNEXION PERDUE ═════════ */
.coupure { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px; border-radius: 14px; background: rgba(6,8,14,.9); border: 3px solid #c42018; zoom: var(--ech, 1); }
.coupure b { font-family: var(--gras); font-weight: 900; font-size: 1.05rem; color: #ff9a8a; }
.coupure span { font-family: var(--corps); font-size: .86rem; color: #e6ecf4; }

/* ═════════ LES COFFRES GAGNÉS ═════════ */
.coffres-salon { position: relative; }
.coffres-salon .badge-rouge { position: absolute; top: -6px; right: -6px; }
.panneau.coffres-panneau { width: min(760px, 94vw); }
.coffres-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: calc(56vh / var(--ech, 1)); overflow-y: auto; padding: 4px; }
.coffres-liste .note { grid-column: 1 / -1; color: #efe2c4; text-align: center; }
.coffres-liste .cr-carte { cursor: pointer; border: 3px solid var(--r3); }
@media (hover: hover) { .coffres-liste .cr-carte:hover { filter: brightness(1.08); } }
.coffre-origine { font-family: var(--corps); font-weight: 700; font-size: .7rem; color: rgba(255,255,255,.88); text-shadow: 0 1px 0 rgba(0,0,0,.4); }

/* ═════════ LA FIN DE SAISON ═════════ */
.rang-saison { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); }
.rang-saison header { display: flex; align-items: baseline; gap: 10px; }
.rang-saison header b { font-family: var(--gras); font-weight: 900; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd24a; }
.rang-saison header small { margin-left: auto; font-family: var(--corps); font-size: .72rem; color: #e8dcc0; }
.rang-saison-liste { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.gain-saison { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 10px; background: rgba(0,0,0,.2); opacity: .6; }
.gain-saison svg { width: 30px; height: auto; }
.gain-saison small { font-family: var(--gras); font-weight: 900; font-size: .52rem; letter-spacing: .02em; text-align: center; color: #e6ecf4; }
.gain-saison.depasse { opacity: .8; }
.gain-saison.vise { opacity: 1; background: rgba(255,210,74,.18); outline: 2px solid #ffd24a; }
.panneau.fin-saison { width: min(400px, 92vw); align-items: center; }
.fin-saison-gains { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fin-saison-gains span { padding: 6px 10px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); font-family: var(--gras); font-weight: 900; font-size: .84rem; color: var(--cr-encre); text-align: center; }

/* ═════════ LES QUÊTES DE CLAN ET LA GUERRE ═════════ */
.clan-quetes { display: flex; flex-direction: column; gap: 8px; }
.bloc-quetes { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid rgba(0,0,0,.35); }
.bloc-quetes header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.bloc-quetes header b { font-family: var(--gras); font-weight: 900; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #ffd24a; }
.bloc-quetes header small { font-family: var(--corps); font-size: .72rem; color: #e8dcc0; }
.quete { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: linear-gradient(180deg, #fbf1d6, var(--cr-creme2)); border: 2px solid var(--cr-brun2); color: var(--cr-encre); text-shadow: none; }
.quete canvas { width: 40px; height: 40px; flex: none; image-rendering: pixelated; }
.quete-milieu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quete-milieu b { font-family: var(--gras); font-weight: 900; font-size: .8rem; }
.quete-barre { height: 7px; border-radius: 999px; background: rgba(0,0,0,.14); overflow: hidden; }
.quete-barre i { display: block; height: 100%; background: linear-gradient(90deg, #4cbf2a, #9ff06a); }
.quete.faite .quete-barre i { background: linear-gradient(90deg, #ffd24a, #fff0a0); }
.quete-ok { font-family: var(--gras); font-weight: 900; font-size: .74rem; color: #22741a; }
.quete .cr-bouton { padding: 6px 12px; font-size: .8rem; }
.guerre-resultat { display: flex; align-items: center; gap: 10px; font-family: var(--gras); font-weight: 900; font-size: .8rem; color: #fff; }
.guerre-ligne { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 9px; background: linear-gradient(180deg, #3b7fd6, #2a62b4); border: 2px solid #12366e; color: #fff; font-family: var(--gras); font-weight: 900; font-size: .82rem; }
.guerre-ligne.moi { background: linear-gradient(180deg, #5cc83a, #2f9a1a); border-color: #145a0c; }
.guerre-ligne .cl-place { width: 28px; height: 30px; font-size: .82rem; }

/* ═════════ LES SIGNALEMENTS : les récidivistes ═════════ */
.recidive { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-family: var(--gras); font-weight: 900; font-size: .64rem; letter-spacing: .04em; background: #e8dcc0; color: #4a3a28; }
.recidive.alerte { background: #c42018; color: #fff; }
/* les réglages propres à l'application */
.natif-seulement { display: none !important; }
body.natif .natif-seulement { display: flex !important; }
.quete-milieu b, .quete-milieu small { color: #2b1d12 !important; text-shadow: none !important; } .quete-milieu small { font-family: var(--corps); font-size: .7rem; color: #6b5a46 !important; }

/* ═════════ L'OUVERTURE D'UN COFFRE, AVEC DU SUSPENSE ═════════ */
.coffre-voile { overflow: hidden; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--lueur) 22%, #0a0c18), #03040a 70%) !important; transition: background .35s; }
.coffre-rayons { position: absolute; left: 50%; top: 46%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none; opacity: .18;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--lueur) 70%, transparent) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%);
  animation: rayons-tournent 14s linear infinite; transition: opacity .4s; }
.coffre-voile.suspense .coffre-rayons { opacity: .25; animation-duration: 9s; }
.coffre-voile.revele .coffre-rayons { opacity: .75; animation-duration: 6s; }
.coffre-voile.revele.legendaire .coffre-rayons { opacity: 1; animation-duration: 3.5s; }
@keyframes rayons-tournent { to { transform: rotate(360deg); } }
.coffre-etincelles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.coffre-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.coffre-flash.part { animation: flash-coffre .6s ease-out; }
@keyframes flash-coffre { 0% { opacity: .95; } 100% { opacity: 0; } }
.coffre-voile.suspense #coffre-cv { filter: drop-shadow(0 0 18px var(--lueur)); animation: coffre-respire .9s ease-in-out infinite; }
@keyframes coffre-respire { 50% { transform: scale(1.04); } }
.coffre-voile.revele.legendaire .coffre-scene { animation: secousse-leg .5s ease-out; }
@keyframes secousse-leg { 10%, 50% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } 100% { transform: none; } }
.coffre-voile.revele #coffre-objet { filter: drop-shadow(0 0 28px var(--lueur)) drop-shadow(0 0 8px #fff); animation: objet-monte .7s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes objet-monte { from { transform: translateY(60px) scale(.3); opacity: 0; } }
.coffre-voile.revele .coffre-gain small { animation: bandeau-claque .5s .25s both cubic-bezier(.2, 1.8, .4, 1); font-size: 1.05rem; padding: 5px 20px; }
@keyframes bandeau-claque { from { transform: scale(2.4); opacity: 0; } }
.coffre-voile.revele.legendaire .coffre-gain small { background: linear-gradient(180deg, #fff2a0, #ffb820); color: #3a2300 !important; box-shadow: 0 0 24px #ffd24a; }
.coffre-voile.revele.epique .coffre-gain small { background: linear-gradient(180deg, #e0b0ff, #8a3ad8); color: #fff !important; box-shadow: 0 0 18px #c47cff; }
.coffre-passer { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-family: var(--corps); font-size: .78rem; color: rgba(255,255,255,.6); }
.fin-adversaire { gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.fin-adversaire > span { font-family: var(--gras); font-weight: 900; font-size: .8rem; color: #e8dcc0; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 6 · ex-ui6.css ▓▓▓▓▓▓▓▓▓
   deuxième audit d'ergonomie (16/10/2026). */

/* 1. LE ZOOM NE RÉTRÉCIT PLUS LES CIBLES : sur un petit écran le menu est zoomé (--ech < 1) ;
   les commandes gardent quand même 32 px réels sous le doigt (40 avant le 17/10/2026 :
   sur téléphone ça gonflait les boutons bien au-delà de ce qu'il voit sur son PC) */
.pastille, .onglets button, .onglets-cl button, .onglet-ami, .menu-burger button, .cr-bouton, .onglet-salon,
.rangee-ajout .gros, .clan-actions .gros, .emote-choix, .revoir-barre .pastille {
  min-height: calc(32px / var(--ech, 1));
}

/* 2. UNE SEULE FAÇON DE FERMER : la croix ✕ en haut à droite. Le « Retour » du bas (en double) disparaît ;
   il reste là où il dit autre chose (annuler une recherche) */
.retour-double { display: none !important; }
#btn-ligne-retour.retour-double { display: block !important; }
.voile > .panneau > .rangee:last-child:has(> .retour-double:only-child) { display: none; }

/* 3. LE DUEL : des commandes plus discrètes, qui laissent voir le sol et les épées */
@media (max-height: 420px) { #tactile { padding-bottom: calc(4px + env(safe-area-inset-bottom)); } }
/* la roue des émotes : au-dessus de son bouton, pas sur les duellistes */
.roue-emotes { left: auto; right: auto; transform: none; left: calc(50% - 58px); bottom: calc(60px + env(safe-area-inset-bottom)); flex-direction: column-reverse; }
/* l'écran partagé : pas de cadres de joueurs par-dessus les commandes */
body.partage .cartons-hud { display: none !important; }

/* 6. LA FIN : un panneau large sur téléphone, les boutons côte à côte */
.panneau.fin-panneau { width: min(620px, 94vw); }
@media (max-height: 600px) {
  .panneau.fin-panneau { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: center; }
  .panneau.fin-panneau > h2, .panneau.fin-panneau > #fin-texte, .panneau.fin-panneau > .fin-phrase, .panneau.fin-panneau > .fin-xp, .panneau.fin-panneau > .fin-adversaire,
  .panneau.fin-panneau > .fin-gains, .panneau.fin-panneau > .fin-recompenses, .panneau.fin-panneau > .fin-ligne { grid-column: 1 / -1; }
  .panneau.fin-panneau > #fin-score { grid-column: 1 / -1; }
  .panneau.fin-panneau > button { margin: 0; }
  /* (18/10/2026) « min-height: 0 » laissait la grille écraser la ligne « Sans compte… »
     à 8 px : elle passait sur les cases TUÉS / MORTS / DURÉE */
  .panneau.fin-panneau > .fin-xp { min-height: auto; margin: 2px 0 0; font-size: .78rem; line-height: 1.3; }
}
/* 24. la victoire en or, la défaite en gris-bleu */
#fin.defaite .panneau h2 { background: linear-gradient(180deg, #5a6a86, #2c3850) !important; color: #e6ecf4 !important; }
#fin.defaite #fin-titre.perdu { color: #e6ecf4 !important; }
#fin:not(.defaite) .panneau h2 { background: linear-gradient(180deg, #ffd24a, #b07800) !important; color: #3a2300 !important; text-shadow: 0 1px 0 rgba(255,255,255,.4) !important; }

/* 8. MOUVEMENT RÉDUIT : rien ne reste invisible */
@media (prefers-reduced-motion: reduce) {
  .vs-logo { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; }
  .coffre-gain, #coffre-objet, .coffre-gain small { opacity: 1 !important; transform: none !important; }
}

/* 9. LA BULLE D'UN DÉFI : à droite, sous la barre du haut (plus sur le logo) */
.invitations-bulles { transform: none !important; align-items: flex-end; }

/* 12. LE CLAN : « Quitter » devient un lien discret */
#btn-clan-quitte { flex: none !important; background: none !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 4px 6px !important;
  color: #ffb4a8 !important; text-decoration: underline; font-family: var(--corps); font-weight: 700; font-size: .76rem; text-transform: none; letter-spacing: 0; }
.clan-actions { align-items: center; }
.ligne-ami.moi { border-color: var(--cr-or3); box-shadow: 0 0 0 2px var(--cr-or2); }
.petit-defi { min-height: 0 !important; width: 36px; height: 30px; padding: 0; font-size: .9rem; }

/* 15. LA BOUTIQUE : ce qu'il manque, sous un prix trop cher */
.cr-carte .manque { margin-top: -2px; font-family: var(--gras); font-weight: 900; font-size: .64rem; color: #fff; background: rgba(160,20,10,.75); padding: 1px 8px; border-radius: 999px; text-shadow: none; }

/* 27. LE COFFRE OUVERT : des boutons nets, côte à côte */
.coffre-actions { gap: 10px; justify-content: center; }
.coffre-gain .cr-bouton { opacity: 1; position: relative; }

/* 21. TACTILE : rien sur le clavier */
body.tactile-present .clavier-seulement { display: none !important; }

/* 22. CHOISIR UN MODE sur un petit écran : 3 + 2 */
@media (max-width: 820px) { .modes-ligne { flex-wrap: wrap; justify-content: center; } .modes-ligne .carte { flex: 0 1 calc(33% - 8px); } }

/* 46. LE SALON : le passe n'est plus doré tout le temps */
.profil-titre:empty, .carte-titre-porte:empty { display: none; }

/* 30. LE PROFIL : la casse des ordinaux */
#profil-p-monde, #classement-salon-place { text-transform: none !important; }

/* 31. LE COMPTE : supprimer, en rouge discret */
#btn-suppression.danger-texte { color: #ffb4a8 !important; }
/* la pause : quitter en rouge */
#btn-quitter.danger-texte { color: #ffd0c8 !important; background: linear-gradient(180deg, #a8242a, #5e0f12) !important; border-color: #3a0808 !important; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 7 · ex-ui7.css ▓▓▓▓▓▓▓▓▓
   le salon sur téléphone (17/10/2026). */

/* 1. LA BARRE NOIRE DES IPHONE : l'encoche (ou la pastille) mord sur un côté de l'écran en
   paysage, la barre d'accueil sur le bas. env(safe-area-inset-*) donne leur taille (0 ailleurs) :
   le salon et les panneaux s'en écartent toujours. */
.voile:not(.salon) {
  padding-top: max(calc(22px * var(--ech, 1)), env(safe-area-inset-top));
  padding-left: max(calc(22px * var(--ech, 1)), var(--marge-g, env(safe-area-inset-left, 0px)));
  padding-right: max(calc(22px * var(--ech, 1)), var(--marge-d, env(safe-area-inset-right, 0px)));
  padding-bottom: max(calc(22px * var(--ech, 1)), env(safe-area-inset-bottom));
}

/* 2. LE TITRE : plus grand, et le badge Bêta posé après « BLADES » au lieu de mordre dessus */
#menu .logo { font-size: 2.1rem; }
#menu .logo .beta { left: calc(100% + 4px); right: auto; top: -10px; }

/* 3. LES ONGLETS DE GAUCHE : tous de la même taille, le même écart entre chacun */
#menu .onglet-salon { height: 100%; min-height: 0; margin: 0; box-sizing: border-box; grid-template-rows: auto auto; align-content: center; }
#menu .onglet-salon small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 4. EN BAS À DROITE : plus grand, un JOUER qui donne envie, un classement en une icône */
#menu .droite { width: 250px; gap: 12px; }
#menu .jouer {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 74px; padding: 10px 18px; border-radius: 18px; border: 3px solid #5a3a00;
  font-size: 1.75rem; letter-spacing: .06em;
  animation: jouer-battement 2.4s ease-in-out infinite;
}
#menu .jouer > span { position: relative; z-index: 1; }
#menu .jouer .jouer-epees { position: relative; z-index: 1; width: 26px; height: 26px; flex: none; }
/* un reflet qui balaie le bouton de temps en temps */
#menu .jouer::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-20deg); animation: jouer-reflet 3.2s ease-in-out infinite;
}
@media (hover: hover) { #menu .jouer:hover { filter: brightness(1.08); } }
#menu .jouer:active { transform: translateY(5px); box-shadow: 0 1px 0 #6b4300, 0 4px 12px rgba(255,170,40,.4); animation: none; }
@keyframes jouer-battement {
  0%, 100% { box-shadow: 0 6px 0 #6b4300, 0 0 0 2px rgba(255,233,140,.55), 0 10px 26px rgba(255,170,40,.45), inset 0 2px 0 rgba(255,255,255,.75); }
  50%      { box-shadow: 0 6px 0 #6b4300, 0 0 0 4px rgba(255,233,140,.8),  0 10px 38px rgba(255,170,40,.85), inset 0 2px 0 rgba(255,255,255,.75); }
}
/* (22/10/2026) le reflet glisse par transform (avant : « left », qui refaisait la mise en page du salon 60 fois par seconde) ;
   190 % du bouton = 475 % du reflet, large de 40 % */
@keyframes jouer-reflet { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }

#menu .classement-salon {
  width: 74px !important; min-height: 74px; gap: 2px; padding: 6px 4px; border-radius: 18px;
  background: linear-gradient(180deg, #4a2c7a, #2c1850 60%, #1c0e36); border: 3px solid #0e0620;
  box-shadow: 0 6px 0 #0e0620, 0 8px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.25);
}
@media (hover: hover) { #menu .classement-salon:hover { filter: brightness(1.15); background: linear-gradient(180deg, #4a2c7a, #2c1850 60%, #1c0e36); } }
#menu .classement-salon span { display: none; }   /* l'icône suffit ; le nom reste lu par aria-label */
#menu .classement-salon small { font-size: .78rem !important; font-family: var(--gras); font-weight: 900; color: #ffe9a0; }
#menu .classement-salon small:empty { display: none; }

@media (prefers-reduced-motion: reduce) { #menu .jouer, #menu .jouer::after { animation: none; } }

/* 5. LE HÉROS, LES PIEDS DANS LE SOL DU FOND : il ne suit plus le menu mais le fond
   (--fond-s, réglé par regleEchelle dans js/principal.js). Ses pieds sont à 93 % de sa toile ;
   on les pose 20 pixels du fond sous la ligne du sol (ligne 250 sur 320), comme sur le PC. */
#menu .scene-heros {
  --heros-h: calc(112px * var(--fond-s, 3));
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: calc((320 - 250 - 20) * 1px * var(--fond-s, 3) - 0.07 * var(--heros-h));
  width: calc(1.5 * var(--heros-h)); height: var(--heros-h);
  margin: 0; align-self: auto; pointer-events: none;
}
#menu #heros { width: 100%; height: 100%; margin: 0; }
#menu .heros-etiquettes {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
  /* le nom de la tenue et le rang reviennent SOUS le personnage, à ses pieds */
  top: calc(93% + 6px); bottom: auto;
}
#menu .heros-etiquettes > * { zoom: var(--ech, 1); }
#menu .heros-etiquettes .heros-rang { pointer-events: auto; }

/* 6. PLUS DE BOUTONS MARRON (17/10/2026) : tout bouton prend le style du classement — une gemme
   violette, des icônes et des titres dorés, un reflet en haut. L'or reste pour ce qui compte
   (JOUER, le passe, les boutons principaux, les prix), le rouge pour ce qui détruit. */
button, .rond-menu, button.profil, .onglet-salon, .classement-salon, button.discret {
  border-color: var(--gemme-bord);
}
.onglet-salon span { color: #fff; } .onglet-salon small { color: #d8c8ff; }
.profil-nom { color: #fff; } .profil-titre { color: #ffd84a; }
.profil-xp { background: #120826; border-color: var(--gemme-clair); }
.profil .avatar canvas { border-color: var(--gemme-clair); }

/* l'or garde la main sur les boutons qui comptent */
button.gros, button.gros.dore, .pieces {
  color: #3a2300; border-color: #5a3a00;
  background: linear-gradient(180deg, #fff6c0 0%, #ffd84a 30%, #f0a420 70%, #c47a10 100%);
  box-shadow: 0 6px 0 #6b4300, 0 10px 22px rgba(255,170,40,.3), inset 0 2px 0 rgba(255,255,255,.75);
}
@media (hover: hover) { button.gros:hover, button.gros.dore:hover, .pieces:hover {
  color: #3a2300; border-color: #5a3a00; background: linear-gradient(180deg, #fffad8 0%, #ffe070 30%, #f5b030 70%, #d08818 100%);
} }
/* les pastilles et onglets des fenêtres : bord violet au lieu du cuir */
.pastille { border-color: var(--gemme-bord); }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 8 · ex-ui8.css ▓▓▓▓▓▓▓▓▓
   la disposition du salon façon jeu d'arène mobile (17/10/2026).
   Il voulait les PLACEMENTS de Brawl Stars, pas leurs couleurs : on garde notre DA (gemmes
   violettes, or, bois) et on la soigne. La structure est dans index.html (commentaire « LA
   DISPOSITION DU SALON ») :
     haut     : profil · titre · pièces, nouveautés, menu
     gauche   : tuiles carrées (boutique, casier, coffres)
     droite   : le social (messagerie, classement)
     centre   : le héros, son nom au-dessus de la tête
     bas      : missions + jauge du passe à gauche · mode + JOUER à droite */

/* ── la colonne de gauche : des tuiles carrées, grosse icône, un seul mot ── */
#menu .milieu { align-items: center; justify-content: space-between; pointer-events: none; }
#menu .milieu > * { pointer-events: auto; }
#menu .onglets-salon { flex-direction: column; grid-auto-rows: initial; display: flex; gap: 12px; width: auto; }
#menu .onglets-salon .onglet-salon, #menu .bas-gauche #btn-missions {
  position: relative; width: 86px; height: 80px; min-height: 0; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px;
}
#menu .onglets-salon .onglet-salon svg, #menu .bas-gauche #btn-missions svg { width: 34px; height: 34px; grid-row: auto; }
#menu .onglets-salon .onglet-salon small, #menu .bas-gauche #btn-missions small { display: none; }
@media (hover: hover) { #menu .onglet-salon:hover { transform: translateY(-2px); } }
#menu .coffres-salon .badge-rouge, #menu .onglet-salon .badge-rouge { position: absolute; top: -8px; right: -8px; }

/* ── la colonne de droite : le social ── */
#menu .cote-social { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
#menu .cote-social .rond-menu, #menu .cote-social .classement-salon {
  width: 62px !important; height: 62px !important; min-height: 0; border-radius: 16px !important; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#menu .cote-social .rond-menu svg { width: 30px; height: 30px; fill: currentColor; }
#menu .cote-social .classement-salon svg { width: 34px; height: 34px; }
#menu .cote-social .classement-salon small { font-size: .62rem !important; line-height: 1; }
#menu .cote-social #amis-badge { position: absolute; top: -8px; right: -8px; }
#menu .cote-social .rond-menu { position: relative; }

/* ── le bas : missions et passe à gauche, mode et JOUER à droite ── */
#menu .bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; }
#menu .bas-gauche, #menu .bas-droite { display: flex; align-items: flex-end; gap: 12px; }
#menu .bas-centre { display: flex; flex-direction: column; align-items: center; gap: 2px; align-self: flex-end; text-align: center; }
#menu .bas-centre .profil-stat { display: none; }
#menu .bas-centre .saison { font-size: .66rem; }
#menu .bas-centre .droits { font-size: .56rem; }

/* le passe : une carte large avec sa jauge, comme une route de récompenses */
#menu .bas-gauche #btn-passe {
  width: 210px; height: 80px; min-height: 0; border-radius: 16px;
  display: grid; grid-template-rows: auto auto auto; column-gap: 10px; align-content: center; text-align: left;
  grid-template-columns: 44px 1fr; row-gap: 4px; padding: 8px 14px;
}
#menu .bas-gauche #btn-passe svg { grid-row: 1 / 4; align-self: center; width: 42px; height: 42px; }
#menu .bas-gauche #btn-passe span { font-size: 1.7rem !important; line-height: .9; letter-spacing: .06em; }
#menu .bas-gauche #btn-passe small { display: block; font-family: var(--gras); text-transform: uppercase; letter-spacing: .04em; line-height: 1; font-size: max(.78rem, var(--lisible)) !important; }
#menu .passe-jauge { display: block; border-radius: 999px; overflow: hidden; height: 12px; }
#menu .passe-jauge b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(180deg, #ffffff, #8af0ff 40%, #19c8e8); box-shadow: 0 0 8px rgba(25,255,255,.6); transition: width .4s; }

/* le mode : un encart horizontal, l'image à gauche, le nom à droite */
#menu .bas-droite .mode-carte {
  height: 86px; border-radius: 16px;
  display: grid; align-content: center; text-align: left;
  grid-template-columns: 96px 1fr; row-gap: 6px; column-gap: 10px;
  grid-template-rows: 1fr;
}
#menu .bas-droite .mode-carte canvas { align-self: center; width: 96px; height: 70px; object-fit: cover; grid-row: 1; }
#menu .bas-droite .mode-desc { font-size: .62rem; line-height: 1.1; display: none; }
#menu .bas-droite .mode-changer { margin-top: 3px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  justify-self: start; margin: 0;
  font-size: 1rem !important; letter-spacing: .06em !important; color: #fff;
  background: linear-gradient(180deg, var(--da-o1), var(--da-o3));
  display: none;
}

/* JOUER, le plus gros bouton de l'écran, collé au mode */
#menu .bas-droite .jouer { width: 200px; min-height: 86px; height: 86px; border-radius: 16px; font-size: 2.3rem; flex: none; }

/* ── la DA soignée : les tuiles violettes gagnent un liseré d'or et un reflet plus net ── */
#menu .onglet-salon:not(.passe), #menu .cote-social .rond-menu, #menu .cote-social .classement-salon {
  border: 3px solid var(--gemme-bord, #0e0620);
  box-shadow: 0 5px 0 var(--gemme-bord, #0e0620), 0 10px 20px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,216,74,.28), inset 0 3px 0 rgba(255,255,255,.25);
}

/* ── téléphone : le salon se resserre un peu ── */
@media (max-height: 520px) {
  #menu .onglets-salon { gap: 9px; }
  #menu .onglets-salon .onglet-salon, #menu .bas-gauche #btn-missions { width: 80px; height: 72px; }
  #menu .bas-gauche #btn-passe { height: 72px; }
  #menu .bas-droite .mode-carte, #menu .bas-droite .jouer { height: 78px; min-height: 78px; }
}

/* (retouches) les colonnes partent du haut, sous le profil, comme dans les jeux d'arène ; le
   social se range au milieu de la hauteur ; le nom au-dessus du rang ; le mode sur une ligne */
#menu.salon .milieu { align-items: stretch; padding-top: 14px; }
#menu.salon .onglets-salon { align-self: flex-start; }
#menu.salon .cote-social { align-self: center; }
#menu .heros-etiquettes { flex-direction: column; gap: 4px; }
#menu .bas-droite .mode-changer { align-self: start; border-radius: 8px; }
#menu .bas-droite .mode-carte { width: 246px; padding: 6px 10px 6px 6px; }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 9 · ex-ui9.css ▓▓▓▓▓▓▓▓▓
   LA DA DU JEU : « les Ruines au clair de lune » (17/10/2026).

   L'IDÉE
     Un duel à l'épée la nuit, dans des ruines : la nuit violette, l'or des trophées, le sang
     cramoisi, le parchemin des cartes. Les boutons reprennent la CONSTRUCTION des boutons des
     jeux d'arène mobiles (Brawl Stars) : un contour sombre épais, une tranche en relief plus
     foncée en bas, un reflet brillant sur la moitié haute, un texte clair cerné de noir, un
     enfoncement net quand on appuie. Les couleurs, elles, sont les nôtres.

   LES RÈGLES
     · violet  = un bouton ordinaire (aller quelque part, choisir) ;
     · or      = ce qui compte (JOUER, le passe, le bouton principal, ce qui est choisi) ;
     · vert    = acheter, valider ;  rouge = fermer, détruire ;
     · parchemin = une carte qu'on regarde (tenue, mode, récompense) ;
     · nuit    = les fenêtres, cerclées d'or ; bannière cramoisie pour leur titre.
     · Une police PIXEL grasse, dessinée pour le jeu (« Ruin of Blades Gras », tests/genere_police_gras.mjs)
       pour tout ce qui est titre ou bouton : elle va avec le pixel art du jeu.
     · Un texte ne dépasse jamais de son bouton : il reste sur une ligne et, s'il est trop long,
       js/ajuste.js réduit sa taille jusqu'à ce qu'il tienne. */

@font-face {
  font-family: "Ruin of Blades Gras";
  src: url("../assets/ruin-of-blades-gras.ttf") format("truetype");
  font-weight: 100 900;          /* une seule graisse, déclarée pour toutes : jamais de faux gras */
  font-display: block;
}

/* ═════════ LE BOUTON ═════════ */
button, .rond-menu, button.profil, .onglet-salon, .classement-salon, button.discret, .pastille, .onglets button {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-v1) 0%, var(--da-v2) 50%, var(--da-v3) 100%);
  border: 3px solid var(--da-contour); border-radius: 12px; color: #fff;
  box-shadow: inset 0 -5px 0 var(--da-v-tranche), inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--da-contour), 0 9px 16px rgba(0,0,0,.4);
  font-family: var(--gras); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  text-shadow: var(--da-texte-contour);
  transition: transform .08s, filter .12s;
}
@media (hover: hover) { button:hover, .rond-menu:hover, button.profil:hover, .onglet-salon:hover, button.discret:hover, .pastille:hover, .onglets button:hover {
  /* (22/10/2026) « des boutons se mettent en violet quand on clique dessus » : le survol peignait TOUS les boutons en
     violet (les dorés, les verts…), et sur téléphone il restait collé après le toucher. Il éclaircit, sans changer la
     couleur, et seulement à la souris (@media (hover: hover)). */
  filter: brightness(1.1);
} }
button:active, .rond-menu:active, .onglet-salon:active, .pastille:active, .onglets button:active {
  transform: translateY(3px) scale(.97);
  box-shadow: inset 0 -2px 0 var(--da-v-tranche), inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--da-contour);
}
button:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.8); }
/* les petits textes d'un bouton restent en minuscules, plus lisibles */
button small, .onglet-salon small, .mode-desc { text-transform: none; letter-spacing: .01em; }

/* or : ce qui compte */
button.gros, button.gros.dore, #menu .jouer, .jouer, .onglet-salon.passe, .onglet-salon.passe:not(.alerte), #menu .bas-gauche #btn-passe,
.pastille.choisie, .onglets button.choisie, .onglets-cl button.choisie {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-o1) 0%, var(--da-o2) 50%, var(--da-o3) 100%);
  border-color: var(--da-contour);
  box-shadow: inset 0 -5px 0 var(--da-o-tranche), inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 var(--da-contour), 0 9px 18px rgba(240,154,18,.3);
}
@media (hover: hover) { button.gros:hover, button.gros.dore:hover, .jouer:hover, .onglet-salon.passe:hover {
  background: var(--da-reflet), linear-gradient(180deg, #fff8c8 0%, #ffd955 50%, #f5aa25 100%); border-color: var(--da-contour);
} }

/* vert, rouge, gris */
button.vert {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-g1), var(--da-g2) 50%, var(--da-g3)); border-color: var(--da-contour); color: #fff;
  box-shadow: inset 0 -5px 0 var(--da-g-tranche), inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--da-contour);
}
button.discret { opacity: .9; background: var(--da-reflet), linear-gradient(180deg, #8f87a8, #615a7c 50%, #463f5e); box-shadow: inset 0 -5px 0 #2a2540, 0 4px 0 var(--da-contour); }
.btn-croix {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-r1), var(--da-r2) 50%, var(--da-r3)) !important;
  border: 3px solid var(--da-contour) !important; border-radius: 12px !important; color: #fff !important;
  box-shadow: inset 0 -4px 0 var(--da-r-tranche), 0 3px 0 var(--da-contour) !important;
  text-shadow: var(--da-texte-contour);
}

/* les icônes des boutons : blanches, cernées, comme le texte */
.rond-menu svg, .onglet-salon svg, .classement-salon svg, #menu .cote-social svg, #menu .onglet-salon:not(.passe) svg {
  color: #fff !important; fill: currentColor;
  filter: drop-shadow(0 2px 0 var(--da-contour)) drop-shadow(1.5px 0 0 var(--da-contour)) drop-shadow(-1.5px 0 0 var(--da-contour)) drop-shadow(0 -1px 0 var(--da-contour)) !important;
}
#menu .classement-salon svg { width: 40px; height: 40px; fill: var(--da-o2) !important; color: var(--da-o2) !important; }
.point-rouge, .badge-rouge { border: 2px solid var(--da-contour) !important; background: var(--da-r2) !important; font-family: var(--gras); }

/* ═════════ UN TEXTE NE DÉPASSE JAMAIS ═════════ */
.pastille, .mode-carte, .jouer { overflow: hidden; }   /* (pas les autres : leurs pastilles rouges débordent exprès dans le coin) */
button > span:not(.avatar), button > small, button > b, .onglet-salon span, .onglet-salon small, .mode-nom, .mode-desc, .mode-changer, .jouer > span {
  white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; min-width: 0;
}
.pastille, .onglets button, .onglets-cl button, button.gros { white-space: nowrap; }

/* ═════════ LES FENÊTRES : la nuit, cerclée d'or ═════════ */
.voile { background: radial-gradient(ellipse at 50% 40%, rgba(40,20,80,.45), rgba(6,3,14,.9) 75%); }
.panneau, .panneau.court, .panneau.perso, #fin .panneau, #pause .panneau, #abandon .panneau {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(154,106,230,.22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--da-nuit1) 0%, var(--da-nuit2) 55%, var(--da-nuit3) 100%);
  border: 4px solid var(--da-contour); border-radius: 18px; image-rendering: auto;
  box-shadow: 0 8px 0 var(--da-contour), 0 26px 54px rgba(0,0,0,.6), inset 0 0 0 2px var(--da-liseret), inset 0 3px 0 4px rgba(255,255,255,.05);
}
.panneau::before, .panneau::after { background: radial-gradient(circle at 35% 35%, #fff1a0, #ffcf3a 45%, #9a5200 90%); }
.panneau h2, .panneau > h2, .panneau.court h2, #fin .panneau h2, #pause .panneau h2, #abandon .panneau h2 {
  font-family: var(--gras); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.35rem;
  color: #fff; text-shadow: var(--da-texte-contour);
  background: linear-gradient(180deg, #d8343a, #a8181e 55%, #6e0a0e); border: 3px solid var(--da-contour); border-top: none;
  box-shadow: inset 0 0 0 2px rgba(255,207,58,.6), 0 5px 0 var(--da-contour);
}
.panneau .note, .panneau p { color: #e6defa; }
.panneau .etat-ligne { color: var(--da-o1); }
.panneau .ou { color: #c8b8f0; } .panneau .ou::before, .panneau .ou::after { background: rgba(200,184,240,.3); }
.panneau a, .panneau .lien-confidentialite { color: #e0d0ff; }
.panneau input, .panneau.compte input, .panneau.perso input { border: 3px solid var(--da-contour); border-radius: 10px; }
.voile > .panneau > .rangee:last-child, .voile > .panneau > .passe-pied { background: rgba(0,0,0,.28); border: 2px solid rgba(0,0,0,.4); border-radius: 12px; }

/* ═════════ LE SALON ═════════ */
#menu button.profil { border-radius: 14px; }
#menu .profil-nom { font-family: var(--gras); font-weight: 800; font-size: 1.1rem; letter-spacing: .04em; text-shadow: var(--da-texte-contour); }
#menu .profil-titre, #menu .profil-rang { font-family: var(--gras); font-weight: 800; text-transform: none; text-shadow: var(--da-texte-contour); }
#menu .profil-titre { color: var(--da-o1); max-width: max(150px, calc(165px / var(--ech, 1))); }
#menu .profil-xp { background: #120826; border: 2px solid var(--da-contour); }
#menu .profil-xp i { background: linear-gradient(180deg, var(--da-o1), var(--da-o3)); }
#menu .pieces { background: rgba(10,5,22,.75); border: 3px solid var(--da-contour); border-radius: 999px; color: #fff; font-family: var(--gras); font-weight: 800; text-shadow: var(--da-texte-contour);
  box-shadow: 0 3px 0 var(--da-contour), inset 0 2px 0 rgba(255,255,255,.1); }
#menu .rond-menu { border-radius: 14px; }
#menu .onglet-salon span { font-size: .95rem; }
#menu .passe-jauge { border: 2px solid var(--da-contour); }
/* le mode : une carte de parchement, cerclée de noir comme le reste */
#menu .mode-carte { border: 3px solid var(--da-contour); border-radius: 14px; box-shadow: inset 0 -5px 0 #b89a62, 0 4px 0 var(--da-contour), 0 9px 16px rgba(0,0,0,.4); }
#menu .mode-carte canvas { border: 2px solid var(--da-contour); border-radius: 8px; }
#menu .mode-nom { font-family: var(--gras); font-weight: 800; text-transform: uppercase; font-size: 1.3rem !important; letter-spacing: .03em; color: #2a1608; text-shadow: none; }
#menu .mode-changer { font-family: var(--gras); font-weight: 800; letter-spacing: .05em !important; font-size: .68rem !important; color: #a8181e; }
/* JOUER */
#menu .bas-droite .jouer { border-width: 4px;
  box-shadow: inset 0 -7px 0 var(--da-o-tranche), inset 0 3px 0 rgba(255,255,255,.6), 0 5px 0 var(--da-contour), 0 10px 26px rgba(240,154,18,.45); }

/* le nom du héros, cerné, sans cadre ; son rang en pastille de nuit */
#menu .heros-nom { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important;
  font-family: var(--gras); font-weight: 800; font-size: 1.5rem !important; letter-spacing: .06em; color: #fff !important; text-shadow: var(--da-texte-contour); }
#menu .heros-rang { background: rgba(10,5,22,.8); border: 3px solid var(--da-contour); font-family: var(--gras); font-weight: 800; text-shadow: var(--da-texte-contour); box-shadow: 0 3px 0 var(--da-contour); font-size: max(.74rem, var(--lisible)); white-space: nowrap; }
#menu .bas .saison { font-family: var(--gras); font-weight: 800; letter-spacing: .1em; text-shadow: var(--da-texte-contour); }
/* les mots des tuiles du salon, lisibles */
#menu .onglets-salon .onglet-salon span, #menu .bas-gauche #btn-missions span { font-size: max(1.02rem, var(--lisible)); letter-spacing: 0; }
/* la difficulté choisie : de l'or en relief, comme tout ce qui est choisi */
.difficulte button { border-radius: 12px; font-size: .85rem; padding: 6px 14px; }
.difficulte button.choisie {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-o1) 0%, var(--da-o2) 50%, var(--da-o3) 100%); border-color: var(--da-contour);
  box-shadow: inset 0 -4px 0 var(--da-o-tranche), inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 var(--da-contour);
}
/* le gros bouton d'une fenêtre : un vrai texte de bouton principal */
button.gros, button.gros.dore { font-size: 1.25rem; letter-spacing: .06em; }

/* la carte du mode, lisible sur un téléphone : l'image, le nom du mode en grand, « Changer ▸ » en
   étiquette dorée ; la description (trop petite pour être lue) part dans la fenêtre des modes */
#menu .bas-droite .mode-nom { line-height: .95; align-self: center; font-size: 2.1rem !important; }
#menu .bas-droite .mode-changer { padding: 3px 10px; line-height: 1; border: 2px solid var(--da-contour);
  text-shadow: var(--da-texte-contour); box-shadow: 0 2px 0 var(--da-contour);
}
/* téléphone : la ligne « Saison 1 » laisse la place au rang, sous le héros */
@media (max-height: 520px) { #menu .bas-centre { display: none; } }

/* ▓▓▓▓▓▓▓▓▓ PARTIE 10 · ex-ui10.css ▓▓▓▓▓▓▓▓▓
   retouches de lisibilité (17/10/2026). */

/* ═════════ 1. SUR L'OR, UN TEXTE FONCÉ ═════════
   Le blanc cerné de noir, en police pixel sur un fond doré, se lisait mal. Sur l'or, on écrit
   désormais en brun très foncé, avec un liseré clair dessous : net à toutes les tailles. */
button.gros, button.gros.dore, .jouer, #menu .jouer, .onglet-salon.passe, #menu .bas-gauche #btn-passe,
.pastille.choisie, .onglets button.choisie, .onglets-cl button.choisie, .difficulte button.choisie {
  color: #2a1200 !important; text-shadow: 0 2px 0 rgba(255,246,190,.75) !important;
}
.jouer > span, #menu .jouer > span, .onglet-salon.passe span, .onglet-salon.passe small,
#menu .bas-gauche #btn-passe span, #menu .bas-gauche #btn-passe small {
  color: #2a1200 !important; text-shadow: 0 2px 0 rgba(255,246,190,.75) !important;
}
#menu .jouer .jouer-epees, .onglet-salon.passe svg, #menu .onglet-salon.passe svg {
  color: #2a1200 !important; filter: drop-shadow(0 2px 0 rgba(255,246,190,.75)) !important;
}
/* JOUER : plus gros, plus épais */
#menu .bas-droite .jouer { letter-spacing: .08em; }
#menu .bas-droite .jouer .jouer-epees { width: 32px; height: 32px; }
/* le PASSE : un grand titre, la jauge, et le palier en clair */
#menu .passe-jauge { background: rgba(42,18,0,.55); }

/* ═════════ 3. LES NOUVEAUTÉS : du texte foncé sur le parchemin ═════════ */
.panneau .annonce p, .panneau .annonce li, .panneau .annonce span, .panneau .carte p { color: #3a2a18; }
.panneau .annonce header b { color: #2a1608; }
.panneau .annonce header small { color: #6b5030; }

/* ═════════ 4. LE CASIER : une taille fixe, un grand aperçu, rien de caché ═════════
   · la fenêtre a TOUJOURS la même taille, quel que soit l'onglet : seule la grille défile ;
   · l'aperçu prend une vraie colonne, carré, avec le personnage en entier ;
   · sur les cartes, plus rien ne recouvre l'objet : la rareté se lit à la bande de couleur du
     haut et au bord de la carte, le cadenas va dans le coin, hors de l'image. */
.panneau.perso {
  height: calc(90vh / var(--ech, 1)) !important; max-height: none !important;
  width: min(1100px, calc(96vw / var(--ech, 1))) !important;
  display: flex; flex-direction: column;
}
.panneau.perso > .perso-corps {
  flex: 1 1 auto; min-height: 0; display: grid !important;
  grid-template-columns: minmax(150px, 30%) 1fr !important; grid-template-rows: minmax(0, 1fr); gap: 14px !important;
  align-items: stretch;
}
.perso-apercu { flex-direction: column !important; align-items: stretch !important; display: flex !important; gap: 8px; min-height: 0; overflow: auto; }
.perso-apercu .cadre-avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  /* l'aperçu sur un fond de nuit, comme au salon : les auras et les lueurs s'y voient */
  background: radial-gradient(ellipse at 50% 85%, #4a3478 0%, #24164a 55%, #120a26 100%) !important; border: 3px solid var(--da-contour) !important; border-radius: 16px;
}
.perso-apercu .cadre-avatar canvas { width: 92% !important; height: 92% !important; }
.perso-porte { font-family: var(--gras); font-size: .95rem; text-align: center; color: #fff; text-shadow: var(--da-texte-contour); }
.perso-droite { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.perso-droite .onglets { flex: none; display: flex; flex-wrap: nowrap; gap: 6px; }
.perso-droite .onglets button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
.perso-droite .filtres { flex: none; }
.perso-droite .grille-tenues, #perso-compose, #perso-emotes-zone { flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; overflow-y: auto; }
.perso-droite .grille-tenues[hidden], #perso-compose[hidden], #perso-emotes-zone[hidden] { display: none !important; }

.carte-tenue[data-rarete]::after { content: none; }                     /* l'étiquette de rareté qui mordait sur l'image */
.carte-tenue.verrou::after {
  content: "🔒"; top: 10px; right: 4px; bottom: auto; left: auto; background: none; border: none;
  font-size: .62rem; filter: grayscale(1);
}
.carte-tenue .rarete { height: 7px; }

/* ═════════ 5. LES COMMANDES TACTILES SE VOIENT SUR UNE ARÈNE SOMBRE (18/10/2026) ═════════
   Saut et accroupi, gris sur gris à 35 % d'opacité, disparaissaient sur les arènes de nuit.
   Chaque bouton a maintenant un fond plus dense, un liseré clair de 2 px ET un cerne sombre
   autour : il se détache sur un fond clair comme sur un fond noir. L'opacité de l'ensemble
   se règle dans les Paramètres (« Opacité des commandes », variable --tactile-a). */
#partage .pad { opacity: var(--tactile-a, .55); }
.rond {
  background: radial-gradient(circle at 50% 35%, rgba(40,46,58,.72), rgba(10,12,16,.72));
  border: 2px solid rgba(234,246,255,.62);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
  color: rgba(244,250,255,.92); text-shadow: 0 1px 0 #000, 0 0 3px #000;
}
.croix { background: rgba(10,12,16,.4); border: 2px solid rgba(234,246,255,.45); box-shadow: 0 0 0 1.5px rgba(0,0,0,.55); }
.pouce { background: rgba(234,246,255,.4); border: 2px solid rgba(234,246,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.j1 .frappe, #tactile.solo .j2 .frappe { border-color: rgba(255,255,25,.8); color: rgba(255,255,90,.95); }
.j2 .frappe { border-color: rgba(25,255,255,.8); color: rgba(90,255,255,.95); }
.j1 .rond.appui, #tactile.solo .j2 .rond.appui { background: rgba(255,255,25,.35); border-color: var(--cyan); color: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.65), 0 0 16px rgba(255,255,25,.45); }
.j2 .rond.appui { background: rgba(25,255,255,.35); border-color: var(--ambre); color: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.65), 0 0 16px rgba(25,255,255,.45); }

/* ═════════ 6. SUR TÉLÉPHONE, LES FENÊTRES ZOOMENT MOINS QUE LE SALON (18/10/2026) ═════════
   Le salon garde les proportions du PC et descend jusqu'à --ech 0,6 sur un téléphone couché :
   les petits textes des fenêtres (« Non classé », les notes, les onglets) tombaient à 6-7 px.
   Une fenêtre a pourtant toute la place de l'écran : elle prend sa propre échelle, --ech-p,
   posée par regleEchelle() (js/principal.js), plus grande que celle du salon sur un petit
   écran et identique ailleurs. On la verse dans --ech à l'entrée du panneau : son zoom et
   toutes les compensations calc(… / var(--ech)) de son contenu suivent d'un coup. */
.voile > .panneau, .coffre-scene { --ech: var(--ech-p); }

/* ═════════ 7. AUCUN PETIT TEXTE SOUS 11 PX RÉELS (18/10/2026) ═════════
   --lisible vaut 11 px à l'écran quelle que soit l'échelle (le zoom la multiplie par --ech).
   max() garde la taille prévue partout où elle est déjà plus grande : sur PC, rien ne bouge ;
   sur téléphone, « Non classé », le titre du profil, le palier du passe… remontent à 11 px. */
#menu .profil-titre, #menu .profil-rang { font-size: max(.7rem, var(--lisible)) !important; }
   /* « Appuie pour te connecter » en entier */
#profil-niveau { font-size: max(11.5px, var(--lisible)) !important; }
#menu .logo .beta { font-size: max(.62rem, var(--lisible)); }
#pieces-nb { font-size: max(1rem, var(--lisible)); }
#menu .cote-social #amis-badge, #menu .cote-social .classement-salon #classement-salon-place { font-size: max(.62rem, var(--lisible)) !important; }

/* dans les fenêtres (leur --ech est --ech-p, § 6) : les quelques textes encore en dessous */
.modes-ligne .etiquette, .palier .etiquette { font-size: max(.54rem, var(--lisible)); }
.perso-droite .onglets button, #perso-filtres .pastille { font-size: max(.62rem, var(--lisible)); }
.aide-point p, .aide-point > b, .tel-cote li { font-size: max(.62rem, var(--lisible)); }
.panneau .note kbd, .onglet-ami .badge-rouge, #messages-onglet-badge, #amis-onglet-badge { font-size: max(.56rem, var(--lisible)); }
.panneau .note, .panneau .etat-ligne { font-size: max(.7rem, var(--lisible)); }

/* ── (18/10/2026) textes illisibles sur les cartes claires ──
   « .panneau p » (texte presque blanc, pour les panneaux violets) passait
   aussi sur les cartes crème de l'aide et sur la carte dorée « À la une ». */
.panneau .aide-point p { color: var(--cr-encre2); }
.panneau .cr-carte.grande .cr-info p { color: #fff; font-weight: 700; text-shadow: var(--da-texte-contour); margin: 4px 0 0; }
/* (18/10/2026) téléphone couché : le nom de la tenue et la pastille du rang,
   sous les pieds du héros, tombaient sur la carte du mode et sortaient de
   l'écran. Le rang est déjà dans la carte du profil, en haut à gauche. */
@media (max-height: 420px) { #menu .heros-etiquettes { display: none; } }

/* (18/10/2026) TÉLÉPHONE COUCHÉ, la boutique et le passe
   - boutique : le bandeau « sans compte » et la barre des pièces ne
     laissaient que 90 px pour les offres. On les resserre.
   - passe : la barre collée en bas « Passe payant · bientôt » cachait toute
     la rangée des récompenses payantes. Elle suit le contenu, sans se coller. */
@media (max-height: 600px) {
  .panneau.boutique .bandeau-invite { padding: 5px 10px; gap: 8px; }
  .panneau.boutique .bandeau-invite span { display: none; }
  .panneau.boutique .bandeau-invite b { margin-right: auto; }
  .panneau.boutique > .rangee:last-child { padding: 2px 0; }
  .panneau.boutique > .rangee:last-child .pieces.grand { zoom: .8; }
  .boutique-defile { max-height: none; }
  .voile > .panneau > .passe-pied { position: static; box-shadow: none; margin-bottom: 0; }
}
/* (18/10/2026) téléphone couché :
   - le bouton collé en bas d'un panneau (« Prendre les 30 pièces du jour ») descendait
     de 10 px sous le bord et se faisait couper ; il reste maintenant dans le panneau ;
   - la bannière du titre remontait de 12 px dans un panneau qui n'a que 10 px de marge
     (Choisir un mode, Ton casier) : le haut du ruban était rogné. */
@media (max-height: 600px) {
  .voile > .panneau > .gros:last-child, .voile > .panneau > .rangee:last-child, .voile > .panneau > button:last-child { bottom: 0; margin-bottom: 0; }
  .panneau h2, .panneau > h2, .panneau.court h2 { margin-top: -10px; }
}

/* (18/10/2026) le choix de l'arène sur téléphone couché : la description
   tombait à 6 px et coupée au milieu d'un mot ; le nom et l'image suffisent */
@media (max-height: 420px) { .carte.arene .desc { display: none !important; } }
/* le lien vers la politique de confidentialité, lisible sur le violet */
.voile .panneau a.lien-confidentialite { color: #e0d0ff; }
/* (18/10/2026) suite, téléphone couché :
   - « Ton casier » : son panneau est plus serré, le ruban sortait encore par le haut ;
   - l'écran de fin : « Retour au salon » se collait en bas et passait sur « Revanche » ;
     il reste à sa place dans la grille, et l'écran se resserre ;
   - les missions : plus serrées, pour que « Prendre les pièces du jour » tienne. */
@media (max-height: 600px) {
  .panneau.perso > h2 { margin-top: -4px; }
  .voile > .panneau.fin-panneau > button:last-child { position: static; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
  .panneau.fin-panneau { row-gap: 6px; }
  .panneau.fin-panneau > .fin-phrase { display: none; }
  .panneau.fin-panneau > button { padding-top: 8px; padding-bottom: 8px; }
  .panneau.missions .missions-liste { gap: 4px; }
  .panneau.missions .mission { padding: 3px 10px; }
  .panneau.missions .calendrier-cadre .sur { display: none; }
}
/* (18/10/2026) la boutique sur téléphone couché, encore : un invité n'a pas de pièces,
   la barre « 0 pièces » du bas lui prenait de la place pour rien ; le bandeau
   « Sans compte » se fait plus fin. */
@media (max-height: 600px) {
  .panneau.boutique .bandeau-invite:not([hidden]) ~ .rangee:last-child { display: none; }
  .panneau.boutique .bandeau-invite .cr-bouton { padding: 5px 12px; font-size: .8rem; }
  .panneau.boutique .bandeau-invite { padding: 3px 10px; }
}
/* (18/10/2026) une dernière rangée dont tous les boutons sont cachés (le rang d'un
   invité : plus de « duel classé », et « Retour » doublonne la croix) laissait une
   barre sombre vide en bas du panneau */
.voile > .panneau > .rangee:last-child:not(:has(> :not([hidden]):not(.retour-double))) { display: none; }

/* (18/10/2026) « Abandonner » était plus gros que « Rester » : même taille pour les deux */
#abandon .rangee { display: flex; gap: 12px; }
#abandon .rangee > button { flex: 1 1 0; min-width: 0; }
/* (18/10/2026) « Accepter » (les demandes d'amis, les invitations) : vert foncé sur vert
   clair, on le lisait mal. Le même bouton vert que la boutique : texte blanc cerné. */
button.pastille.vert, .pastille.vert {
  background: linear-gradient(180deg, #7fdc4e, #3aa81e 55%, #237a10) !important;
  border-color: #134d08 !important; box-shadow: 0 3px 0 #134d08, inset 0 2px 0 rgba(255,255,255,.3) !important;
  color: #fff !important; text-shadow: 0 1px 0 #0d3a05, 1px 0 0 #0d3a05, -1px 0 0 #0d3a05, 0 -1px 0 #0d3a05 !important;
}
/* (18/10/2026) « en duel avec un pote, "Changer" ne laisse pas choisir l'arène » : le
   choix de l'arène s'ouvrait DERRIÈRE le salon en ligne (#ligne vient après lui dans la
   page, à la même hauteur). Il passe devant tout panneau qui l'appelle. */
#arenes { z-index: 45; }
/* (18/10/2026) « Saison 1 · Les Ruines » et la ligne du dessous n'étaient pas centrés : le
   bloc se plaçait entre le passe (à gauche) et SOLO + JOUER (à droite), plus larges. Il se
   centre maintenant sur l'écran, sans se soucier de ses voisins. */
#menu .bas { position: relative; }
#menu .bas-centre { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
#menu .bas-centre a { pointer-events: auto; }
/* (18/10/2026) « Touches », ouvert depuis la pause, passait DERRIÈRE la pause (même hauteur,
   plus haut dans la page) : il passe devant, comme le choix de l'arène */
#touches { z-index: 45; }

/* (21/10/2026) un pseudo qu’on peut toucher : sa fiche (signaler, bloquer) */
.auteur-lien { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* (21/10/2026) l'adversaire demande la revanche : le bouton l'appelle */
#btn-rejouer.appel { animation: appel-revanche 1s ease-in-out infinite; }
@keyframes appel-revanche { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { #btn-rejouer.appel { animation: none; outline: 3px solid #ffd34d; } }

/* (22/10/2026) un simple message ne bloque pas les boutons qu'il recouvre (seules les invitations se touchent) */
.bulle-invitation.simple { pointer-events: none; }
/* (22/10/2026) le casier, sur téléphone : la note de l'aperçu passe sur l'aperçu, au lieu de sortir du panneau */
@media (max-height: 520px) {
  .perso-apercu { position: relative; }
  .perso-apercu-note { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; background: rgba(12, 8, 32, .9); }
}
/* (22/10/2026) le choix de l'arène : la description lisible, sur deux lignes au besoin (elle était minuscule, et coupée) */
.carte.arene .desc { white-space: normal !important; font-size: .72rem !important; line-height: 1.25 !important; overflow: visible !important; text-overflow: clip !important; }