/* Tapis de Belote — en ligne. Un seul univers : le café, le tapis bordeaux, l'ardoise à la craie. */
:root{
  --mur:#1B1411; --mur2:#2A1E18; --mur3:#35271F;
  --tapis:#5B1A22; --tapis-clair:#7C2833; --tapis-fonce:#330C12;
  --laiton:#C9A34E; --laiton-clair:#E6CB86; --laiton-fonce:#8E6F2B;
  --bois:#6B4A2E; --bois-fonce:#3F2A1A;
  --ardoise:#23292B; --ardoise2:#2E3538;
  --craie:#ECEAE2; --craie-douce:#A9AFAA;
  --papier:#FBF8F1; --papier2:#F3ECDD; --papier-ombre:#DDD4C0; --encre:#2B241E; --encre-douce:#6B5F52;
  --rouge:#BE2A2E; --noir:#18181C; --dos:#1E2C47; --dos2:#2B3E63;
  --ok:#2F6B22; --ok-fond:#E3F0DA; --ko:#8A2615; --ko-fond:#F8DDD5;
  --f-titre:'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --f-ui:'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-cond:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-craie:'Kalam', 'Segoe Print', 'Comic Sans MS', cursive;
  --cw:clamp(50px, 9.2vmin, 94px);
  --ch:calc(var(--cw) * 1.42);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--mur);color:var(--craie);font-family:var(--f-ui);font-size:15px;-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(ellipse at 50% 0%, #33241c 0%, var(--mur) 60%);overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:2px}
.ecran{min-height:100dvh}

/* ---------- boutons ---------- */
.btn{font-family:var(--f-cond);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  border:1px solid rgba(201,163,78,.55);background:transparent;color:var(--laiton-clair);padding:9px 15px;border-radius:3px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.btn:hover{background:rgba(201,163,78,.14)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.plein{background:var(--laiton);color:#23170C;border-color:var(--laiton)}
.btn.plein:hover{background:var(--laiton-clair)}
.btn.rouge{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.petit{padding:5px 10px;font-size:.8rem}
.papier .btn{color:var(--encre);border-color:#8c7b5c}
.papier .btn:hover{background:#efe6d3}
.papier .btn.plein{background:var(--noir);color:var(--papier);border-color:var(--noir)}
.papier .btn.rouge{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* ---------- jeton (monnaie) ---------- */
.jetons{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:600}
.jetons::before{content:"";width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 35%, var(--laiton-clair), var(--laiton) 55%, var(--laiton-fonce));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.25);flex:none}

/* ---------- connexion ---------- */
.accueil{display:flex;align-items:center;justify-content:center;padding-inline:16px;padding-block:32px}
.accueil-carte{width:min(440px,100%);display:flex;flex-direction:column;gap:18px}
.logo{margin:0;font-family:var(--f-titre);font-weight:700;font-size:clamp(2.2rem,9vw,3.2rem);line-height:1;color:var(--papier);text-align:center}
.logo em{font-style:italic;font-weight:500;color:var(--laiton)}
.sous-logo{margin:0;text-align:center;color:var(--craie-douce);font-family:var(--f-cond);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.eventail{position:relative;height:118px;--cw:64px;display:flex;justify-content:center}
.eventail .carte{position:absolute;bottom:0;transform-origin:50% 120%}
.eventail .carte:nth-child(1){transform:rotate(-16deg)}
.eventail .carte:nth-child(3){transform:rotate(16deg)}
.papier{background:var(--papier);color:var(--encre);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.formulaire{padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px}
.onglets-auth{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e3d9c4;margin:-20px -20px 4px}
.onglets-auth button{background:none;border:0;padding:14px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--encre-douce);cursor:pointer;border-bottom:3px solid transparent}
.onglets-auth button[aria-selected="true"]{color:var(--rouge);border-bottom-color:var(--rouge)}
.champ{display:flex;flex-direction:column;gap:5px}
.champ > span{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--encre-douce);font-weight:600}
.champ input,.champ select{padding:10px 11px;border:1px solid #cbbfa6;border-radius:3px;background:#fff;color:var(--encre);font-size:1rem}
.champ input:focus{outline:2px solid var(--laiton);outline-offset:0;border-color:var(--laiton)}
.avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.avatars button{font-size:1.4rem;height:42px;border:1px solid #d6cbb2;background:#fff;border-radius:50%;cursor:pointer;line-height:1}
.avatars button[aria-pressed="true"]{border-color:var(--rouge);box-shadow:0 0 0 2px var(--rouge)}
.erreur{margin:0;color:var(--ko);background:var(--ko-fond);padding:8px 10px;border-radius:3px;font-size:.92rem}
.note{margin:0;font-size:.85rem;color:var(--encre-douce);line-height:1.45}
.accueil .note-sombre{color:var(--craie-douce);text-align:center;font-size:.85rem;margin:0;line-height:1.5}

/* ---------- salon ---------- */
.salon{display:flex;flex-direction:column;min-height:100dvh}
.profil-barre{display:flex;align-items:center;gap:12px;padding-inline:16px;padding-block:12px;border-bottom:1px solid rgba(201,163,78,.2);background:rgba(0,0,0,.18);flex-wrap:wrap}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--papier);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none;box-shadow:0 0 0 2px var(--laiton)}
.avatar.petit{width:30px;height:30px;font-size:1rem;box-shadow:0 0 0 1.5px var(--laiton)}
.avatar.ia{box-shadow:0 0 0 2px var(--craie-douce)}
.qui-suis-je{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.qui-suis-je b{font-family:var(--f-titre);font-size:1.15rem;color:var(--papier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-reste{white-space:nowrap}
.xp{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--f-cond);font-size:.82rem;color:var(--craie-douce);letter-spacing:.04em}
.xp .jauge{width:110px;height:5px;background:rgba(236,234,226,.15);border-radius:3px;overflow:hidden}
.xp .jauge span{display:block;height:100%;background:var(--laiton)}
.chiffres{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chiffres .jetons{font-size:1.15rem;color:var(--papier)}
.ligue{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;padding:3px 8px;border-radius:2px;border:1px solid currentColor}
.ligue[data-l="Bronze"]{color:#D39A6A}.ligue[data-l="Argent"]{color:#C9CFD3}.ligue[data-l="Or"]{color:var(--laiton-clair)}
.ligue[data-l="Platine"]{color:#9FD3CF}.ligue[data-l="Diamant"]{color:#A9C4FF}
.elo{font-family:var(--f-cond);font-size:.9rem;color:var(--craie-douce);font-variant-numeric:tabular-nums}

.salon-corps{flex:1;display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;min-height:0}
.nav{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid rgba(201,163,78,.15)}
.nav button{display:flex;align-items:center;gap:10px;background:none;border:0;padding:11px 12px;border-radius:4px;cursor:pointer;color:var(--craie-douce);font-family:var(--f-cond);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem;text-align:left}
.nav button svg{width:20px;height:20px;flex:none}
.nav button[aria-selected="true"]{background:rgba(201,163,78,.14);color:var(--laiton-clair)}
.nav .en-ligne{margin-top:auto;padding:12px;font-size:.85rem;color:var(--craie-douce);display:flex;align-items:center;gap:8px}
.point-vert{width:8px;height:8px;border-radius:50%;background:#7FD06B;box-shadow:0 0 0 3px rgba(127,208,107,.2)}
.panneau{padding-inline:clamp(16px,3vw,32px);padding-block:22px 90px;overflow:auto;display:flex;flex-direction:column;gap:22px;max-width:980px;width:100%}
.panneau h2{margin:0;font-family:var(--f-titre);font-weight:700;font-size:clamp(1.5rem,4vw,2rem);color:var(--papier);text-wrap:balance}
.panneau h2 em{font-weight:500;color:var(--laiton)}
.panneau .intro{margin:.3em 0 0;color:var(--craie-douce);max-width:62ch;line-height:1.5}
.titre-section{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--laiton-clair);margin:0 0 10px;font-weight:600}

.bandeau-bonus{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:1px dashed rgba(201,163,78,.55);border-radius:5px;background:rgba(201,163,78,.07)}
.bandeau-bonus p{margin:0}

.segment{display:flex;flex-wrap:wrap;gap:6px}
.segment button{border:1px solid rgba(236,234,226,.25);background:transparent;padding:8px 14px;border-radius:20px;cursor:pointer;color:var(--craie);font-family:var(--f-cond);font-weight:600;letter-spacing:.05em;font-size:.95rem}
.segment button small{color:var(--craie-douce);font-weight:500;margin-left:4px}
.segment button[aria-pressed="true"]{background:var(--papier);color:var(--encre);border-color:var(--papier)}
.segment button[aria-pressed="true"] small{color:var(--encre-douce)}

.salles{display:grid;gap:10px}
.salle-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 16px;border-radius:5px;background:var(--papier);color:var(--encre);position:relative}
.salle-ligne h3{margin:0;font-family:var(--f-titre);font-size:1.25rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.salle-ligne h3 small{font-family:var(--f-cond);font-size:.8rem;font-weight:600;color:var(--encre-douce);letter-spacing:.06em}
.salle-ligne p{margin:0;color:var(--encre-douce);font-size:.9rem}
.salle-infos{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem;color:var(--encre);align-items:center;grid-column:1}
.salle-infos .jetons::before{font-size:.9em}
.salle-infos .fleche{color:var(--encre-douce)}
.salle-infos .ia-niv{font-family:var(--f-cond);letter-spacing:.04em;color:var(--encre-douce)}
.salle-ligne .action{grid-row:1/span 3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.salle-ligne .attente{font-size:.8rem;color:var(--ok);font-weight:600}
.salle-ligne.verrou{background:var(--papier2)}
.salle-ligne.verrou h3,.salle-ligne.verrou .salle-infos{opacity:.6}
.cadenas{font-family:var(--f-cond);font-size:.85rem;color:var(--ko);font-weight:600;text-align:right;max-width:150px}

.bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.bot{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(236,234,226,.14);border-radius:5px}
.bot b{display:block;color:var(--papier);font-weight:600}
.bot span{font-size:.82rem;color:var(--craie-douce)}
.niv{font-family:var(--f-cond);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:2px;background:rgba(236,234,226,.12);color:var(--craie)}
.niv[data-n="4"]{background:rgba(201,163,78,.25);color:var(--laiton-clair)}
.niv[data-n="5"]{background:var(--laiton);color:#23170C}
details.repli summary{cursor:pointer;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--laiton-clair);font-weight:600;padding:4px 0}
details.repli[open] summary{margin-bottom:10px}

.grille-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.bloc{padding:16px;display:flex;flex-direction:column;gap:12px}
.bloc h3{margin:0;font-family:var(--f-titre);font-size:1.25rem}
.code-grand{font-family:var(--f-titre);font-weight:700;font-size:2.4rem;letter-spacing:.18em;color:var(--rouge);margin:0}
.sieges-salle{display:grid;gap:8px}
.siege-ligne{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #e3d9c4;border-radius:4px;background:#fff}
.siege-ligne .nom-s{flex:1;min-width:0}
.siege-ligne .nom-s b{display:block}
.siege-ligne .nom-s span{font-size:.82rem;color:var(--encre-douce)}
.siege-ligne select{padding:6px;border:1px solid #cbbfa6;border-radius:3px;background:#fff;color:var(--encre)}
.equipe-tag{font-family:var(--f-cond);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}

.classement-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.classement-liste li{display:grid;grid-template-columns:2.4em auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-radius:4px;background:rgba(236,234,226,.04)}
.classement-liste li.moi{background:rgba(201,163,78,.16);box-shadow:inset 0 0 0 1px rgba(201,163,78,.5)}
.classement-liste .rang{font-family:var(--f-titre);font-weight:700;font-size:1.1rem;color:var(--craie-douce);font-variant-numeric:tabular-nums}
.classement-liste li:nth-child(1) .rang{color:var(--laiton-clair)}
.classement-liste .pseudo b{display:block;color:var(--papier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classement-liste .pseudo span{font-size:.8rem;color:var(--craie-douce)}
.classement-liste .val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--papier);font-size:1.05rem}
.vide{color:var(--craie-douce);padding:18px;border:1px dashed rgba(236,234,226,.2);border-radius:5px;text-align:center;margin:0}

.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;background:rgba(236,234,226,.12);border-radius:5px;overflow:hidden}
.stat{background:var(--mur2);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--f-titre);font-size:1.6rem;color:var(--papier);font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem;color:var(--craie-douce)}
.echelle{display:flex;gap:4px;flex-wrap:wrap}
.echelle .ligue{opacity:.4}
.echelle .ligue.actuelle{opacity:1}

/* nav mobile en bas */
@media (max-width:760px){
  .salon-corps{grid-template-columns:1fr}
  .nav{position:fixed;left:0;right:0;bottom:0;flex-direction:row;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#140f0c;border-right:0;border-top:1px solid rgba(201,163,78,.25);z-index:10}
  .nav button{flex-direction:column;gap:3px;font-size:.7rem;padding:6px 4px;flex:1;align-items:center}
  .nav .en-ligne{display:none}
  .xp .jauge{width:70px}
  .xp-reste{display:none}
  .profil-barre{flex-wrap:nowrap;gap:10px}
  .chiffres{flex-direction:column;align-items:flex-end;gap:4px}
  .chiffres .elo{display:none}
  .salle-ligne{grid-template-columns:1fr}
  .salle-ligne .action{grid-row:auto;grid-column:1;flex-direction:row;align-items:center;justify-content:space-between}
  .cadenas{text-align:left;max-width:none}
}

/* ---------- table ---------- */
.jeu{display:flex;flex-direction:column;height:100dvh;padding-inline:16px;padding-block:10px 12px;gap:10px}
.barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.barre .ou{font-family:var(--f-titre);font-weight:700;font-size:1.2rem;color:var(--papier)}
.barre .ou small{font-family:var(--f-cond);font-weight:600;color:var(--laiton-clair);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin-left:8px}
.barre .espace{flex:1}
.salle-jeu{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;min-height:0}
.tapis{position:relative;border-radius:22px;min-height:0;
  background:radial-gradient(ellipse at 50% 45%, var(--tapis-clair) 0%, var(--tapis) 52%, var(--tapis-fonce) 100%);
  box-shadow:inset 0 0 0 7px #4a141b, inset 0 0 0 8px rgba(201,163,78,.55), inset 0 0 60px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.5);
  display:grid;grid-template-areas:". haut ." "gauche centre droite" "main main main";
  grid-template-columns:minmax(78px,1fr) minmax(0,2.6fr) minmax(78px,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  padding:18px 14px 12px;overflow:hidden}
.tapis::before{content:"";position:absolute;inset:18px;border:1px dashed rgba(201,163,78,.28);border-radius:14px;pointer-events:none}
.tapis::after{content:"BELOTE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-titre);font-style:italic;font-weight:500;font-size:clamp(2.4rem,9vmin,6rem);color:rgba(0,0,0,.13);letter-spacing:.14em;pointer-events:none;white-space:nowrap}
.siege{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:1;min-width:0}
.siege[data-pos="haut"]{grid-area:haut}.siege[data-pos="gauche"]{grid-area:gauche}.siege[data-pos="droite"]{grid-area:droite}
.plaque{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 4px;border-radius:22px;background:rgba(0,0,0,.25);max-width:100%;position:relative}
.plaque .txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.plaque .txt b{font-family:var(--f-cond);font-weight:600;font-size:.95rem;letter-spacing:.04em;color:var(--papier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plaque .txt span{font-size:.7rem;color:var(--craie-douce);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actif .plaque{box-shadow:0 0 0 1.5px var(--laiton);background:rgba(201,163,78,.2)}
.plaque.absent{opacity:.6}
.minuteur{position:absolute;left:12px;right:12px;bottom:-4px;height:3px;border-radius:2px;background:rgba(0,0,0,.3);overflow:hidden}
.minuteur i{display:block;height:100%;background:var(--laiton-clair);transform-origin:left;animation:minuteur linear forwards}
@keyframes minuteur{from{transform:scaleX(var(--s,1))}to{transform:scaleX(0)}}
.jeton-s{font-family:var(--f-cond);font-size:.66rem;letter-spacing:.08em;padding:1px 6px;border-radius:9px;background:var(--papier);color:var(--noir);font-weight:700}
.jeton-s.preneur{background:var(--laiton);color:#23170C}
.dos-rangee{display:flex;height:calc(var(--cw)*.62)}
.dos{width:calc(var(--cw)*.44);height:calc(var(--cw)*.62);border-radius:4px;margin-left:calc(var(--cw)*-.3);background:repeating-linear-gradient(45deg,var(--dos) 0 4px,var(--dos2) 4px 8px);border:2px solid var(--papier);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.dos:first-child{margin-left:0}
.bulle{font-family:var(--f-craie);font-size:1rem;background:var(--papier);color:var(--noir);padding:2px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.bulle.rouge{color:var(--rouge)}.bulle.fort{background:var(--laiton-clair)}
.bulle.chat{background:#fff;border:1px solid var(--laiton)}
.centre{grid-area:centre;position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(var(--ch)*2.2)}
.pli{position:relative;width:calc(var(--cw)*3.6);height:calc(var(--ch)*2.3)}
.pli .carte{position:absolute;left:50%;top:50%;transition:transform .25s ease, box-shadow .25s}
.pli .carte[data-from="bas"]{transform:translate(-50%,2%)}
.pli .carte[data-from="haut"]{transform:translate(-50%,-102%)}
.pli .carte[data-from="gauche"]{transform:translate(-128%,-50%) rotate(-7deg)}
.pli .carte[data-from="droite"]{transform:translate(28%,-50%) rotate(7deg)}
.pli .carte.gagnante{box-shadow:0 0 0 3px var(--laiton-clair), 0 6px 16px rgba(0,0,0,.5)}
.retourne{display:flex;flex-direction:column;align-items:center;gap:6px}
.etiquette{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--laiton-clair)}
.talon{position:absolute;left:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;font-family:var(--f-cond);color:var(--papier)}
.talon .dos{margin:0}.talon .dos:nth-child(2){margin-top:calc(var(--cw)*-.58);transform:translate(3px,0)}
.talon b{font-size:1.2rem;margin-top:4px}.talon small{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--laiton-clair)}
.statut{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-family:var(--f-cond);font-size:1rem;letter-spacing:.05em;color:var(--papier);background:rgba(0,0,0,.28);padding:3px 12px;border-radius:14px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.statut:empty{display:none}

.carte{width:var(--cw);height:var(--ch);background:var(--papier);border-radius:calc(var(--cw)*.09);color:var(--noir);box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 0 0 1px var(--papier-ombre);position:relative;flex:none;padding:0;border:0;font-family:var(--f-titre);user-select:none}
.carte.rouge{color:var(--rouge)}
.carte .coin{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:700;font-size:calc(var(--cw)*.26)}
.carte .coin i{font-style:normal;font-size:calc(var(--cw)*.22);font-family:var(--f-ui)}
.carte .coin.h{top:calc(var(--cw)*.06);left:calc(var(--cw)*.07)}
.carte .coin.b{bottom:calc(var(--cw)*.06);right:calc(var(--cw)*.07);transform:rotate(180deg)}
.carte .motif{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.5);font-family:var(--f-ui)}
.carte .tete{position:absolute;inset:calc(var(--cw)*.22) calc(var(--cw)*.2);border:1.5px solid currentColor;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-titre);font-style:italic;font-weight:500;font-size:calc(var(--cw)*.44);line-height:1;opacity:.92}
.carte .tete small{font-style:normal;font-family:var(--f-ui);font-size:calc(var(--cw)*.2)}
.carte.atout::after{content:"";position:absolute;left:18%;right:18%;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--laiton)}
.moi{grid-area:main;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.main{display:flex;justify-content:center;padding-top:14px;max-width:100%}
.main .carte{margin-left:calc(var(--cw)*-.28);transition:transform .15s ease, filter .15s;cursor:default}
.main .carte:first-child{margin-left:0}
.main .carte.jouable{cursor:pointer;transform:translateY(-10px)}
.main .carte.jouable:hover,.main .carte.jouable:focus-visible{transform:translateY(-18px)}
.main .carte.bloquee{filter:brightness(.62) saturate(.7)}
.moi .ligne-moi{display:flex;align-items:center;gap:8px}

.carton{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:min(440px,calc(100% - 24px));background:var(--papier);color:var(--noir);border-radius:6px;padding:14px 16px 16px;box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px}
.carton h3{margin:0;font-family:var(--f-titre);font-weight:700;font-size:1.2rem}
.carton .aide{margin:0;font-size:.88rem;color:#5b5147}
.rangee{display:flex;flex-wrap:wrap;gap:6px}
.valeurs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.puce{font-family:var(--f-cond);font-weight:600;font-size:1rem;min-width:46px;padding:6px 8px;border:1px solid #cbbfa6;background:#fff;border-radius:3px;cursor:pointer;color:var(--noir);flex:none}
.puce[aria-pressed="true"]{background:var(--noir);color:var(--papier);border-color:var(--noir)}
.couleur{font-size:1.35rem;min-width:52px;padding:6px 10px;border:1px solid #cbbfa6;background:#fff;border-radius:3px;cursor:pointer;color:var(--noir);font-family:var(--f-ui);line-height:1.1}
.couleur.rouge{color:var(--rouge)}.couleur.txt{font-family:var(--f-cond);font-weight:700;font-size:1rem}
.carton .actions{display:flex;gap:8px;flex-wrap:wrap}
.carton .btn{color:var(--noir);border-color:#8c7b5c}
.carton .btn.plein{background:var(--noir);color:var(--papier);border-color:var(--noir)}
.carton .btn.coinche{background:var(--rouge);color:#fff;border-color:var(--rouge)}

.ardoise{background:var(--ardoise);border:9px solid var(--bois);border-radius:6px;box-shadow:inset 0 0 0 1px var(--bois-fonce), inset 0 0 40px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.45);padding:12px 14px;font-family:var(--f-craie);color:var(--craie);display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;background-image:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 60%)}
.ardoise h4{margin:0;font-family:var(--f-craie);font-weight:700;font-size:1.2rem;border-bottom:1.5px solid rgba(236,234,226,.35);padding-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ardoise h4 small{font-weight:400;font-size:.85rem;color:var(--craie-douce)}
.scores{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.ligne-score{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px}
.ligne-score .equipe{font-size:1.05rem}.ligne-score .pts{font-size:1.7rem;font-weight:700;line-height:1.1}
.barre-prog{height:4px;background:rgba(236,234,226,.12);border-radius:2px;grid-column:1/-1;overflow:hidden}
.barre-prog span{display:block;height:100%;background:var(--craie);opacity:.7}
.contrat{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.contrat .sym{font-family:var(--f-ui);font-size:2.4rem;line-height:1;width:48px;height:48px;border:1.5px solid rgba(236,234,226,.4);border-radius:50%;display:flex;align-items:center;justify-content:center}
.contrat .sym.rouge{color:#F08A8A}.contrat .sym.txt{font-family:var(--f-craie);font-size:1rem;font-weight:700}
.contrat p{margin:0;line-height:1.3;font-size:.98rem}.contrat .dim{color:var(--craie-douce);font-size:.85rem}
.histo{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:.92rem;font-variant-numeric:tabular-nums}
.histo li{display:grid;grid-template-columns:2.2em repeat(var(--nt),1fr);gap:6px;color:var(--craie-douce)}
.histo li.tete{color:var(--craie);border-bottom:1px solid rgba(236,234,226,.25)}
.histo li span{text-align:right}.histo li span:first-child{text-align:left}
.dernier{display:flex;gap:4px;--cw:34px}
.dernier .carte{box-shadow:none}.dernier .carte .coin.b,.dernier .carte .tete,.dernier .carte .motif{display:none}
.messages{display:flex;flex-wrap:wrap;gap:6px}
.messages button{font-family:var(--f-craie);font-size:.9rem;border:1px solid rgba(236,234,226,.3);background:transparent;color:var(--craie);border-radius:12px;padding:3px 10px;cursor:pointer}
.messages button:hover{background:rgba(236,234,226,.08)}

@media (max-width:820px){
  .salle-jeu{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ardoise{order:-1;border-width:5px;padding:6px 10px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;overflow:visible}
  .ardoise .optionnel{display:none}
  .ardoise h4{display:none}
  .scores{grid-auto-flow:column;gap:14px}
  .ligne-score{grid-template-columns:auto auto}
  .ligne-score .pts{font-size:1.3rem}
  .barre-prog{display:none}
  .contrat .sym{width:34px;height:34px;font-size:1.6rem}
  .contrat .dim{display:none}
  .tapis{grid-template-columns:minmax(64px,.8fr) minmax(0,2.6fr) minmax(64px,.8fr);padding:12px 8px 8px;border-radius:16px}
  .tapis::before{inset:10px}
  :root{--cw:clamp(44px, 11.5vw, 70px)}
  .main .carte{margin-left:calc(var(--cw)*-.42)}
  .plaque .txt span{display:none}
  .jeu{padding-inline:10px}
}

/* ---------- feuilles (résultats, attente) ---------- */
.voile{position:fixed;inset:0;z-index:20;background:rgba(15,10,8,.74);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 16px}
.feuille{width:min(700px,100%);margin:auto 0;padding:24px clamp(18px,4vw,32px)}
.feuille h2{font-family:var(--f-titre);font-weight:700;font-size:clamp(1.6rem,4.5vw,2.3rem);margin:0;line-height:1.05;text-wrap:balance}
.feuille h2 em{color:var(--rouge);font-weight:500}
.feuille .chapeau{margin:.4em 0 0;color:var(--encre-douce);max-width:60ch;line-height:1.5}
.pied{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:center}
.pied .compte{margin-right:auto;font-size:.88rem;color:var(--encre-douce)}
.resultat-titre{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tag{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.8rem;padding:3px 9px;border-radius:2px}
.tag.ok{background:var(--ok-fond);color:var(--ok)}.tag.ko{background:var(--ko-fond);color:var(--ko)}.tag.neutre{background:#efe6d3;color:#5b4a2e}
.defile{overflow-x:auto}
.tableau-res{width:100%;border-collapse:collapse;margin-top:16px;font-variant-numeric:tabular-nums}
.tableau-res th,.tableau-res td{padding:7px 8px;text-align:right;border-bottom:1px solid #e3d9c4}
.tableau-res th:first-child,.tableau-res td:first-child{text-align:left;color:var(--encre-douce)}
.tableau-res thead th{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--noir)}
.tableau-res tr.fort td{font-weight:700;color:var(--noir);font-size:1.08rem}
.tableau-res tr.total td{font-family:var(--f-titre);font-size:1.25rem;color:var(--noir);border-bottom:0}
.recompenses{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:#e3d9c4;border-radius:5px;overflow:hidden;margin-top:18px}
.recompenses div{background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.recompenses b{font-family:var(--f-titre);font-size:1.5rem;font-variant-numeric:tabular-nums}
.recompenses span{font-size:.82rem;color:var(--encre-douce)}
.recompenses .plus{color:var(--ok)}.recompenses .moins{color:var(--ko)}
.annonce-niveau{margin-top:14px;padding:10px 12px;border-radius:4px;background:#fff7e6;border:1px solid var(--laiton);color:var(--encre)}
.attente-sieges{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.attente-sieges span{width:46px;height:46px;border-radius:50%;border:2px dashed #cbbfa6;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.attente-sieges span.pris{border:2px solid var(--rouge);background:#fff7f4}
.compte-rebours{font-family:var(--f-titre);font-size:1.1rem;text-align:center;margin:0;color:var(--encre)}

.toast{position:fixed;left:50%;top:max(120px,22vh);transform:translateX(-50%);z-index:40;background:var(--papier);color:var(--noir);padding:9px 16px;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:.95rem;max-width:min(520px,calc(100% - 32px));text-align:center;border-top:3px solid var(--laiton)}
.hors-ligne{position:fixed;left:0;right:0;top:0;z-index:50;background:var(--rouge);color:#fff;text-align:center;padding:6px 12px;font-size:.9rem}
.installer{position:fixed;right:16px;bottom:84px;z-index:15}
@media (min-width:761px){.installer{bottom:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}