/* ==========================================================================
   Playwarak — systeme de design
   Palette : feutre de casino (vert profond), nuit (charcoal bleute), laiton (or).
   Un seul fichier de jetons + composants ; les pages n'ont plus de style inline.
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */
:root {
    /* Fonds */
    --pw-bg: #0B0F14;
    --pw-bg-2: #111721;
    --pw-surface: #151C27;
    --pw-surface-2: #1B2430;
    --pw-surface-3: #222D3B;

    /* Feutre */
    --pw-felt: #0C5138;
    --pw-felt-2: #0A422D;
    --pw-felt-lite: #14724F;

    /* Laiton / or */
    --pw-gold: #D9A94A;
    --pw-gold-2: #F2CE7E;
    --pw-gold-dim: rgba(217, 169, 74, .16);

    /* Rouge carte */
    --pw-red: #C0392B;
    --pw-red-2: #E05B4C;

    /* Texte */
    --pw-text: #EAF0F7;
    --pw-text-2: #A3B0C2;
    --pw-text-3: #6C7A8D;

    /* Lignes */
    --pw-line: rgba(255, 255, 255, .09);
    --pw-line-2: rgba(255, 255, 255, .16);

    /* Rayons / ombres */
    --pw-r-s: 8px;
    --pw-r-m: 14px;
    --pw-r-l: 20px;
    --pw-r-xl: 28px;
    --pw-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    --pw-shadow-s: 0 6px 18px rgba(0, 0, 0, .35);

    --pw-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --pw-nav-h: 66px;
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* PAS DE BALAYAGE LATERAL. Sur telephone, la page suivait le doigt sur les
   cotes et rebondissait, alors que rien n'y depasse. « clip » coupe sans creer
   de zone defilante — « hidden » en creerait une, et les entetes collants du
   jeu cesseraient de coller. */
html, body { max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }

/* PAS DE SELECTION. Un jeu de cartes se manipule, il ne se surligne pas : un
   appui un peu long, un glissement de souris, et l'interface partait en bleu.
   « touch-callout » supprime en plus la loupe et le menu d'iOS, et
   « tap-highlight » le cadre gris que Safari pose sur ce qu'on touche. */
body {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* Sauf la ou l'on a de bonnes raisons de copier : ce que l'on saisit, et le
   texte des messages recus. */
input, textarea, select, [contenteditable="true"], .pw-bulle__texte {
    -webkit-user-select: text; user-select: text;
    -webkit-touch-callout: default;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--pw-font);
    color: var(--pw-text);
    background: var(--pw-bg);
    background-image:
        radial-gradient(1200px 620px at 12% -10%, rgba(20, 114, 79, .22), transparent 62%),
        radial-gradient(1000px 560px at 92% 4%, rgba(217, 169, 74, .10), transparent 60%),
        linear-gradient(180deg, #0B0F14 0%, #0E141C 46%, #0B0F14 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--pw-gold-2); text-decoration: none; }
a:hover { color: var(--pw-gold); }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.15; }

hr { border: 0; border-top: 1px solid var(--pw-line); margin: 20px 0; }

::selection { background: var(--pw-gold); color: #17120A; }

/* Barre de defilement */
* { scrollbar-width: thin; scrollbar-color: #2C3949 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2C3949; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #3A4B60; background-clip: content-box; }

/* --- 3. Coquille -------------------------------------------------------- */
.pw-shell { display: flex; flex-direction: column; min-height: 100vh; }
.pw-main { flex: 1 0 auto; }

.pw-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pw-wrap--narrow { max-width: 820px; }
.pw-wrap--wide { max-width: 1480px; }

.pw-page { padding: 34px 0 64px; }

.pw-page--etroite { max-width: 940px; margin: 0 auto; }

/* ---- Pages de compte : titres, cartes, tableaux ---------------------- */
.pw-h1 { font-size: 1.9rem; margin: 0 0 22px; }
.pw-h2 { font-size: 1.15rem; margin: 0 0 6px; }
.pw-sous { color: var(--pw-text-2); font-size: .93rem; line-height: 1.55; margin: 0 0 18px; }
.pw-sous--centre { text-align: center; margin: 14px 0 0; font-size: .86rem; }
.pw-note { color: var(--pw-text-3); font-size: .82rem; line-height: 1.5; margin: 12px 0 0; }

.pw-carte {
    padding: 22px 22px 24px; margin-bottom: 22px;
    border-radius: var(--pw-r-l);
    border: 1px solid var(--pw-line-2);
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
    box-shadow: var(--pw-shadow), 0 0 0 1px rgba(217, 169, 74, .08) inset;
}
.pw-cartes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .pw-cartes2 { grid-template-columns: 1fr; gap: 0; } }

/* Le solde, en gros : c'est le chiffre qu'on vient voir. */
.pw-solde {
    font-size: 2.4rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, var(--pw-gold-2), var(--pw-gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pw-etat { display: flex; align-items: center; gap: 9px; font-size: .95rem; margin: 0 0 12px; }
.pw-etat svg { width: 18px; height: 18px; flex: 0 0 18px; }
.pw-etat--ok { color: #7FD3AC; }
.pw-etat--non { color: var(--pw-text-3); }

/* ---- Tableaux ------------------------------------------------------- */
/* Les montants en chasse fixe et alignes a DROITE : une colonne de sommes
   alignee a gauche ne se lit pas, les unites ne tombent pas l'une sous l'autre. */
.pw-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pw-table th {
    text-align: left; padding: 8px 10px; font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pw-text-3); font-weight: 600;
    border-bottom: 1px solid var(--pw-line-2);
}
.pw-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.pw-table tr:last-child td { border-bottom: 0; }
.pw-droite { text-align: right; font-variant-numeric: tabular-nums; }
.pw-plus { color: #7FD3AC; }
.pw-moins { color: #F3ADA4; }
.pw-suspendu { opacity: .5; }

/* Un tableau large glisse DANS SA BOITE, jamais la page : sur telephone, six
   colonnes debordent forcement. */
.pw-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pw-table--admin { min-width: 900px; }

.pw-pastille {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; letter-spacing: .04em;
    border: 1px solid var(--pw-line-2); color: var(--pw-text-3);
}
.pw-pastille--ok { border-color: rgba(23, 128, 90, .5); background: rgba(23, 128, 90, .14); color: #9FDCC0; }

/* ---- Les chiffres du tableau de bord -------------------------------- */
.pw-chiffres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px; margin-bottom: 24px;
}
.pw-chiffre {
    padding: 16px 18px; border-radius: var(--pw-r-m);
    border: 1px solid var(--pw-line-2);
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
}
.pw-chiffre__v {
    display: block; font-size: 1.5rem; font-weight: 700; color: var(--pw-gold-2);
    font-variant-numeric: tabular-nums;
}
.pw-chiffre__l {
    display: block; margin-top: 4px; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--pw-text-3);
}

/* ---- Commandes en ligne, dans les cellules -------------------------- */
.pw-enligne { display: flex; gap: 5px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.pw-input--mini { padding: 5px 8px; font-size: .82rem; min-width: 0; }
.pw-input--nombre { width: 76px; flex: 0 0 76px; }
.pw-btn--mini { padding: 5px 11px; font-size: .78rem; border-radius: 8px; }

/* ---- Le recu : une FEUILLE, pas un ecran de plus ---------------------
   Blanche sur le fond sombre du site, a dessein : c'est un document. On le
   lit, on l'imprime, on le classe. */
.pw-recu__barre { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

.pw-feuille {
    max-width: 620px; margin: 0 auto; padding: 34px 34px 28px;
    background: #FFFFFF; color: #1A2430;
    border-radius: var(--pw-r-l);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
    font-size: .94rem; line-height: 1.55;
}
.pw-feuille__tete {
    display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
    padding-bottom: 18px; border-bottom: 2px solid #1A2430;
}
.pw-feuille__emetteur { margin: 0; font-size: 1.15rem; font-weight: 700; }
.pw-feuille__no { margin: 2px 0 0; font-size: .76rem; color: #5B6B7C; font-variant-numeric: tabular-nums; }
.pw-feuille__titre { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: .18em; }
.pw-feuille__ref { margin: 3px 0 0; font-size: .78rem; color: #5B6B7C; font-family: Consolas, monospace; }

.pw-feuille__parties { display: flex; justify-content: space-between; gap: 20px; margin: 20px 0 24px; }
.pw-feuille__parties p { margin: 0; }
.pw-feuille__etiq {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: #7A8899; margin-bottom: 3px !important;
}
.pw-feuille__fin { color: #5B6B7C; font-size: .84rem; }

.pw-feuille__table { width: 100%; border-collapse: collapse; }
.pw-feuille__table td { padding: 9px 0; border-bottom: 1px solid #E4E9EF; }
.pw-feuille__taxe { color: #5B6B7C; font-size: .88rem; }
.pw-feuille__total td {
    padding-top: 13px; font-weight: 700; font-size: 1.05rem;
    border-bottom: 0; border-top: 2px solid #1A2430;
}
.pw-feuille .pw-droite { font-variant-numeric: tabular-nums; }

.pw-feuille__paye {
    display: flex; align-items: center; gap: 8px; margin: 22px 0 0;
    font-weight: 700; color: #10704E;
}
.pw-feuille__paye svg { width: 19px; height: 19px; flex: 0 0 19px; }

.pw-feuille__pied { margin-top: 26px; padding-top: 16px; border-top: 1px solid #E4E9EF; }
.pw-feuille__pied p { margin: 0 0 5px; font-size: .8rem; color: #5B6B7C; }
.pw-feuille__essai { color: #A8730F !important; font-weight: 600; }
.pw-feuille__merci { margin-top: 12px !important; text-align: center; }

/* A l'impression : la feuille SEULE. Un recu imprime ne porte ni barre de
   navigation, ni bouton, ni fond sombre — qui viderait une cartouche d'encre. */
@media print {
    .pw-sansimpression, .pw-nav, .pw-footer, .pw-chatfab { display: none !important; }
    body { background: #FFF !important; }
    .pw-page, .pw-wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .pw-feuille { box-shadow: none; max-width: none; padding: 0; }
}

/* La mention de frais sous le bouton d'ouverture. Discrete quand la partie est
   simplement payante, alarmee quand elle ne peut pas demarrer. */
.pw-frais {
    margin: 8px 0 0; font-size: .78rem; line-height: 1.45;
    color: var(--pw-text-3);
}
.pw-frais--non { color: #F3ADA4; }
.pw-frais a { color: var(--pw-gold-2); }

/* ---- Modale ---------------------------------------------------------- */
/* Au-dessus de TOUT ce qui flotte sur le tapis (compteur, mention, eventail :
   1000002 a 1000006) et au-dessus de la barre elle-meme. */
.pw-modale {
    position: fixed; inset: 0; z-index: 1000010;
    display: grid; place-items: center; padding: 24px;
    background: rgba(4, 8, 12, .72);
    backdrop-filter: blur(3px);
}
.pw-modale__carte {
    width: 100%; max-width: 400px; text-align: center;
    padding: 26px 24px 22px; border-radius: var(--pw-r-l);
    border: 1px solid var(--pw-line-2);
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
    box-shadow: var(--pw-shadow);
}
.pw-modale__carte .pw-btn { margin-top: 10px; }

/* ---- Retour de paiement --------------------------------------------- */
.pw-retour { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.pw-retour__carte {
    width: 100%; max-width: 420px; text-align: center;
    padding: 34px 30px 32px; border-radius: var(--pw-r-l);
    border: 1px solid var(--pw-line-2);
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
    box-shadow: var(--pw-shadow);
}
.pw-retour__logo { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 22px; }
.pw-retour__logo svg { width: 38px; height: 38px; }
.pw-retour__rond {
    display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px;
    border-radius: 50%;
}
.pw-retour__rond svg { width: 28px; height: 28px; }
.pw-retour__rond--ok { background: rgba(23, 128, 90, .18); border: 1px solid rgba(23, 128, 90, .5); color: #7FD3AC; }
.pw-retour__rond--non { background: rgba(192, 57, 43, .14); border: 1px solid rgba(224, 91, 76, .4); color: #F3ADA4; }
.pw-retour .pw-h1 { font-size: 1.4rem; margin-bottom: 10px; }

/* Le detail chiffre d'un paiement : sur la page de retour, et a l'etape du
   code avant de partir a la caisse. Aligne a gauche DANS une carte centree —
   des montants centres ne se comparent pas d'un coup d'oeil. */
.pw-recu {
    width: 100%; border-collapse: collapse; text-align: left;
    margin: 20px 0 4px; font-size: .9rem; color: var(--pw-text-2);
}
.pw-recu td { padding: 7px 0; }
.pw-recu td + td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-recu__total td {
    padding-top: 11px; border-top: 1px solid var(--pw-line-2);
    color: var(--pw-text); font-weight: 700;
}
/* La reference : longue, monospace, et on la lit lettre a lettre pour la citer. */
.pw-recu__ref td { padding-top: 11px; font-size: .78rem; color: var(--pw-text-3); }
.pw-recu__ref td + td { font-family: Consolas, "SF Mono", ui-monospace, monospace; }
.pw-ref { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: .74rem; color: var(--pw-text-3); }

/* Six colonnes de chiffres ne tiennent pas sur un telephone. Elles glissent
   DANS leur carte, plutot que de faire deraper la page entiere. */
.pw-tablewrap { overflow-x: auto; }

/* --- 4. Barre de navigation --------------------------------------------- */
.pw-nav {
    position: sticky; top: 0;
    /* Au-dessus de TOUT ce qui flotte sur le tapis (compteur, mention,
       eventail : 1000002 a 1000006). A 900, le menu deroule sur telephone
       passait sous la plaque du compteur. */
    z-index: 1000010;
    height: var(--pw-nav-h);
    display: flex; align-items: center;
    background: rgba(11, 15, 20, .82);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--pw-line);
}
.pw-nav__inner { display: flex; align-items: center; gap: 10px; width: 100%; }

.pw-brand { display: flex; align-items: center; gap: 11px; margin-right: 14px; }
.pw-brand__mark { width: 34px; height: 34px; flex: 0 0 34px; }
.pw-brand__text { display: flex; flex-direction: column; line-height: 1; }
.pw-brand__name {
    font-size: 1.14rem; font-weight: 700; letter-spacing: .01em;
    background: linear-gradient(100deg, #FFF 12%, var(--pw-gold-2) 58%, var(--pw-gold) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pw-brand__tag { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pw-text-3); margin-top: 3px; }

.pw-nav__links { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.pw-nav__spacer { flex: 1 1 auto; }

.pw-navlink {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 10px;
    color: var(--pw-text-2); font-size: .93rem; font-weight: 550;
    border: 1px solid transparent; background: none; cursor: pointer;
    transition: color .16s, background .16s, border-color .16s;
    font-family: inherit;
}
.pw-navlink:hover { color: var(--pw-text); background: rgba(255, 255, 255, .05); }
.pw-navlink.is-active { color: var(--pw-text); background: rgba(217, 169, 74, .10); border-color: rgba(217, 169, 74, .28); }
.pw-navlink svg { width: 16px; height: 16px; opacity: .85; }
.pw-navlink__caret { width: 10px; height: 10px; opacity: .6; transition: transform .18s; }
.pw-menu[data-open="true"] > .pw-navlink .pw-navlink__caret { transform: rotate(180deg); }

/* Menus deroulants */
.pw-menu { position: relative; }
.pw-menu__panel {
    position: absolute; top: calc(100% + 9px); left: 0; min-width: 214px;
    background: var(--pw-surface); border: 1px solid var(--pw-line-2);
    border-radius: var(--pw-r-m); box-shadow: var(--pw-shadow);
    padding: 7px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.pw-menu__panel--right { left: auto; right: 0; }
.pw-menu[data-open="true"] .pw-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.pw-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 9px;
    color: var(--pw-text-2); font-size: .9rem; white-space: nowrap;
}
.pw-menu__item:hover { background: rgba(255, 255, 255, .06); color: var(--pw-text); }
.pw-menu__item.is-active { color: var(--pw-gold-2); background: var(--pw-gold-dim); }
.pw-menu__item svg { width: 15px; height: 15px; opacity: .8; flex: 0 0 15px; }
.pw-menu__sep { height: 1px; background: var(--pw-line); margin: 6px 4px; }
.pw-menu__label { padding: 8px 11px 5px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pw-text-3); }

/* Pastille utilisateur */
.pw-userchip {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 5px; border-radius: 999px;
    border: 1px solid var(--pw-line-2); background: rgba(255, 255, 255, .04);
    color: var(--pw-text); cursor: pointer; transition: border-color .16s, background .16s;
    font-family: inherit;
}
.pw-userchip:hover { border-color: rgba(217, 169, 74, .4); background: rgba(217, 169, 74, .08); }
.pw-userchip__name { font-size: .88rem; font-weight: 600; }

.pw-avatar {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    font-weight: 700; font-size: .85rem; letter-spacing: .01em; color: #14100A;
    background: linear-gradient(145deg, var(--pw-gold-2), var(--pw-gold));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
/* La photo se superpose aux initiales ; si /photo/<id> repond 404, site.js
   retire l'image et les initiales reapparaissent. */
.pw-avatar { position: relative; overflow: hidden; }
.pw-avatar__ini { line-height: 1; }
.pw-avatar__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    background: var(--pw-surface-2);
}
.pw-avatar--lg { width: 54px; height: 54px; font-size: 1.2rem; }
.pw-avatar--felt { background: linear-gradient(145deg, var(--pw-felt-lite), var(--pw-felt)); color: #EAF7F0; }
.pw-avatar--muted { background: linear-gradient(145deg, #3B4A5D, #2A3543); color: #C6D2E0; }

/* Bascule mobile */
.pw-nav__burger { display: none; }

/* --- 5. Boutons --------------------------------------------------------- */
.pw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
    font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: transform .12s, box-shadow .16s, background .16s, border-color .16s, color .16s;
}
.pw-btn:active { transform: translateY(1px); }
.pw-btn svg { width: 16px; height: 16px; }

.pw-btn--gold {
    background: linear-gradient(160deg, var(--pw-gold-2), var(--pw-gold));
    color: #17120A; box-shadow: 0 6px 18px rgba(217, 169, 74, .26);
}
.pw-btn--gold:hover { box-shadow: 0 10px 26px rgba(217, 169, 74, .38); color: #17120A; }

.pw-btn--felt {
    background: linear-gradient(160deg, var(--pw-felt-lite), var(--pw-felt));
    color: #EAF7F0; box-shadow: 0 6px 18px rgba(12, 81, 56, .38);
}
.pw-btn--felt:hover { box-shadow: 0 10px 26px rgba(20, 114, 79, .48); color: #FFF; }

.pw-btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--pw-line-2); color: var(--pw-text-2); }
.pw-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: var(--pw-text); border-color: var(--pw-line-2); }

.pw-btn--danger { background: rgba(192, 57, 43, .14); border-color: rgba(224, 91, 76, .34); color: var(--pw-red-2); }
.pw-btn--danger:hover { background: rgba(192, 57, 43, .24); color: #FF8577; }

.pw-btn--sm { padding: 7px 13px; font-size: .82rem; border-radius: 9px; }
.pw-btn--block { width: 100%; }
.pw-btn--lg { padding: 13px 24px; font-size: .98rem; border-radius: 12px; }
.pw-btn:disabled, .pw-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* --- 6. Formulaires ----------------------------------------------------- */
.pw-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.pw-label { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-text-3); }

.pw-input, .pw-select {
    width: 100%; padding: 12px 14px;
    font-family: inherit; font-size: .95rem; color: var(--pw-text);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--pw-line-2); border-radius: 10px;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.pw-input::placeholder { color: var(--pw-text-3); }

/* SEIZE PIXELS AU MOINS SUR ECRAN TACTILE. En dessous, Safari juge le champ
   illisible et zoome dessus des qu'on le touche : la page devient plus large
   que l'ecran et se met a glisser de droite et de gauche. C'est la seule parade
   propre — brider le zoom dans la balise viewport reglerait le symptome en
   empechant chacun d'agrandir la page. */
@media (pointer: coarse) {
    input, textarea, select, .pw-input, .pw-select { font-size: 16px; }
}
.pw-input:focus, .pw-select:focus {
    outline: none; background: rgba(255, 255, 255, .07);
    border-color: rgba(217, 169, 74, .55);
    box-shadow: 0 0 0 3px rgba(217, 169, 74, .14);
}
.pw-select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A3B0C2' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.pw-select option { background: #1B2430; color: #EAF0F7; }

.pw-search { position: relative; }
.pw-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--pw-text-3); pointer-events: none; }
.pw-search .pw-input { padding-left: 40px; }

.pw-validation { color: var(--pw-red-2); font-size: .86rem; }
.pw-validation:empty { display: none; }

.pw-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 18px; border-radius: 10px;
    background: rgba(192, 57, 43, .12); border: 1px solid rgba(224, 91, 76, .32);
    color: #F3ADA4; font-size: .9rem;
}
.pw-alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }

/* --- 7. Surfaces -------------------------------------------------------- */
.pw-card {
    background: linear-gradient(170deg, var(--pw-surface-2), var(--pw-surface));
    border: 1px solid var(--pw-line); border-radius: var(--pw-r-l);
    box-shadow: var(--pw-shadow-s);
}
.pw-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--pw-line); }
.pw-card__body { padding: 24px; }

.pw-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.pw-pagehead__eyebrow { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pw-gold); margin-bottom: 9px; }
.pw-pagehead h1 { font-size: 1.9rem; }
.pw-pagehead p { margin: 8px 0 0; color: var(--pw-text-2); font-size: .95rem; max-width: 60ch; }

.pw-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid var(--pw-line-2); color: var(--pw-text-2); background: rgba(255, 255, 255, .04);
}
.pw-badge--live { color: #6FE0A8; border-color: rgba(111, 224, 168, .32); background: rgba(111, 224, 168, .10); }
.pw-badge--gold { color: var(--pw-gold-2); border-color: rgba(217, 169, 74, .34); background: var(--pw-gold-dim); }
.pw-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pw-badge--live .pw-dot { animation: pw-pulse 1.9s ease-in-out infinite; }
@keyframes pw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* --- 8. Grille de joueurs ----------------------------------------------- */
.pw-grid { display: grid; gap: 16px; }
.pw-grid--players { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.pw-grid--tables { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.pw-player {
    display: flex; flex-direction: column; gap: 16px; padding: 18px;
    background: linear-gradient(170deg, var(--pw-surface-2), var(--pw-surface));
    border: 1px solid var(--pw-line); border-radius: var(--pw-r-m);
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pw-player:hover { border-color: var(--pw-line-2); transform: translateY(-2px); box-shadow: var(--pw-shadow-s); }
.pw-player__top { display: flex; align-items: center; gap: 13px; min-width: 0; }
.pw-player__id { min-width: 0; }
.pw-player__name { font-weight: 650; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-player__sub { font-size: .82rem; color: var(--pw-text-3); margin-top: 3px; }
.pw-player__actions { display: flex; gap: 9px; }
.pw-player__actions .pw-btn { flex: 1; }

/* --- 9. Tables ---------------------------------------------------------- */
.pw-table-card {
    display: flex; flex-direction: column;
    background: linear-gradient(170deg, var(--pw-surface-2), var(--pw-surface));
    border: 1px solid var(--pw-line); border-radius: var(--pw-r-l); overflow: hidden;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pw-table-card:hover { border-color: rgba(217, 169, 74, .3); transform: translateY(-2px); box-shadow: var(--pw-shadow); }
.pw-table-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--pw-line); }
.pw-table-card__title { font-size: 1.02rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-table-card__foot { padding: 16px 18px; border-top: 1px solid var(--pw-line); }

/* Le feutre miniature avec les 4 sieges */
.pw-felt {
    position: relative; margin: 18px; padding: 16px;
    min-height: 210px;
    border-radius: var(--pw-r-l);
    background:
        radial-gradient(120% 90% at 50% 12%, rgba(255, 255, 255, .10), transparent 58%),
        linear-gradient(165deg, var(--pw-felt-lite), var(--pw-felt) 52%, var(--pw-felt-2));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 0 46px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .3);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: ". n ." "o c e" ". s .";
    align-items: center; justify-items: center; gap: 4px 12px;
}
.pw-felt::after {
    content: ""; position: absolute; inset: 7px; border-radius: 15px;
    border: 1px solid rgba(217, 169, 74, .22); pointer-events: none;
}
.pw-seat { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.pw-seat--n { grid-area: n; } .pw-seat--s { grid-area: s; }
.pw-seat--e { grid-area: e; } .pw-seat--o { grid-area: o; }
.pw-seat__pos { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.pw-seat__name {
    max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .82rem; font-weight: 600; color: #E9F6EF;
}
.pw-seat__name--empty { color: rgba(233, 246, 239, .38); font-weight: 500; font-style: italic; }
.pw-seat__name--me { color: var(--pw-gold-2); }
.pw-seat__avatar { width: 30px; height: 30px; font-size: .74rem; }

.pw-felt__center { grid-area: c; display: flex; align-items: center; justify-content: center; }
.pw-felt__cards { position: relative; width: 64px; height: 56px; }
.pw-felt__cards img {
    position: absolute; width: 30px; border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.pw-felt__cards img:nth-child(1) { left: 0; top: 9px; transform: rotate(-19deg); }
.pw-felt__cards img:nth-child(2) { right: 0; top: 9px; transform: rotate(19deg); }
.pw-felt__cards img:nth-child(3) { left: 50%; top: 0; transform: translateX(-50%); }

/* Le selecteur de sieges a de la place : cartes plus grandes. */
.pw-seatpicker__center .pw-felt__cards { width: 108px; height: 88px; }
.pw-seatpicker__center .pw-felt__cards img { width: 50px; }

/* Selecteur de sieges (creation de table) */
.pw-seatpicker {
    position: relative; padding: 24px;
    border-radius: var(--pw-r-l);
    background:
        radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, .10), transparent 58%),
        linear-gradient(165deg, var(--pw-felt-lite), var(--pw-felt) 52%, var(--pw-felt-2));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 0 46px rgba(0, 0, 0, .40);
    display: grid; gap: 14px;
    grid-template-columns: 1fr minmax(90px, 130px) 1fr;
    grid-template-areas: ". n ." "o c e" ". s .";
    align-items: center; justify-items: center;
}
.pw-seatpicker::after { content: ""; position: absolute; inset: 9px; border-radius: 15px; border: 1px solid rgba(217, 169, 74, .22); pointer-events: none; }
.pw-seatslot { width: 100%; max-width: 190px; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.pw-seatslot__label { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .58); text-align: center; }
.pw-seatslot .pw-select { background-color: rgba(4, 26, 18, .55); border-color: rgba(255, 255, 255, .18); }
.pw-seatslot--n { grid-area: n; } .pw-seatslot--s { grid-area: s; }
.pw-seatslot--e { grid-area: e; } .pw-seatslot--o { grid-area: o; }
.pw-seatslot--me {
    text-align: center; padding: 9px 12px; border-radius: 10px;
    background: rgba(217, 169, 74, .16); border: 1px solid rgba(217, 169, 74, .34);
    color: var(--pw-gold-2); font-weight: 650; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-seatpicker__center { grid-area: c; z-index: 1; }

/* --- 10. Etat vide ------------------------------------------------------ */
.pw-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 58px 26px; text-align: center;
    border: 1px dashed var(--pw-line-2); border-radius: var(--pw-r-l);
    background: rgba(255, 255, 255, .02);
}
.pw-empty__icon { width: 46px; height: 46px; color: var(--pw-text-3); opacity: .7; }
.pw-empty h3 { font-size: 1.06rem; }
.pw-empty p { margin: 0; color: var(--pw-text-3); font-size: .92rem; max-width: 44ch; }

/* --- 11. Page de connexion ---------------------------------------------- */
.pw-auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }

.pw-auth__brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 64px 6vw;
    /* Le meme vert que la table de jeu, monte d'un cran : on reconnait la
       maison avant d'entrer. L'ellipse claire imite la lumiere sur un feutre,
       le halo dore chauffe l'angle bas. */
    background:
        radial-gradient(58% 42% at 50% 46%, rgba(255, 255, 255, .07), transparent 70%),
        radial-gradient(96% 76% at 14% 12%, var(--pw-felt-lite), transparent 62%),
        radial-gradient(72% 62% at 92% 92%, rgba(217, 169, 74, .30), transparent 64%),
        linear-gradient(152deg, var(--pw-felt) 0%, var(--pw-felt-2) 46%, #06251A 100%);
    border-right: 1px solid rgba(217, 169, 74, .22);
}
/* Un filet dore ferme le panneau, comme le cadre d'une table. */
.pw-auth__brand::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-right: 2px solid rgba(217, 169, 74, .30);
}
.pw-auth__brand::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .5;
}
/* Le semis de points passe SOUS le contenu, explicitement : l'eventail va
   sortir du bloc de texte et doit rester au-dessus. */
.pw-auth__brand::before { z-index: 0; }
/* Statique, pour que l'eventail se positionne par rapport au FEUTRE et non par
   rapport au bloc de texte, large de 520 px seulement. */
.pw-auth__brandinner { position: static; max-width: 520px; }
.pw-auth__brandinner > * { position: relative; z-index: 1; }
.pw-auth__logo { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.pw-auth__logo svg { width: 52px; height: 52px; }
.pw-auth__logotext { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.pw-auth__title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; margin-bottom: 18px; }
.pw-auth__title em { font-style: normal; background: linear-gradient(100deg, var(--pw-gold-2), var(--pw-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-auth__points { display: flex; flex-direction: column; gap: 13px; padding: 0; margin: 0; list-style: none; }
.pw-auth__points li { display: flex; align-items: center; gap: 11px; color: #D6E7DD; font-size: .95rem; }
.pw-auth__points svg { width: 19px; height: 19px; color: var(--pw-gold); flex: 0 0 19px; }

/* Les quatre enseignes, dans leurs vraies couleurs. */
.pw-auth__suits { display: flex; gap: 26px; margin-top: 38px; }
.pw-auth__suit {
    font-size: 2rem; line-height: 1; color: #E8F0EA;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    opacity: .92;
}
.pw-auth__suit--rouge { color: var(--pw-red-2); }

/* Les quatre as, en haut a DROITE du feutre, face au mot Playwarak. Ils
   etaient en bas du panneau, ou ils ne repondaient a rien. */
/* Les quatre as, en haut a DROITE du feutre, face au mot Playwarak.
   ILS DOIVENT TENIR EN ENTIER : le feutre coupe ce qui deborde, et une carte
   trop grande sortait par le haut, la tete tranchee. Une carte fait 1,4 fois sa
   largeur en hauteur, et le pivot de l'eventail est SOUS elle : la boite doit
   donc loger la carte ET le balayage de l'inclinaison. */
/* LES QUATRE AS, en haut a droite du feutre, face au mot Playwarak.
   ILS DOIVENT TENIR EN ENTIER : le feutre coupe ce qui deborde, et le pivot de
   l'eventail est SOUS les cartes — une carte trop grande sortait par le haut,
   la tete tranchee. Le titre commence a 156 px : tout tient au-dessus. */
.pw-fan {
    position: absolute; z-index: 1;
    top: 24px; right: 40px;
    width: 200px; height: 118px;
    margin: 0;
}
.pw-fan img {
    position: absolute; bottom: 0; left: 50%; width: 76px; margin-left: -38px;
    border-radius: 7px; box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
    /* Pivot sous les cartes : l'eventail s'ouvre vraiment au lieu de s'empiler. */
    transform-origin: 50% 145%;
}
.pw-fan img:nth-child(1) { transform: rotate(-17deg); }
.pw-fan img:nth-child(2) { transform: rotate(-5.7deg); }
.pw-fan img:nth-child(3) { transform: rotate(5.7deg); }
.pw-fan img:nth-child(4) { transform: rotate(17deg); }

.pw-auth__panel {
    /* « relative » et « z-index » ensemble : le formulaire est pose sur une
       carte de rang negatif, il faut qu'elle reste enfermee ici. */
    position: relative; z-index: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 6vw;
    /* LE NOIR RESTE — c'est lui qui fait tenir le vert d'en face — mais ce
       n'est plus un vide, c'est une PIECE. Une lumiere chaude tombe d'en haut
       sur le formulaire, comme la lampe au-dessus d'une table de jeu, et les
       bords s'assombrissent : c'est la ce qui donne la profondeur.
       Surtout, plus de motif etire sur une demi-page — a cette echelle un
       treillis de cartes n'est plus qu'une rayure. */
    background:
        /* LE COIN HAUT GAUCHE, qui ne doit plus etre un trou noir : une chaleur
           ambree qui s'eteint doucement vers le centre. Elle est en TETE de la
           liste, donc peinte PAR-DESSUS le vignettage — dans l'autre ordre, le
           noir des angles la mangeait. */
        radial-gradient(58% 44% at -2% -4%, rgba(236, 194, 116, .30), transparent 66%),
        radial-gradient(30% 24% at 2% 0%, rgba(255, 226, 172, .20), transparent 72%),
        radial-gradient(62% 46% at 92% 4%, rgba(20, 114, 79, .18), transparent 66%),
        radial-gradient(58% 44% at 12% 98%, rgba(217, 169, 74, .10), transparent 62%),
        /* Le vignettage se replie sur les ANGLES. Etale sur tout le pourtour, il
           repassait par-dessus la lumiere et l'effacait. */
        radial-gradient(120% 96% at 50% 44%, transparent 62%, rgba(0, 0, 0, .58) 100%),
        linear-gradient(200deg, var(--pw-bg-2), var(--pw-bg) 68%);
}

/* LA LAMPE SUSPENDUE. Le faisceau est un trapeze — etroit en haut, large en
   bas — pose sur toute la hauteur du panneau : c'est la forme qui fait lire une
   lumiere qui tombe, une simple tache ronde ne dit rien. Il est peint APRES le
   fond et ses ombres, sinon le vignettage l'efface. */
.pw-auth__lampe {
    position: absolute; left: 50%; top: 0; z-index: 0;
    width: 150%; height: 86%; margin-left: -75%;
    pointer-events: none;
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    /* Un flou emousse la decoupe : nette, elle donne un projecteur de theatre
       et non une lampe. Et l'ambre monte, sinon la lumiere tire au gris sur un
       fond bleute. */
    filter: blur(15px);
    background: linear-gradient(180deg,
        rgba(255, 214, 146, .16) 0%,
        rgba(255, 210, 142, .075) 32%,
        rgba(255, 208, 140, .03) 60%,
        transparent 86%);
}
/* La source, au bord superieur, et la flaque la ou le faisceau touche la
   table : sans ces deux points, le trapeze n'est qu'un dégradé. */
.pw-auth__lampe::before {
    content: ""; position: absolute; left: 50%; top: -34px;
    width: 220px; height: 96px; margin-left: -110px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 235, 186, .28), transparent 70%);
}
.pw-auth__lampe::after {
    content: ""; position: absolute; left: 50%; bottom: -12%;
    width: 88%; height: 46%; margin-left: -44%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 150, .075), transparent 72%);
}

/* ---- Le jeu de cartes du coin ---------------------------------------
   Un objet, pas une texture. Il deborde du cadre : on n'en voit qu'une
   partie, ce qui suffit a le reconnaitre et laisse la place au formulaire. */
.pw-backs {
    position: absolute; right: -18px; bottom: -6px; z-index: 0;
    width: 340px; height: 272px; pointer-events: none;
}
/* Une lueur chaude posee sous la pile : elle decolle les cartes du noir au lieu
   de les y laisser s'enfoncer. */
.pw-backs::before {
    content: ""; position: absolute; inset: -70px -60px -40px -70px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 55%, rgba(23, 128, 90, .34), transparent 72%);
}
.pw-back {
    position: absolute; left: 50%; bottom: 0; margin-left: -80px;
    width: 160px; height: 224px; border-radius: 13px;
    /* ICI le treillis en losanges est a sa place : a l'echelle d'une carte, il
       se lit pour ce qu'il est. Le double liseret imite le bord imprime. */
    background:
        repeating-linear-gradient(45deg, rgba(240, 205, 138, .26) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-45deg, rgba(240, 205, 138, .26) 0 1px, transparent 1px 10px),
        linear-gradient(158deg, #1B644A, #0A3325);
    border: 1px solid rgba(240, 205, 138, .55);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, .74),
        inset 0 0 0 6px rgba(4, 22, 16, .50),
        inset 0 0 0 7px rgba(240, 205, 138, .40);
    transform-origin: 50% 128%;
}
.pw-back:nth-child(1) { transform: rotate(-21deg); }
.pw-back:nth-child(2) { transform: rotate(-7deg); }
.pw-back:nth-child(3) { transform: rotate(7deg); }

/* Le formulaire est une CARTE POSEE, pas un champ qui flotte sur du noir. */
.pw-auth__form {
    /* Au-dessus du faisceau, qui occupe le rang zero. */
    position: relative; z-index: 1;
    width: 100%; max-width: 404px;
    padding: 34px 32px 30px;
    border-radius: var(--pw-r-l);
    border: 1px solid var(--pw-line-2);
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
    box-shadow: var(--pw-shadow), 0 0 0 1px rgba(217, 169, 74, .10) inset;
}
.pw-auth__form h2 { font-size: 1.55rem; margin-bottom: 8px; }
.pw-auth__form > p { color: var(--pw-text-2); margin: 0 0 26px; font-size: .95rem; }
/* ---- Comptes : captcha, code, grille ------------------------------- */

/* Deux champs cote a cote — prenom et nom — qui repassent l'un sous l'autre
   quand la carte devient etroite. */
.pw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 420px) { .pw-grid2 { grid-template-columns: 1fr; } }

/* Un code se recopie d'un courriel : chasse fixe et lettres tres espacees, pour
   verifier d'un coup d'oeil qu'on n'a pas saute un chiffre. */
.pw-input--code {
    font-family: Consolas, "SF Mono", ui-monospace, monospace;
    font-size: 1.25rem; letter-spacing: .42em; text-align: center;
    padding-left: .42em; /* la derniere lettre porte son espacement : sans cela le texte parait decale a gauche */
}

/* Le captcha : l'image au-dessus, la saisie dessous. L'image est un SVG produit
   par le serveur — les chiffres y sont des traces, pas du texte. */
.pw-captcha { display: flex; flex-direction: column; gap: 10px; }
.pw-captcha__img {
    display: block; line-height: 0;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--pw-line-2);
    /* On ne selectionne pas un captcha, et on ne le fait pas glisser ailleurs. */
    -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.pw-captcha__img svg { width: 100%; height: auto; display: block; }

/* Le bandeau d'essai : ambre, ni alarme ni approbation — un avertissement. */
.pw-alert--test {
    border-color: rgba(217, 169, 74, .45);
    background: rgba(217, 169, 74, .12);
    color: #F0D8A4;
}
.pw-pastille--test {
    border-color: rgba(217, 169, 74, .5);
    background: rgba(217, 169, 74, .14);
    color: #F0D8A4;
    margin-left: 5px;
}

/* Le pendant vert du bandeau d'alerte : ce qui s'est bien passe. */
.pw-alert--ok {
    border-color: rgba(23, 128, 90, .45);
    background: rgba(23, 128, 90, .12);
    color: #BFE7D4;
}

/* Ecrit p.pw-auth__foot, et non .pw-auth__foot : la regle .pw-auth__form > p
   plus haut est plus specifique et remettait la marge du haut a zero. Le
   texte se collait alors au bouton qui le precede. */
p.pw-auth__foot { margin: 22px 0 26px; text-align: center; color: var(--pw-text-3); font-size: .87rem; }
/* Il n'existe que sur telephone, ou le panneau de marque ne porte pas le logo.
   Sa regle de base avait saute : il se repetait alors dans la carte. */
.pw-auth__mobilelogo { display: none; }

/* Ce qui se joue ici : le bas du panneau ne disait rien. */
.pw-auth__games {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--pw-line);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pw-gold);
}
.pw-auth__sep { color: var(--pw-text-3); }

/* Le bouton d'ouverture n'existe que sur telephone. */
.pw-auth__open { display: none; }

/* ------------------------------------------------------------------
   Les deux vignettes : revisionnage et apprentissage
   Une phrase decrit mal une fonction visuelle. Chaque vignette joue le
   geste : la lecture qui defile, la main qu'on ouvre a son partenaire.
   ------------------------------------------------------------------ */
.pw-demo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-top: 28px;
}
.pw-demo__card {
    padding: 12px 14px 14px;
    border-radius: var(--pw-r-m);
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(6, 30, 21, .46);
}
.pw-demo__card h3 { margin: 12px 0 4px; font-size: .95rem; color: var(--pw-gold-2); }
.pw-demo__card p { margin: 0; font-size: .84rem; line-height: 1.45; color: #CFE3D8; }

.pw-demo__scene {
    /* Deux mains en eventail, et une ligne de titre au-dessus et au-dessous.
       Les deux vignettes gardent la MEME hauteur : cote a cote, une difference
       se verrait aussitot. */
    position: relative; height: 158px; overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, .14));
}
.pw-demo__scene img {
    position: absolute; width: 40px; border-radius: 3px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .55);
}

/* ---- Revisionnage : un lecteur ------------------------------------- */
/* Le bouton de lecture, en haut a gauche : le signe le plus court de
   « ceci se regarde ». */
.pw-demo__play {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid rgba(242, 206, 126, .7);
    background: rgba(242, 206, 126, .14);
}
.pw-demo__play::before {
    content: ""; position: absolute; left: 6px; top: 4px;
    border-left: 7px solid var(--pw-gold-2);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* Le petit tapis : c'est une TABLE qu'on rejoue, pas une rangee de cartes. */
.pw-demo__tapis {
    position: absolute; inset: 8px 8px 22px;
    border-radius: 9px;
    border: 1px solid rgba(217, 169, 74, .30);
    background: radial-gradient(70% 60% at 50% 46%, #14724F, #0A422D 78%);
}

/* Les quatre cartes arrivent chacune DE SON SIEGE et forment le pli au centre. */
/* Trois plis de quatre cartes s'enchainent sur DOUZE secondes — quatre par
   pli. Chaque carte arrive de son siege, se pose au centre du tapis, y reste le
   temps du pli, puis s'efface pour laisser la place au suivant. */
/* Deux classes, pour peser plus lourd que « .pw-demo__scene img » qui imposait
   40 px : a cette taille les quatre cartes se recouvraient entierement. */
.pw-demo__scene .pw-demo__coup {
    /* Ecart au centre du tapis. En variables, parce que le tapis est plus grand
       sur telephone et que le pli doit s'y ouvrir davantage. */
    --pw-pli-y: 25px;
    --pw-pli-x: 29px;
    /* Le tapis est pose a 8 px du haut et remonte de 22 en bas : son centre
       tombe donc a 46 % de la scene, pas a la moitie. */
    left: 50%; top: 46%; width: 30px; opacity: 0;
    animation-duration: 12s; animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.2, .8, .3, 1);
    animation-fill-mode: backwards;
}
.pw-demo__coup--n { animation-name: pw-coup-n; }
.pw-demo__coup--e { animation-name: pw-coup-e; }
.pw-demo__coup--s { animation-name: pw-coup-s; }
.pw-demo__coup--o { animation-name: pw-coup-o; }

/* Le retard n'enchaine plus que les PLIS : trois plis de quatre secondes.
   A l'interieur d'un pli, c'est le mouvement qui echelonne les quatre cartes. */
.pw-demo__coup--pli0 { animation-delay: 0s; }
.pw-demo__coup--pli1 { animation-delay: 4s; }
.pw-demo__coup--pli2 { animation-delay: 8s; }

/* Chaque carte part de son siege, traverse le tapis a la vue, et se pose a
   quelques pixels du centre. Les quatre s'effacent ENSEMBLE, a 28 %, apres etre
   restees cote a cote : c'est ce moment-la qui donne un pli. */
@keyframes pw-coup-n {
    0%        { opacity: 0; transform: translate(-50%, calc(-50% - 120px)) rotate(-14deg); }
    2%        { opacity: 1; transform: translate(-50%, calc(-50% - 120px)) rotate(-14deg); }
    7%, 28%   { opacity: 1; transform: translate(-50%, calc(-50% - var(--pw-pli-y))) rotate(-4deg); }
    31%, 100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--pw-pli-y))) rotate(-4deg); }
}
@keyframes pw-coup-e {
    0%, 3%    { opacity: 0; transform: translate(calc(-50% + 160px), -50%) rotate(16deg); }
    5%        { opacity: 1; transform: translate(calc(-50% + 160px), -50%) rotate(16deg); }
    10%, 28%  { opacity: 1; transform: translate(calc(-50% + var(--pw-pli-x)), -50%) rotate(6deg); }
    31%, 100% { opacity: 0; transform: translate(calc(-50% + var(--pw-pli-x)), -50%) rotate(6deg); }
}
@keyframes pw-coup-s {
    0%, 6%    { opacity: 0; transform: translate(-50%, calc(-50% + 120px)) rotate(11deg); }
    8%        { opacity: 1; transform: translate(-50%, calc(-50% + 120px)) rotate(11deg); }
    13%, 28%  { opacity: 1; transform: translate(-50%, calc(-50% + var(--pw-pli-y))) rotate(3deg); }
    31%, 100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--pw-pli-y))) rotate(3deg); }
}
@keyframes pw-coup-o {
    0%, 9%    { opacity: 0; transform: translate(calc(-50% - 160px), -50%) rotate(-17deg); }
    11%       { opacity: 1; transform: translate(calc(-50% - 160px), -50%) rotate(-17deg); }
    16%, 28%  { opacity: 1; transform: translate(calc(-50% - var(--pw-pli-x)), -50%) rotate(-7deg); }
    31%, 100% { opacity: 0; transform: translate(calc(-50% - var(--pw-pli-x)), -50%) rotate(-7deg); }
}

/* La piste de lecture, en bas : elle se remplit et sa pastille avance. */
.pw-demo__piste {
    position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px;
    border-radius: 999px; background: rgba(255, 255, 255, .16);
}
.pw-demo__remplie {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 999px; background: var(--pw-gold);
    animation: pw-demo-remplit 12s linear infinite;
}
.pw-demo__pastille {
    position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; background: var(--pw-gold-2);
    box-shadow: 0 0 8px rgba(242, 206, 126, .9);
    animation: pw-demo-pastille 12s linear infinite;
}
@keyframes pw-demo-remplit { from { width: 0; } to { width: 100%; } }
@keyframes pw-demo-pastille { from { left: 0; } to { left: 100%; } }

/* ---- Apprentissage : LES DEUX MAINS, treize cartes chacune ---------
   Deux fois trois cartes ne montraient pas des mains mais des exemples. Une
   main de Leekha, c'est treize cartes en eventail : on la reconnait d'un coup
   d'oeil. Elles se chevauchent comme sur le tapis. */
.pw-demo__main {
    position: absolute; left: 6px; right: 6px;
    display: flex; justify-content: center; align-items: flex-start;
}
/* Les cartes de la scene sont absolues par defaut — ici elles sont en ligne. */
.pw-demo__main img { position: static; width: 30px; }
.pw-demo__main img + img { margin-left: -19px; }

.pw-demo__main--eleve { top: 28px; }
.pw-demo__main--moi { bottom: 28px; }

/* La carte designee : celle du milieu se souleve quand la pastille l'atteint. */
.pw-demo__main--eleve img:nth-of-type(7) {
    position: relative; z-index: 5;
    animation: pw-demo-leve 4.4s ease-in-out infinite;
}

/* La pastille part de la main du formateur et rejoint celle de l'eleve :
   c'est le geste du mode, montrer un coup a l'autre. */
.pw-demo__pointeur {
    position: absolute; left: 50%; margin-left: -5px; bottom: 44px;
    width: 10px; height: 10px; border-radius: 50%; z-index: 4;
    background: var(--pw-gold-2);
    box-shadow: 0 0 12px rgba(242, 206, 126, .95);
    animation: pw-demo-pointe 4.4s ease-in-out infinite;
}
@keyframes pw-demo-pointe {
    0%, 8%    { bottom: 44px; opacity: 0; }
    14%       { bottom: 44px; opacity: 1; }
    42%, 62%  { bottom: 98px; opacity: 1; }
    74%, 100% { bottom: 98px; opacity: 0; }
}
@keyframes pw-demo-leve {
    0%, 40%   { transform: translateY(0); filter: none; }
    52%, 70%  { transform: translateY(-10px); filter: brightness(1.18); }
    84%, 100% { transform: translateY(0); filter: none; }
}

/* Chaque main porte son nom, AU CENTRE : l'une au-dessus de celle de l'eleve,
   l'autre sous celle du formateur. On lit de haut en bas, dans l'ordre. Collees
   a gauche, elles obligeaient les deux rangs a se decaler et laissaient une
   gouttiere vide sur toute la hauteur. */
.pw-demo__etiq {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
    top: 7px;
    font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
    line-height: 13px;
    color: var(--pw-gold-2);
    background: rgba(6, 20, 14, .80);
    border: 1px solid rgba(242, 206, 126, .30);
    border-radius: 999px; padding: 1px 9px;
}
.pw-demo__etiq--prof { top: auto; bottom: 7px; }

/* Qui demande moins d'animation n'en recoit aucune : les scenes restent
   lisibles, simplement immobiles. */
@media (prefers-reduced-motion: reduce) {
    .pw-demo__coup,
    .pw-demo__remplie, .pw-demo__pastille,
    .pw-demo__pointeur,
    .pw-demo__main--eleve img { animation: none; }
    /* Le PREMIER pli reste forme, simplement immobile ; les suivants
       n'apparaissent pas, faute de mouvement pour les enchainer. */
    .pw-demo__coup { opacity: 0; }
    .pw-demo__coup--pli0 { opacity: 1; }
    .pw-demo__coup--n { transform: translate(-50%, calc(-50% - var(--pw-pli-y))) rotate(-4deg); }
    .pw-demo__coup--s { transform: translate(-50%, calc(-50% + var(--pw-pli-y))) rotate(3deg); }
    .pw-demo__coup--o { transform: translate(calc(-50% - var(--pw-pli-x)), -50%) rotate(-7deg); }
    .pw-demo__coup--e { transform: translate(calc(-50% + var(--pw-pli-x)), -50%) rotate(6deg); }
    .pw-demo__remplie { width: 62%; }
    .pw-demo__pastille { left: 62%; }
    .pw-demo__pointeur { bottom: 98px; opacity: 1; }
}

/* --- 12. Pied de page --------------------------------------------------- */
.pw-foot {
    flex: 0 0 auto; border-top: 1px solid var(--pw-line);
    padding: 22px 0; margin-top: 30px;
    color: var(--pw-text-3); font-size: .84rem;
}
.pw-foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* La mention du prestataire de paiement, au centre du pied de page : presente
   sans se mettre en avant. */
.pw-foot__by { display: inline-flex; align-items: baseline; gap: 5px; color: var(--pw-text-3); }
.pw-foot__by b { font-weight: 600; color: var(--pw-text-2, #c9d1cc); }

.pw-foot__suits { display: flex; gap: 11px; align-items: center; }
/* A 1rem elles se perdaient dans le pied de page : c est la signature du site,
   elle doit se voir. */
.pw-foot__suits span { font-size: 1.45rem; line-height: 1; opacity: .62; }
.pw-foot__suits span:nth-child(1), .pw-foot__suits span:nth-child(3) { color: var(--pw-red-2); }

/* --- 13. Adaptatif ------------------------------------------------------ */
@media (max-width: 1000px) {
    /* Le feutre ne disparait plus : il devient le FOND de la page. Masquer le
       panneau vert laissait un formulaire pose sur du noir, sans rien qui dise
       ou l'on est — et c'est sur telephone qu'une page doit se reconnaitre en
       un coup d'oeil. */
    .pw-auth {
        grid-template-columns: 1fr;
        background:
            radial-gradient(70% 34% at 50% 22%, rgba(255, 255, 255, .06), transparent 70%),
            radial-gradient(96% 46% at 12% 0%, var(--pw-felt-lite), transparent 60%),
            radial-gradient(84% 40% at 96% 100%, rgba(217, 169, 74, .26), transparent 62%),
            linear-gradient(168deg, var(--pw-felt) 0%, var(--pw-felt-2) 52%, #06251A 100%);
    }

    /* Le panneau de marque se reduit a l'essentiel, au-dessus du formulaire. */
    .pw-auth__brand {
        display: block;
        background: none;
        border-right: 0;
        padding: 26px 22px 0;
        min-height: 0;
    }
    .pw-auth__brand::before,
    .pw-auth__brand::after { display: none; }
    /* On reordonne : le titre, PUIS les cartes, puis les arguments et le
       bouton. Dans le balisage l eventail vient en dernier — il se retrouvait
       sous le bouton, coupe par le bas de l ecran. */
    .pw-auth__brandinner { max-width: none; display: flex; flex-direction: column; }
    .pw-auth__logo   { order: 1; }
    .pw-auth__title  { order: 2; }
    .pw-fan          { order: 3; }
    .pw-auth__points { order: 4; }
    .pw-demo         { order: 5; }
    .pw-auth__suits  { order: 6; }
    .pw-auth__open   { order: 7; }
    /* Les decorations du panneau tiennent aux deux colonnes du bureau, ou
       elles occupent les angles d'une moitie d'ecran vide. Ici ce panneau se
       reduit au formulaire : elles lui passaient dessus et cachaient les
       champs. La page a deja son eventail d'as en pleine largeur. */
    .pw-backs, .pw-auth__lampe { display: none; }

    .pw-auth__logo { margin-bottom: 22px; }
    .pw-auth__logo svg { width: 40px; height: 40px; }
    .pw-auth__logotext { font-size: 1.3rem; }
    .pw-auth__title { font-size: clamp(1.7rem, 7.6vw, 2.2rem); line-height: 1.14; margin-bottom: 14px; }

    /* L'EVENTAIL PORTE LA PAGE. C'est la seule image, et c'est ce qu'on vend :
       quatre vraies cartes, ouvertes en arc sous le titre. */
    /* L'EVENTAIL PORTE LA PAGE. C'est la premiere image, et c'est ce qu'on
       vend : quatre vraies cartes, ouvertes en arc sous le titre. */
    .pw-fan { display: block; position: relative; top: auto; right: auto;
              width: auto; height: 156px; margin: 4px 0 26px; }
    .pw-fan img { width: 96px; margin-left: -48px; border-radius: 7px; }
    .pw-fan img:nth-child(1) { transform: rotate(-22deg); }
    .pw-fan img:nth-child(2) { transform: rotate(-7.5deg); }
    .pw-fan img:nth-child(3) { transform: rotate(7.5deg); }
    .pw-fan img:nth-child(4) { transform: rotate(22deg); }

    /* Chaque argument separe par un filet, plutot que colle au suivant. */
    .pw-auth__points { gap: 0; }
    .pw-auth__points li {
        font-size: .92rem; line-height: 1.45;
        align-items: flex-start;
        padding: 11px 0;
        border-top: 1px solid rgba(255, 255, 255, .10);
    }
    .pw-auth__points li:first-child { border-top: 0; }
    .pw-auth__points svg { margin-top: .15em; }

    /* Deux vignettes cote a cote seraient illisibles sur 390 px : elles
       s'empilent, et la scene s'elargit d'autant. */
    .pw-demo { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
    /* La scene prend toute la largeur : cartes plus grandes, et les deux
       mains gagnent la hauteur qu'il leur faut. */
    .pw-demo__scene { height: 168px; }
    .pw-demo__scene img { width: 46px; }
    /* A EGALITE de specificite avec la ligne ci-dessus — « --lecon » est UNE
       seule classe — c est l ordre qui tranche, et la regle mobile venait
       apres. On redit donc la taille ici. */
    .pw-demo__main img { width: 34px; }
    .pw-demo__main img + img { margin-left: -22px; }
    .pw-demo__main--eleve { top: 30px; }
    .pw-demo__main--moi { bottom: 30px; }
    .pw-demo__main { height: 52px; }
    /* Le tapis est plus grand ici : la carte grandit un peu et le pli s'ouvre
       davantage, sinon les quatre cartes se perdent au milieu du vert. */
    .pw-demo__scene .pw-demo__coup { width: 34px; --pw-pli-y: 29px; --pw-pli-x: 33px; }
    @keyframes pw-demo-pointe {
        0%, 8%    { bottom: 48px; opacity: 0; }
        14%       { bottom: 48px; opacity: 1; }
        42%, 62%  { bottom: 106px; opacity: 1; }
        74%, 100% { bottom: 106px; opacity: 0; }
    }

    .pw-auth__suits { margin-top: 22px; gap: 22px; justify-content: center; }
    .pw-auth__suit { font-size: 1.7rem; }

    /* Un seul bouton a l'entree : le formulaire vient a la demande. */
    .pw-auth__open { display: flex; width: 100%; justify-content: center; margin-top: 24px; }
    .pw-auth.is-open .pw-auth__open { display: none; }

    /* Le formulaire garde sa forme de carte, sur le feutre. */
    .pw-auth__panel { display: none; background: none; min-height: 0; padding: 26px 24px 40px; }
    .pw-auth.is-open .pw-auth__panel { display: flex; }
    .pw-auth__form { background: linear-gradient(180deg, rgba(27, 36, 48, .96), rgba(21, 28, 39, .98)); }
    .pw-auth__mobilelogo { display: none; }   /* le logo est deja au-dessus */
}

@media (max-width: 860px) {
    .pw-wrap { padding: 0 16px; }
    .pw-nav__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 10px;
        background: rgba(255, 255, 255, .05); border: 1px solid var(--pw-line-2);
        color: var(--pw-text); cursor: pointer;
    }
    .pw-nav__burger svg { width: 19px; height: 19px; }
    .pw-nav__links {
        position: absolute; top: var(--pw-nav-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px;
        background: var(--pw-surface); border-bottom: 1px solid var(--pw-line-2);
        box-shadow: var(--pw-shadow); display: none;
    }
    .pw-nav__links[data-open="true"] { display: flex; }
    .pw-menu__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 14px; display: none; }
    .pw-menu[data-open="true"] .pw-menu__panel { display: block; }
    .pw-userchip__name { display: none; }
    .pw-pagehead h1 { font-size: 1.5rem; }
    .pw-seatpicker { grid-template-columns: 1fr; grid-template-areas: "n" "o" "c" "e" "s"; }
}

/* --- 14. Utilitaires ---------------------------------------------------- */
.pw-toolbar { max-width: 400px; margin-bottom: 24px; }
.pw-stack { display: flex; flex-direction: column; gap: 22px; }

/* Sur telephone, la liste des tables passe DEVANT le formulaire de creation.
   Celui-ci — nom de table, quatre menus de sieges, l'image des cartes — fait a
   lui seul plus d'un ecran d'iPhone : les onglets « My tables / Invitations /
   Finished games » tombaient sous la ligne de flottaison et personne ne
   descendait jusque-la. Sur ordinateur tout tient dans l'ecran : on n'y touche
   pas. */
@media (max-width: 700px) {
    /* Le pied de page se reduit a sa signature.
       Le copyright, la mention du jeu et celle du prestataire prennent trois
       lignes sur un telephone pour une information que personne ne cherche
       pendant une partie. Ne restent que les quatre enseignes, centrees au
       ras du bord et nettement plus grandes : la marque, sans le texte. */
    /* Elles etaient collees au bord bas, la ou le navigateur pose sa propre
       barre : on les remonte franchement. */
    .pw-foot { padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 40px); margin-top: 18px; }
    .pw-foot__inner { justify-content: center; gap: 0; }
    .pw-foot__inner > span:not(.pw-foot__suits),
    .pw-foot__by { display: none; }
    .pw-foot__suits { gap: 16px; }
    .pw-foot__suits span { font-size: 1.5rem; opacity: .85; }

    .pw-stack__list { order: -1; }
}
.pw-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pw-muted { color: var(--pw-text-3); }
/* Utilitaire de masquage : doit l'emporter sur le display des composants
   (le badge du clavardage est en display:grid, defini plus bas). */
.pw-hide { display: none !important; }
.pw-mt-l { margin-top: 34px; }
.pw-card__head h2 { font-size: 1.1rem; }
.pw-pagehead h2 { font-size: 1.35rem; }
.pw-hint { color: var(--pw-text-3); font-size: .86rem; }
.pw-prose { color: var(--pw-text-2); line-height: 1.7; }
.pw-prose p { margin: 0 0 14px; }
.pw-prose h3 { margin: 26px 0 10px; color: var(--pw-text); font-size: 1.05rem; }
.pw-prose code { background: rgba(255,255,255,.06); border: 1px solid var(--pw-line); border-radius: 6px; padding: 2px 6px; font-size: .88em; }

/* --- 15. Selecteur de langue -------------------------------------------- */
/* Meme comportement que MathsEtSciences (la langue active seule, un clic
   deplie les autres en ligne), couleurs du theme sombre. */
/* Les drapeaux se REPLIENT sur plusieurs lignes.
   Avec « nowrap » et « overflow-x: auto », les dix langues tenaient sur une
   seule ligne plus large que l'ecran : sur iPhone il fallait faire defiler
   lateralement pour en atteindre une. */
.gl-lp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; justify-content: flex-end; direction: ltr; }
.gl-lp::-webkit-scrollbar { display: none; }
.gl-lp-rest { display: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.gl-lp.open .gl-lp-rest { display: inline-flex; }
.gl-lchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border-radius: 9px; text-decoration: none;
    border: 1px solid transparent; background: transparent;
    color: var(--pw-text-2); font: 700 10.5px/1 var(--pw-font);
    white-space: nowrap; flex: 0 0 auto; cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.gl-lchip:hover { background: rgba(255, 255, 255, .07); color: var(--pw-text); }
.gl-lchip.on { background: rgba(255, 255, 255, .04); color: var(--pw-text); border-color: var(--pw-line-2); }
.gl-lchip.on:hover { border-color: rgba(217, 169, 74, .4); }
.gl-lflag { display: inline-flex; width: 19px; height: 13px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.gl-lflag svg { display: block; width: 100%; height: 100%; }
.gl-lcode { letter-spacing: .5px; }
.gl-lp-btn { border: 1px solid var(--pw-line-2); font-family: var(--pw-font); }
.gl-lp-car { width: 12px; height: 12px; opacity: .7; transition: transform .18s ease; }
.gl-lp.open .gl-lp-car { transform: rotate(180deg); }

/* Sur la page de connexion, le selecteur flotte en haut a droite du panneau. */
.pw-auth__lang { position: absolute; top: 22px; right: 26px; z-index: 5; }

/* Arabe : la coquille bascule en RTL, mais tout ce qui represente une TABLE
   reste en LTR. Les places sont absolues (Nord en haut, Est a droite) : les
   inverser mettrait l'Est a gauche, ce qui n'a aucun sens a une table de jeu.
   Le plateau, lui, a en plus une geometrie codee en dur dans Leekha.js. */
[dir="rtl"] .divMain,
[dir="rtl"] .divMainCards,
[dir="rtl"] .pw-gameboard,
[dir="rtl"] .pw-felt,
[dir="rtl"] .pw-seatpicker { direction: ltr; }
[dir="rtl"] .pw-nav__links { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .pw-brand { margin-right: 0; margin-left: 14px; }

/* --- 15b. Profil --------------------------------------------------------- */
.pw-avatar--xl { width: 128px; height: 128px; font-size: 2.6rem; }
.pw-profile { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pw-profile__preview { flex: 0 0 auto; }
.pw-profile__body { flex: 1 1 260px; min-width: 240px; }
.pw-profile__name { font-size: 1.15rem; font-weight: 650; margin-bottom: 6px; }
.pw-profile__body .pw-hint { display: block; margin: 0 0 18px; max-width: 52ch; }
.pw-alert--ok {
    background: rgba(20, 114, 79, .16); border-color: rgba(111, 224, 168, .35); color: #9FE7C4;
}
label.pw-btn { cursor: pointer; }

/* --- 16. Onglets de jeux ------------------------------------------------- */
.pw-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 26px; padding: 5px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--pw-line); border-radius: 14px;
    width: fit-content; max-width: 100%;
}
.pw-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 10px;
    color: var(--pw-text-2); font-size: .93rem; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
    transition: background .16s, color .16s, border-color .16s;
}
.pw-tab:hover { background: rgba(255, 255, 255, .05); color: var(--pw-text); }
.pw-tab.is-active {
    background: linear-gradient(160deg, var(--pw-felt-lite), var(--pw-felt));
    color: #EAF7F0; border-color: rgba(217, 169, 74, .28);
    box-shadow: 0 6px 16px rgba(12, 81, 56, .35);
}
.pw-tabs--sub { margin-bottom: 20px; }
.pw-tabs--sub .pw-tab { padding: 7px 15px; font-size: .88rem; }
.pw-tab__n {
    min-width: 20px; padding: 1px 7px; border-radius: 999px;
    font-size: .72rem; font-weight: 800;
    background: rgba(255, 255, 255, .10); color: inherit;
}
.pw-tab.is-active .pw-tab__n { background: rgba(0, 0, 0, .28); }

.pw-tab__soon {
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: var(--pw-gold-dim); color: var(--pw-gold-2);
    border: 1px solid rgba(217, 169, 74, .3);
}

/* --- 17. Clavardage ------------------------------------------------------ */
.pw-chatbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--pw-line-2);
    color: var(--pw-text-2); cursor: pointer;
    transition: color .16s, background .16s, border-color .16s;
}
.pw-chatbtn:hover { color: var(--pw-text); background: rgba(255, 255, 255, .08); }
.pw-chatbtn svg { width: 19px; height: 19px; }
.pw-chatbtn__badge {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
    display: grid; place-items: center; padding: 0 5px;
    border-radius: 999px; font-size: .68rem; font-weight: 800;
    background: linear-gradient(160deg, var(--pw-gold-2), var(--pw-gold)); color: #17120A;
    box-shadow: 0 0 0 2px var(--pw-bg);
}
.pw-soundbtn__off { display: none; }
.pw-soundbtn.is-off .pw-soundbtn__on { display: none; }
.pw-soundbtn.is-off .pw-soundbtn__off { display: block; }
.pw-soundbtn.is-off { color: var(--pw-text-3); }

@keyframes pw-ping { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.pw-chatbtn--ping { animation: pw-ping .5s ease 2; }

.pw-chat { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.pw-chat__scrim {
    position: absolute; inset: 0; background: rgba(4, 7, 11, .62);
    opacity: 0; transition: opacity .2s; backdrop-filter: blur(2px);
}
.pw-chat__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--pw-surface-2), var(--pw-surface));
    border-left: 1px solid var(--pw-line-2);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
    transform: translateX(102%); transition: transform .24s cubic-bezier(.2, .8, .3, 1);
    direction: ltr;
}
.pw-chat.is-open { pointer-events: auto; }
.pw-chat.is-open .pw-chat__scrim { opacity: 1; }
.pw-chat.is-open .pw-chat__panel { transform: translateX(0); }
[dir="rtl"] .pw-chat__panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--pw-line-2); transform: translateX(-102%); }
[dir="rtl"] .pw-chat.is-open .pw-chat__panel { transform: translateX(0); }

.pw-chat__head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px; border-bottom: 1px solid var(--pw-line); flex: 0 0 auto;
}
.pw-chat__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pw-chat__title > span:first-child { font-weight: 650; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-chat__sub { font-size: .78rem; color: var(--pw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-chat__sub:empty { display: none; }
.pw-chat__close, .pw-chat__back {
    display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, .04);
    color: var(--pw-text-2); cursor: pointer;
}
.pw-chat__close:hover, .pw-chat__back:hover { color: var(--pw-text); background: rgba(255, 255, 255, .09); }
.pw-chat__close svg, .pw-chat__back svg { width: 17px; height: 17px; }
.pw-chat__back { display: none; }
.pw-chat.is-thread .pw-chat__back { display: grid; }

.pw-chat__list { flex: 1 1 auto; overflow-y: auto; padding: 10px 10px 20px; }
.pw-chat.is-thread .pw-chat__list { display: none; }
.pw-chat__section { padding: 12px 10px 6px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pw-text-3); }
.pw-chat__hint { padding: 20px 12px; color: var(--pw-text-3); font-size: .88rem; text-align: center; }

/* --- Recherche d'un ami ou d'une table --------------------------------- */
.pw-chat__search {
    position: sticky;               /* elle reste visible quand la liste defile */
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 8px;
    padding: 8px 10px;
    border: 1px solid var(--pw-line);
    border-radius: 12px;
    background: var(--pw-surface-2, #1b2027);
}
.pw-chat__search svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--pw-text-3); }
.pw-chat__searchin {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: none; outline: none;
    color: var(--pw-text-1, #f2e9d8);
    font-family: inherit; font-size: .92rem;
}
.pw-chat__searchin::placeholder { color: var(--pw-text-3); }
/* Chrome ajoute sa propre croix aux champs de type search : on garde la notre. */
.pw-chat__searchin::-webkit-search-cancel-button { display: none; }
.pw-chat__searchclr {
    flex: 0 0 auto; display: inline-flex; padding: 2px;
    border: 0; background: none; color: var(--pw-text-3); cursor: pointer;
}
.pw-chat__searchclr svg { width: 15px; height: 15px; }
.pw-chat__searchclr:hover { color: var(--pw-text-1, #f2e9d8); }

/* --- Arborescence repliable -------------------------------------------- */
.pw-fold__head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 8px; border: 0; border-radius: 10px;
    background: none; color: var(--pw-text-3); cursor: pointer;
    font-family: inherit; text-align: left;
    transition: background .15s, color .15s;
}
.pw-fold__head:hover { background: rgba(255, 255, 255, .045); color: var(--pw-text-1, #f2e9d8); }
.pw-fold__caret {
    width: 14px; height: 14px; flex: 0 0 14px;
    transform: rotate(90deg);       /* deplie : le chevron pointe vers le bas */
    transition: transform .16s ease;
}
.pw-fold.is-replie > .pw-fold__head .pw-fold__caret { transform: rotate(0deg); }
.pw-fold__nom { flex: 1 1 auto; min-width: 0; }
.pw-fold__badge {
    flex: 0 0 auto; min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: var(--pw-gold, #d4a935); color: #17120A;
    font-size: .68rem; font-weight: 700; text-align: center;
}

/* Premier niveau : Tables, puis Friends. */
.pw-fold--n1 > .pw-fold__head {
    font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
}
/* Second niveau : un jeu. Un filet a gauche marque l'appartenance, comme dans
   un arbre de fichiers — les tables dessous lui appartiennent. */
.pw-fold--n2 { margin-left: 10px; border-left: 1px solid var(--pw-line); padding-left: 6px; }
.pw-fold--n2 > .pw-fold__head { font-size: .82rem; letter-spacing: .04em; color: var(--pw-text-2, #c9d1cc); }
.pw-fold--n2 > .pw-fold__corps { padding-left: 4px; }

.pw-conv {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px; border-radius: 12px; border: 1px solid transparent;
    background: none; color: inherit; cursor: pointer; text-align: left;
    font-family: inherit; transition: background .15s, border-color .15s;
}
.pw-conv:hover { background: rgba(255, 255, 255, .05); border-color: var(--pw-line); }

/* Assis a votre table en ce moment : un point vert sur l'avatar, comme une
   presence. Ils sont deja remontes en tete de liste ; le point dit pourquoi. */
.pw-conv.is-attable .pw-conv__av::after {
    content: "";
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--pw-green-2, #2ea36a);
    border: 2px solid var(--pw-surface-1, #12171d);
}
.pw-conv.is-attable .pw-conv__av { position: relative; }
.pw-conv.is-attable .pw-conv__name { color: var(--pw-gold-2, #e8c25a); }
.pw-conv__av { width: 38px; height: 38px; font-size: .9rem; }
.pw-conv__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pw-conv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pw-conv__name { font-weight: 620; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-conv__time { font-size: .7rem; color: var(--pw-text-3); flex: 0 0 auto; }
.pw-conv__last { font-size: .82rem; color: var(--pw-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-conv__badge {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 999px;
    font-size: .7rem; font-weight: 800;
    background: linear-gradient(160deg, var(--pw-gold-2), var(--pw-gold)); color: #17120A;
}

.pw-chat__thread { flex: 1 1 auto; display: none; flex-direction: column; min-height: 0; }
.pw-chat.is-thread .pw-chat__thread { display: flex; }
.pw-chat__messages { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.pw-bulle {
    align-self: flex-start; max-width: 82%;
    padding: 9px 13px; border-radius: 14px 14px 14px 4px;
    background: var(--pw-surface-3); border: 1px solid var(--pw-line);
}
.pw-bulle--moi {
    align-self: flex-end; border-radius: 14px 14px 4px 14px;
    background: linear-gradient(160deg, var(--pw-felt-lite), var(--pw-felt));
    border-color: rgba(255, 255, 255, .12); color: #EAF7F0;
}
.pw-bulle__auteur { font-size: .72rem; font-weight: 700; color: var(--pw-gold-2); margin-bottom: 3px; }
.pw-bulle__texte { font-size: .92rem; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.pw-bulle__heure { font-size: .66rem; color: var(--pw-text-3); margin-top: 4px; text-align: right; }
.pw-bulle--moi .pw-bulle__heure { color: rgba(234, 247, 240, .6); }

.pw-invite {
    align-self: stretch; padding: 14px;
    border-radius: 14px; border: 1px solid rgba(217, 169, 74, .34);
    background: linear-gradient(160deg, rgba(217, 169, 74, .14), rgba(217, 169, 74, .05));
}
.pw-invite__head { display: flex; align-items: center; gap: 10px; font-size: .9rem; margin-bottom: 12px; }
.pw-invite__av { width: 32px; height: 32px; font-size: .8rem; flex: 0 0 32px; }
.pw-invite__time { font-size: .66rem; color: var(--pw-text-3); margin-top: 8px; text-align: right; }

/* Invitation depassee par une plus recente : elle reste lisible — c est
   l historique du fil — mais elle s efface et son bouton devient inerte,
   pour qu on ne rejoigne pas par megarde une table deja fermee. */
.pw-invite--perimee { opacity: .48; filter: grayscale(1); }
.pw-invite--perimee .pw-invite__go {
    pointer-events: none;
    cursor: default;
    background: var(--pw-surface-3, #2a2f36);
    border-color: transparent;
    color: var(--pw-text-3);
    box-shadow: none;
    text-decoration: line-through;
}
.pw-invite__perime {
    display: block;
    margin-top: 6px;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pw-text-3);
    text-align: center;
}

.pw-chat__composer {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
    padding: 12px; border-top: 1px solid var(--pw-line);
}
.pw-chat__composer .pw-input { flex: 1 1 auto; padding: 10px 13px; }
.pw-chat__send { width: 42px; height: 42px; padding: 0; flex: 0 0 42px; border-radius: 11px; }
.pw-chat__send svg { width: 18px; height: 18px; }

@media (max-width: 520px) {
    .pw-chat__panel { width: 100%; border-left: 0; }
}

/* ------------------------------------------------------------------
   Liste des parties terminees (onglet « Finished games »)
   ------------------------------------------------------------------ */
.pw-finished { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.pw-finished__item {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .7rem .9rem; border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
}
.pw-finished__item:hover { border-color: rgba(232,194,90,.35); }

.pw-finished__info { display: grid; gap: .15rem; min-width: 0; }
.pw-finished__joueurs { font-weight: 600; }
.pw-finished__date { font-size: .82rem; opacity: .6; font-variant-numeric: tabular-nums; }

.pw-finished__scores { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.pw-finished__score {
    font-size: .82rem; font-variant-numeric: tabular-nums;
    padding: .12rem .45rem; border-radius: 999px;
    background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.10);
}

/* Sur mobile le bouton passe a la ligne : les scores ne doivent pas le pousser
   hors de l'ecran. */
@media (max-width: 620px) {
    /* Deux colonnes : l identite et les scores empiles a gauche, le bouton a
       droite et centre. En pleine largeur sur sa propre ligne, il faisait des
       fiches de 159 px pour trois lignes de texte. */
    .pw-finished__item {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "info bouton" "scores bouton";
        align-items: center;
        gap: .35rem .7rem;
    }
    .pw-finished__info { grid-area: info; }
    .pw-finished__scores { grid-area: scores; margin-left: 0; }
    .pw-finished__item > .pw-btn { grid-area: bouton; width: auto; align-self: center; }
}


/* ------------------------------------------------------------------
   Bulle de clavardage flottante
   Elle vivait dans la barre de navigation, donc repliee dans le menu
   hamburger sur mobile : on ne la trouvait plus. Fixe en bas a droite,
   elle est au meme endroit sur tous les ecrans.
   ------------------------------------------------------------------ */
.pw-chatfab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--pw-green, #16794f);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.pw-chatfab:hover { transform: translateY(-2px); background: #1c8f5e; }
.pw-chatfab svg { width: 23px; height: 23px; }

.pw-chatfab__badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: #e8c25a; color: #12201a;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pw-chatfab--ping { animation: pw-ping .5s ease 2; }

/* Le respect de la zone sure de l'iPhone : sans cela le bouton chevauche la
   barre d'accueil. */
@supports (padding: max(0px)) {
    .pw-chatfab {
        right: max(18px, env(safe-area-inset-right));
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
    }
}

/* Sur la page de revisionnage la bulle descend au ras du bord : la barre de
   transport occupe le bas de l ecran, et une bulle qui flotte au-dessus d elle
   donne l impression de la recouvrir. */
body.pw-rejeu-plein .pw-chatfab {
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    width: 46px; height: 46px;
    opacity: .85;
}

/* Le selecteur de langue reste visible en haut a droite, hors du menu replie. */
.pw-nav__inner > .gl-lp { margin-left: auto; flex: 0 1 auto; }

@media (max-width: 860px) {
    /* Deplie, la liste passe sous la barre et occupe toute la largeur :
       plus rien a faire defiler. */
    .pw-nav__inner > .gl-lp.open {
        position: absolute; top: var(--pw-nav-h); left: 0; right: 0;
        margin: 0; padding: 10px;
        background: var(--pw-surface); border-bottom: 1px solid var(--pw-line-2);
        box-shadow: var(--pw-shadow);
        justify-content: center;
        z-index: 60;
    }
    .pw-chatfab { width: 48px; height: 48px; }
}