/* =====================================================================================================================
   Lobbik — refonte TÉLÉPHONE (≤ 760 px) et TABLETTE (761–1199 px, portrait et paysage), 27/09/2026.
   Maxime : « Refonds totalement le site pour mobile et tablette. »
   - Chargée APRÈS app.css et salle-fx.css (index.html). Tout est sous @media (max-width:1199px) : le PC (≥ 1200 px) ne voit
     rien de ce fichier, SAUF le panneau « Amis · Clan · Messages », redessiné pour toutes les tailles (Kripy, 27/09/2026 :
     « redessine la pastille de droite, fais-la encore mieux ») et la pastille des appels de l'espace Équipe.
   - Règles de la maison : bulles mates (aucun trait collé aux bords, pas de brillant), identité Volt (jetons --id*),
     fond uni, JAMAIS de :has() (project_lobbik_sans_has), cibles tactiles ≥ 44 px, champs à 16 px (pas de zoom iOS),
     encoches (safe-area), aucun défilement de côté.
   - Retour arrière : retirer la ligne mobile.css d'index.html (sauvegarde : /srv/lobbik/sauvegardes-code/mobile-20260927/).
   ===================================================================================================================== */

/* PC : le voile de la feuille latérale (tablette) n'existe pas au-dessus de 1199 px */
.sv-voile{display:none}
/* Espace Équipe (#/equipe, equipe.js) : la pastille du nombre d'appels sur l'onglet « Appels » n'avait aucune taille (toutes largeurs) */
.eq-onglets .dock-n{position:static;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-style:normal;font-size:11px;font-weight:800;line-height:1;background:var(--id,#c6f500);color:var(--id-ink,#0b0f07)}
.eq-onglets button[aria-selected="true"] .dock-n{background:var(--id-ink,#0b0f07);color:var(--id,#c6f500)}

/* ======================== Panneau « Amis · Clan · Messages » — TOUTES TAILLES (27/09/2026) ===========================
   Kripy : « redessine la pastille de droite Amis · Clan · Messages, fais-la encore mieux ». Même logique (messages privés dans
   le panneau, aucun son) ; bulle mate carbone, Volt (#c6f500) pour « en ligne » et les onglets, cyan pour « en jeu » et les
   messages non lus ; une liste à la fois (onglets), en ligne d'abord. Replié (PC) : pastille avec les visages présents.
   Sur téléphone/tablette la pastille repliée laisse sa place au bouton de l'en-tête (#amisTete). Aucune :has(). */
html body .suivis.amis{background:var(--panel,#202225) !important;background-image:none !important;border:1px solid rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;color:var(--txt)}
html[data-theme="clair"] body .suivis.amis{background:#fff !important;border-color:rgba(0,0,0,.08) !important}
@keyframes svPop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes svOuvrir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ html body .suivis.amis,html body .suivis.amis.ouvert{animation:none !important} }

/* --- replié : la pastille (PC) --- */
html body .suivis.amis:not(.ouvert){width:auto !important;max-width:none !important;border-radius:999px !important;overflow:visible;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);animation:svPop .18s ease-out}
html body .suivis.amis:not(.ouvert) > .sv-tete{min-height:50px;padding:6px 16px 6px 7px;gap:10px;border-radius:999px}
html body .suivis.amis:not(.ouvert) > .sv-tete:not(.avec-avs){padding-left:16px}
html body .suivis.amis:not(.ouvert) > .sv-tete.avec-avs::before,html body .suivis.amis:not(.ouvert) > .sv-tete .sv-pt{display:none}
html body .suivis.amis:not(.ouvert) > .sv-tete:hover{background:rgba(255,255,255,.04)}
.sv-avs{display:none}
html body .suivis.amis:not(.ouvert) .sv-avs{display:inline-flex;flex:none;align-items:center}
.sv-av1{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--key,#303236);
  box-shadow:0 0 0 2.5px var(--panel,#202225)}
.sv-av1 + .sv-av1{margin-left:-11px}
.sv-av1 .av{width:100% !important;height:100% !important;border-radius:50% !important;border:0 !important;font-size:13px !important;color:var(--txt) !important}
html body .suivis.amis:not(.ouvert) .sv-c{font-family:inherit;font-size:13.5px;color:var(--muted);white-space:nowrap}
html body .suivis.amis:not(.ouvert) .sv-c u{display:inline;text-decoration:none}
html body .suivis.amis:not(.ouvert) .sv-c em{font-style:normal;font-weight:800;color:var(--id,#c6f500);font-variant-numeric:tabular-nums}
/* pastilles : demandes en attente (Volt), messages non lus (cyan) */
.suivis.amis .sv-tete .am-n,.sv-mpn{display:inline-grid !important;place-items:center;min-width:22px;height:22px;padding:0 7px;margin:0;border-radius:999px;
  font-style:normal;font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.suivis.amis .sv-tete .am-n{background:var(--id,#c6f500);color:var(--id-ink,#0b0d00)}
.sv-mpn{background:var(--cyan,#00e5ff);color:#04262c}

/* --- ouvert : une bulle mate, en-tête, onglets, une liste --- */
html body .suivis.amis.ouvert{display:flex !important;flex-direction:column;overflow:hidden;border-radius:26px !important;
  box-shadow:0 34px 80px -24px rgba(0,0,0,.9);animation:svOuvrir .2s ease-out}
html body .suivis.amis.ouvert > *{flex:none}
html body .suivis.amis.ouvert > .sv-tete{min-height:56px;padding:10px 10px 8px 18px;gap:10px;cursor:pointer}
html body .suivis.amis.ouvert > .sv-tete .sv-pt{display:none}
html body .suivis.amis.ouvert > .sv-tete b{flex:1;min-width:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .suivis.amis.ouvert > .sv-tete .sv-c{font-family:inherit;font-size:12.5px;color:var(--dim)}
html body .suivis.amis.ouvert > .sv-tete .sv-c em{font-style:normal;font-weight:800;color:var(--id,#c6f500)}
html body .suivis.amis.ouvert > .sv-tete .sv-c u{text-decoration:none}
html body .suivis.amis.ouvert > .sv-tete > svg{display:none}
html body .suivis.amis.ouvert > .sv-tete::after{content:'×';flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:24px;line-height:1;font-weight:400;color:var(--txt);background:var(--key,#303236)}
html body .suivis.amis.ouvert > .sv-tete:hover::after{background:var(--key2,#3a3c41)}
html body .suivis.amis.ouvert .am-cloche{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;color:var(--dim)}
html body .suivis.amis.ouvert .am-cloche:hover{background:var(--key,#303236);color:var(--txt)}
/* réglages de la cloche et invitations : des cartes, jamais plus d'un tiers du panneau */
html body .suivis.amis.ouvert > .am-regl{margin:0 12px 10px;padding:10px 12px;border-radius:16px;background:var(--panel2,#282a2e)}
html body .suivis.amis.ouvert > .sv-inv{max-height:34%;overflow-y:auto;overscroll-behavior:contain;margin:0 12px 10px;padding:0;border:0;display:flex;flex-direction:column;gap:8px}
html body .suivis.amis.ouvert > .sv-inv .inv{margin:0;border-radius:18px;background:rgba(var(--id-rgb,198,245,0),.07);border:1px solid rgba(var(--id-rgb,198,245,0),.28)}
/* onglets : pilule segmentée */
.am-onglets{display:none}
html body .suivis.amis.ouvert .am-onglets{display:flex;gap:4px;margin:0 12px 8px;padding:4px;border-radius:999px;background:var(--bg-2,#101113)}
.am-onglets button{flex:1 1 auto;min-width:0;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;
  border:0;border-radius:999px;background:none;color:var(--dim);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-onglets button:hover{color:var(--txt)}
.am-onglets button i{font-style:normal;font-variant-numeric:tabular-nums;font-size:12px;opacity:.75}
.am-onglets button.on{background:var(--id,#c6f500);color:var(--id-ink,#0b0d00)}
.am-onglets button.on i{opacity:1}
.am-onglets button .am-n{margin-left:0;min-width:19px;height:19px;padding:0 6px;font-size:11px;opacity:1;background:var(--cyan,#00e5ff);color:#04262c}
/* la liste choisie, seule, qui défile */
html body .suivis.amis.ouvert > .am-deux,html body .suivis.amis.ouvert > .am-mp{flex:1 1 auto !important;min-height:0;height:auto;overflow-y:auto;
  overscroll-behavior:contain;display:block !important;border:0 !important;padding:2px 8px calc(10px + env(safe-area-inset-bottom))}
html body .suivis.amis.ouvert > .am-mp{display:flex !important;flex-direction:column;padding:0 12px 12px}
.am-deux.vue-amis > .am-col:not(.am-c-amis),.am-deux.vue-clan > .am-col:not(.am-c-clan),.am-deux.vue-messages > .am-col:not(.am-msg){display:none}
html body .suivis.amis.ouvert .am-col{padding:0;border:0 !important}
html body .suivis.amis.ouvert .am-msg{padding-left:0;border-left:0}
html body .suivis.amis.ouvert .am-t{padding:6px 10px 6px;font-size:11px;letter-spacing:.1em;color:var(--dim)}
html body .suivis.amis.ouvert .am-c-amis .am-t,html body .suivis.amis.ouvert .am-msg .am-t{display:none}   /* l'onglet dit déjà ce que c'est */
html body .suivis.amis.ouvert .am-liste{max-height:none !important;overflow:visible;display:flex;flex-direction:column;gap:2px}
html body .suivis.amis.ouvert .am-sep{margin:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
html body .suivis.amis.ouvert .am-sep i{font-style:normal;opacity:.7;margin-left:4px}
html body .suivis.amis.ouvert .am-vide{padding:18px 12px;font-size:14px;line-height:1.55;color:var(--dim);text-align:center}
/* une ligne : visage rond + point d'état, nom, état ; boutons ronds à droite (au survol sur PC, toujours au doigt) */
html body .suivis.amis.ouvert .am-l{min-height:54px;padding:5px 6px;border-radius:16px;background:none !important;transition:background .12s}
html body .suivis.amis.ouvert .am-l:hover{background:rgba(255,255,255,.05) !important}
html body .suivis.amis.ouvert .am-l.hors_ligne{opacity:.5}
html body .suivis.amis.ouvert .am-qui{padding:3px 88px 3px 2px;gap:12px}
html body .suivis.amis.ouvert .am-qui .sv-av{width:40px;height:40px}
html body .suivis.amis.ouvert .am-qui .sv-av .av,html body .suivis.amis.ouvert .am-l .sa-av .av{width:40px !important;height:40px !important;border-radius:50% !important;
  border:0 !important;font-size:14px !important;color:var(--txt) !important;background:var(--key,#303236)}
html body .suivis.amis.ouvert .am-qui .sv-av .sv-pt{width:12px;height:12px;right:-1px;bottom:-1px;box-shadow:0 0 0 3px var(--panel,#202225);animation:none}
html body .suivis.amis.ouvert .sv-pt.en_ligne{background:var(--id,#c6f500)}
html body .suivis.amis.ouvert .sv-pt.aoe4{background:var(--cyan,#00e5ff)}
html body .suivis.amis.ouvert .sv-pt.hors_ligne{background:#5d6062}
html body .suivis.amis.ouvert .am-qui .sv-n b,html body .suivis.amis.ouvert .am-l .bu-n b{font-size:14.5px;font-weight:650}
html body .suivis.amis.ouvert .am-qui .sv-n b em{color:var(--id,#c6f500);font-size:9.5px;letter-spacing:.06em;margin-left:4px}
html body .suivis.amis.ouvert .am-qui .sv-n i,html body .suivis.amis.ouvert .am-l .bu-n i{font-size:12.5px;color:var(--dim)}
html body .suivis.amis.ouvert .am-l.en_ligne .sv-n i{color:var(--id,#c6f500)}
html body .suivis.amis.ouvert .am-l.aoe4 .sv-n i{color:var(--cyan,#00e5ff)}
html body .suivis.amis.ouvert .am-act{right:8px;padding:0;gap:6px;background:none}
html body .suivis.amis.ouvert .am-act button{width:36px;height:36px;border-radius:50% !important;background:var(--key,#303236) !important;border:0 !important;color:var(--txt) !important}
html body .suivis.amis.ouvert .am-act button:hover{background:var(--id,#c6f500) !important;color:var(--id-ink,#0b0d00) !important}
html body .suivis.amis.ouvert .am-act button svg,html body .suivis.amis.ouvert .am-act button .gl{width:17px !important;height:17px !important;color:inherit;stroke:currentColor}
/* messages : dernière phrase, pastille cyan des non-lus */
html body .suivis.amis.ouvert .am-msg .am-l{gap:12px;padding:6px 10px}
html body .suivis.amis.ouvert .am-msg .bu-n{min-width:0;flex:1}
html body .suivis.amis.ouvert .bu-b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-style:normal;
  font-size:12px;font-weight:800;background:var(--cyan,#00e5ff);color:#04262c}
/* conversation privée ouverte */
html body .suivis.amis.ouvert .am-mp-t{gap:10px;margin:0 0 8px;padding:2px 0}
html body .suivis.amis.ouvert .am-retour{min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--key,#303236);color:var(--txt);font-size:13.5px}
html body .suivis.amis.ouvert .am-fiche{min-height:36px;display:inline-flex;align-items:center;border-radius:999px;border:0;background:var(--key,#303236)}
html body .suivis.amis.ouvert .am-mp-c .ce-log{min-height:160px;border-radius:16px}
/* PC : la bulle ouverte en bas à droite, 400 px, hauteur fixe (les onglets ne la font pas sauter) */
@media (min-width:1200px){
  html body .suivis.amis.ouvert{left:auto !important;top:auto !important;right:18px !important;bottom:18px !important;
    width:min(400px,calc(100vw - 36px)) !important;max-width:none !important;height:min(620px,calc(100vh - 120px))}
  html body .suivis.amis:not(.ouvert){right:18px !important;bottom:18px !important}
  html body .suivis.amis.ouvert .am-act{display:none}
  html body .suivis.amis.ouvert .am-l:hover .am-act,html body .suivis.amis.ouvert .am-l:focus-within .am-act{display:flex}
  html body .suivis.amis.ouvert .am-qui{padding-right:6px}
  html body .suivis.amis.ouvert .am-act{padding:3px;border-radius:999px;background:var(--panel,#202225)}   /* posés sur la fin de la ligne au survol */
}

/* ------------------------------------------------------------------ commun téléphone + tablette ------------------ */
@media (max-width:1199px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent}
  a,button,[role=button],label,summary{touch-action:manipulation}
  /* 16 px dans les champs : sous 16 px, iOS zoome la page à chaque saisie */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px !important}

  /* la zone qui défile tient dans l'écran VISIBLE (100dvh : barre de Safari comprise), en-tête déduit */
  main{height:calc(100vh - var(--tete-h,76px));height:calc(100dvh - var(--tete-h,76px))}

  /* --- bouton « Amis » dans l'en-tête (le téléphone l'avait déjà ; la tablette le prend : plus de pastille flottante) --- */
  header.top .amis-tete{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:48px;padding:0 12px;
    margin-left:auto;position:relative;flex:none;border-radius:999px;border:1px solid var(--line2,rgba(255,255,255,.12));
    background:var(--key,rgba(255,255,255,.07));color:var(--txt);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  header.top .amis-tete svg{width:19px;height:19px}
  header.top .amis-tete em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted)}
  header.top .amis-tete em.vu{color:var(--id,#c6f500)}
  header.top .amis-tete.on{border-color:var(--id,#c6f500);background:rgba(var(--id-rgb,198,245,0),.14)}
  /* la pastille des demandes était coupée (6 px de large, sans taille) : une vraie pastille ronde */
  header.top .amis-tete .dock-n{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
    border-radius:999px;font-style:normal;font-size:11px;font-weight:800;line-height:1;background:var(--id,#c6f500);color:var(--id-ink,#0b0f07);
    box-shadow:0 0 0 2px var(--panel,#18191b)}
  header.top .amis-tete ~ .userbox{margin-left:0}
  header.top .amis-tete .sv-mpn{position:absolute;bottom:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;font-size:11px;box-shadow:0 0 0 2px var(--panel,#18191b)}

  /* --- feuille « Amis · Clan · Messages » au doigt : la pastille repliée disparaît (bouton de l'en-tête), boutons de 44 px --- */
  .suivis.amis:not(.ouvert),body.route-parties .suivis.amis:not(.ouvert){display:none !important}
  html body .suivis.amis.ouvert{z-index:880}
  html body .suivis.amis.ouvert > .sv-tete{min-height:60px}
  html body .suivis.amis.ouvert > .sv-tete::after,html body .suivis.amis.ouvert .am-cloche{width:44px;height:44px}
  html body .suivis.amis.ouvert .am-onglets button{min-height:42px;font-size:14.5px}
  html body .suivis.amis.ouvert .am-l{min-height:58px}
  html body .suivis.amis.ouvert .am-act{display:flex}
  html body .suivis.amis.ouvert .am-act button{width:44px;height:44px}
  html body .suivis.amis.ouvert .am-qui{padding-right:100px}   /* place des deux boutons ronds (message, inviter) */
  html body .suivis.amis.ouvert .inv-b,html body .suivis.amis.ouvert .am-retour,html body .suivis.amis.ouvert .am-fiche{min-height:44px}

  /* --- langue : la liste ouverte ne s'étale plus dans l'en-tête (elle sortait de l'écran à droite) : une pile de pastilles
         qui descend sous le bouton, sans décaler les autres boutons --- */
  header.top .langsel.ouvert{flex-direction:column;align-items:stretch;height:auto;max-height:52px;overflow:visible;position:relative;z-index:3;gap:4px}
  header.top .langsel.ouvert button{order:1;flex:none;min-height:44px;justify-content:center;background:var(--panel2,#1f2022);
    border:1px solid rgba(255,255,255,.1);border-radius:999px;box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
  header.top .langsel.ouvert button.on{order:0;background:var(--id,#c6f500);color:var(--id-ink,#0b0f07);border-color:transparent;box-shadow:none}
  /* menus (compte, pseudo du chat) : une ligne = un doigt */
  .me-menu a,.cmenu button,.cmenu a{min-height:44px;display:flex !important;align-items:center;font-size:15px}
  .me-menu{width:min(280px,calc(100vw - 16px)) !important}

  /* --- chat intégré (accueil, Jouer, clan, échecs…) trop étroit : la liste des connectés passe derrière son bouton ---
     Avant : à 900-1199 px la liste (200 px) restait à côté du journal ; dans une colonne de 380 px les messages tombaient
     à une lettre par ligne (accueil en tablette paysage). Requête de conteneur : on décide sur la LARGEUR DU CHAT. */
  .ce-compact{container:ce / inline-size}
}
@container ce (max-width:620px){
  .ce-compact .ce-corps{display:block !important;position:relative}
  .ce-compact .ce-gens{display:none !important}
  html .ce-compact.gens-ouverts .ce-gens{display:flex !important;flex-direction:column;gap:8px;padding:10px 12px !important;position:absolute !important;
    inset:0 !important;height:auto !important;max-height:none !important;min-height:0 !important;z-index:5;
    background:var(--panel,#18191b) !important;background-image:none !important;border:1px solid var(--line2,rgba(255,255,255,.14)) !important;
    border-radius:16px !important;box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .ce-compact .ce-gens-h{display:flex;align-items:center;gap:8px;flex:none}
  .ce-compact .ce-gens-h b{font-size:15px;font-weight:700}
  .ce-compact .ce-gens-x{margin-left:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:inherit;font-size:22px;
    line-height:1;color:var(--txt);background:var(--key,rgba(255,255,255,.08));border:0}
  .ce-compact .ce-gens #ceListe{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .ce-compact .ce-gens .ce-g{padding:9px 6px !important;font-size:14px !important}
  .ce-compact .ce-gens-b{display:inline-flex !important;align-items:center;gap:6px;min-height:36px;padding:0 14px}
  .ce-compact.gens-ouverts .ce-gens-b{color:var(--txt);border-color:var(--id,#c6f500)}
}

/* ------------------------------------------------------------------ téléphone (≤ 760 px) -------------------------- */
@media (max-width:760px){
  :root{--tete-h:calc(68px + max(6px,env(safe-area-inset-top)))}   /* marge haute + bulle de 64 px + 4 px */
  /* en-tête : une bulle d'une ligne, boutons de 44 px, détachée des bords et des encoches */
  header.top,html:is([data-theme="communaute"],[data-theme="clair"]) header.top{top:max(6px,env(safe-area-inset-top));
    margin:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));border-radius:22px}
  header.top .wrap,.top .wrap{min-height:56px;gap:6px;padding:6px 6px 6px 8px;flex-wrap:nowrap !important}
  header.top .brand{flex:none}
  header.top .brand .mark{width:40px;height:40px}
  header.top .brand .mark .mark-svg{width:40px;height:40px}
  header.top .jeu-choix{height:44px;padding:4px 8px 4px 4px;flex:none}
  header.top .jeu-choix{min-width:0;flex:0 1 auto}
  header.top .jeu-choix img{height:30px;width:auto;max-width:62px;object-fit:cover;border-radius:8px}
  header.top .jeu-choix .jeu-general-mos{height:30px}
  header.top .spot-trigger{width:44px;height:44px;flex:none}
  header.top .spot-trigger svg{width:18px;height:18px}
  header.top .me-av{height:44px;min-width:44px;padding:3px;justify-content:center}
  header.top .me-av .avb,header.top .me-av img,header.top .me-av .av{width:36px;height:36px}
  header.top .me-av > svg{display:none}
  header.top .langsel button{height:44px;min-width:48px;font-size:13px;font-weight:700}
  header.top .btn-steam{height:44px;padding:0 14px;display:inline-flex;align-items:center}
  header.top .userbox{flex:none}

  /* dock du bas : libellés lisibles, boutons plus hauts, encoche respectée */
  html body .dock{bottom:max(8px,calc(env(safe-area-inset-bottom) + 4px));padding:6px 8px;border-radius:26px}
  html body .dock a{width:60px;min-height:52px;padding:6px 0 5px;font-size:11px;font-weight:600;gap:3px;border-radius:18px}
  html body .dock a .ic{width:30px;height:30px;border-radius:10px}
  html body .dock a .ic svg{width:18px;height:18px}
  html body .dock a.dock-chat{width:66px}
  html body .dock a.dock-chat .ic{width:50px;height:50px;margin-top:-24px}
  html body .dock a.dock-chat .ic svg{width:22px;height:22px}
  html body .dock a.on{color:var(--txt)}

  /* le bas de chaque page remonte au-dessus du dock (avant : les 60 derniers pixels restaient cachés dessous) */
  main{padding-bottom:calc(100px + env(safe-area-inset-bottom)) !important}
  body.route-chat main{padding-bottom:0 !important}

  /* feuille Amis/Clan/Messages : entre l'en-tête et le dock, détachée des bords */
  html body .suivis.amis.ouvert{left:8px !important;right:8px !important;width:auto !important;max-width:none !important;
    top:calc(var(--tete-h) + 4px) !important;bottom:max(calc(env(safe-area-inset-bottom) + 84px),calc(var(--clavier,0px) + 8px)) !important}
}
@media (max-width:374px){
  header.top .wrap,.top .wrap{gap:4px;padding-left:6px}
  header.top .amis-tete{padding:0 9px;gap:4px}
  header.top .jeu-choix .jeu-general-mos{width:44px}
  html body .dock a{width:54px}
}
@media (max-width:340px){ header.top .amis-tete em{display:none} header.top .langsel{display:none} }

/* ------------------------------------------------------------------ tablette (761–1199 px) ------------------------ */
@media (min-width:761px) and (max-width:1199px){
  :root{--tete-h:calc(66px + max(10px,env(safe-area-inset-top)))}  /* marge haute + bulle de 62 px + 4 px */
  header.top,html:is([data-theme="communaute"],[data-theme="clair"]) header.top{top:max(10px,env(safe-area-inset-top));margin-top:max(10px,env(safe-area-inset-top))}
  header.top .spot-trigger,header.top .me-av,header.top .jeu-choix,header.top .langsel button,header.top .btn-steam{min-height:44px}
  header.top .me-av .avb,header.top .me-av img,header.top .me-av .av{width:34px;height:34px}
  main{padding-bottom:24px}
  /* rail : icônes et libellés au doigt */
  html body .dock a{min-height:54px;font-size:11px;font-weight:600}
  html body .dock a .ic{width:32px;height:32px}
  html body .dock a .ic svg{width:18px;height:18px}
  /* feuille latérale à droite, sous l'en-tête, avec un voile : un toucher à côté la referme */
  html body .suivis.amis.ouvert{left:auto !important;right:max(14px,env(safe-area-inset-right)) !important;top:calc(var(--tete-h) + 2px) !important;
    bottom:max(14px,env(safe-area-inset-bottom)) !important;width:min(440px,calc(100vw - 150px)) !important;max-width:none !important}
  .sv-voile:not([hidden]){display:block;position:fixed;inset:0;z-index:875;background:rgba(6,7,8,.45)}
}
/* tablette basse (paysage ≤ 760 px de haut, ou téléphone couché) : le rail défile au lieu de sortir de l'écran */
@media (min-width:761px) and (max-width:1199px) and (max-height:760px){
  html:is([data-theme="communaute"],[data-theme="clair"]) body .dock,html body .dock{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;justify-content:flex-start}
  html body .dock > *{flex-shrink:0}   /* sinon la vignette du jeu tombait à 2 px de haut */
  html body .dock::-webkit-scrollbar{display:none}
  html body .dock a{min-height:48px}
}
@media (min-width:761px) and (max-width:1199px) and (max-height:500px){
  html body .dock a{min-height:44px;font-size:0;gap:0}
  html body .dock a .ic{width:30px;height:30px}
  header.top,html:is([data-theme="communaute"],[data-theme="clair"]) header.top{margin-top:6px;top:6px}
  :root{--tete-h:72px}
}

/* =================================================================== PAGES ============================================ */

/* --- Jouer (AoE) : les parties personnalisées en cartes sur téléphone (avant : un tableau à 4 colonnes, titres coupés à
       4 lettres « unna… ») : ligne 1 le nom + les joueurs, ligne 2 l'état + Rejoindre / Lien --- */
@media (max-width:760px){
  .pp-table{display:block;table-layout:auto !important;width:100%}
  .pp-table thead{display:none}
  .pp-table tbody{display:flex;flex-direction:column;gap:8px;padding:2px 0}
  .pp-table tr.pp-l{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n j" "p a";gap:6px 12px;align-items:center;
    padding:12px 12px 10px 14px;border-radius:18px;background:rgba(var(--neu-rgb,255,255,255),.045)}
  .pp-table tr.pp-l.a-moi{box-shadow:inset 0 0 0 1.5px var(--id,#c6f500)}
  .pp-table tr.pp-l > td{display:block;width:auto !important;min-width:0;max-width:none !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
  .pp-table tr.pp-l > td.sb-n{grid-area:n}
  .pp-table tr.pp-l > td.sb-j{grid-area:j;text-align:right;align-self:start}
  .pp-table tr.pp-l > td.pp-t{grid-area:p;white-space:nowrap;text-align:left;display:block !important;justify-self:stretch}
  .pp-table tr.pp-l > td.sb-a{grid-area:a;text-align:right;white-space:nowrap}
  .pp-table td.sb-n > b{font-size:15px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pp-table td.sb-n > i{font-size:12.5px;margin-top:2px}
  html body .pp-table tr.pp-l > td.pp-t > i{display:inline !important;margin-left:8px;font-size:12px;color:var(--muted)}
  .pp-table td.sb-j .sb-bar{width:52px;margin:5px 0 0 auto}
  .pp-table td.sb-a .pl-join,.pp-table td.sb-a .pl-copie{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;font-size:14px}
  .pp-table tr.pp-detail{display:block}
  .pp-table tr.pp-detail.cache{display:none}
  .pp-table tr.pp-detail > td{display:block;padding:4px 10px 10px !important}
}

/* --- Paramètres : sur téléphone, le champ passe sous son libellé (l'email tenait dans 56 px) --- */
@media (max-width:760px){
  .pr-l > input:not([type=checkbox]):not([type=radio]),.pr-l > select,.pr-l > textarea,.pr-l > #prEmail{flex:1 1 100%;width:100%;min-width:0;max-width:none}
  .pr-l .bt,.pr-l button{min-height:44px}
}

/* --- Tournois : la carte passe sur une colonne (image, texte, actions) --- */
@media (max-width:760px){
  .to-c{grid-template-columns:1fr;gap:10px}
  .to-c img{width:100%}
  .to-a{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* --- Accueil en tablette paysage (1100–1199 px) : deux colonnes serrées → titres secondaires qui se chevauchaient --- */
@media (min-width:1100px) and (max-width:1199px){
  #app #acc.cadre-plein{grid-template-columns:minmax(0,1fr) 360px}
  .acc-une{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .acc-sec-a{grid-template-columns:minmax(0,1fr)}
  .acc-sec-img{display:none}
  .acc-sec-a b{-webkit-line-clamp:2;font-size:13px}
}

/* --- Chat complet en tablette portrait (761–1000 px) : la conversation remplit l'écran (avant : 390 px de haut, la moitié vide) --- */
@media (min-width:761px) and (max-width:1000px){
  body.route-chat .chat-wrap,body.chat-open.route-chat .chat-wrap{height:calc(100dvh - var(--tete-h) - 40px) !important}
  body.route-chat .chat-main{height:100% !important;display:flex;flex-direction:column}
  body.route-chat .chat-log{flex:1 1 0;min-height:0;height:auto !important}
}

/* --- Fenêtres (connexion, confirmations, recherche de partie…) : sur téléphone, une bulle posée en bas, à portée de pouce,
       détachée des bords ; bouton fermer de 44 px --- */
@media (max-width:760px){
  .lk-cnx,.sa-modal,.sanc-back{place-items:end center !important;padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important}
  .lk-cnx-c,.sa-modal-c,.sanc-box{width:100% !important;max-width:none !important;max-height:calc(100dvh - 24px - env(safe-area-inset-top)) !important;
    overflow-y:auto;overscroll-behavior:contain;border-radius:28px !important}
  .lk-cnx-c{padding:24px 18px 18px}
  .lk-cnx-x{width:44px !important;height:44px !important;top:10px !important;right:10px !important;font-size:24px !important}
  .lk-cnx-c h2{padding-right:48px}
  .lk-cnx .lk-champ input{min-height:48px}
  .sa-modal .mp-filtres{grid-template-columns:1fr 1fr !important}
  .sa-modal .mp-filtres > :first-child{grid-column:1 / -1}
  .sanc-act,.sa-modal .sanc-act{flex-wrap:wrap;gap:8px}
  .sanc-act .bt,.sa-modal-c .bt{min-height:44px}
}

/* --- Cibles tactiles (≤ 1199 px) : onglets, pastilles de salon, boutons de liste, « Comment ça marche » (27–31 px avant) --- */
@media (max-width:1199px){
  .snav a{min-height:40px;display:inline-flex;align-items:center;padding-left:14px;padding-right:14px}
  .tabs button,.tabs a{min-height:40px}
  .ph-chat-o button{min-height:40px;padding-left:14px;padding-right:14px}
  details.aide > summary{padding-top:12px;padding-bottom:12px}
  .pl-join,.pl-copie,.rp-b,.jl-saut,.inv-b{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .ch-chip{min-height:40px}
  #chatForm button,.chat-input button,.ce-form button{min-height:44px;min-width:44px}
  .mc-info{width:40px;height:40px}
  .lk-steam svg,.lk-xbox svg{width:26px !important;height:26px !important}
}

/* --- Tablette portrait : la recherche devient une loupe ronde (le libellé était coupé : « Recher… ») --- */
@media (min-width:761px) and (max-width:1000px){
  header.top .spot-trigger{width:44px;height:44px;padding:0;justify-content:center;flex:none}
  header.top .spot-trigger .ph,header.top .spot-trigger kbd{display:none}
}
/* --- Tablette : colonnes du tableau des parties resserrées, le nom de la partie respire (il tombait à 90 px en paysage) --- */
@media (min-width:761px) and (max-width:1199px){
  .pp-table th:nth-child(1),.pp-table td.pp-t{width:92px !important}
  html body .pp-table td.pp-t > i{display:none !important}
  .pp-table th:nth-child(3),.pp-table td.sb-j{width:76px !important}
  .pp-table td.sb-j .sb-bar{width:52px}
}

/* --- Cibles tactiles, suite (tablette paysage : chat en trois colonnes, profil) --- */
@media (max-width:1199px){
  .bt,.btn-ghost,.btn-primary{min-height:40px}
  .cr-room,.chat-wrap .cr-room{min-height:40px}
  .chat-users .cu{min-height:36px}
  .cr-quit{min-width:36px;min-height:36px}
  .pu-res{min-height:40px;display:inline-flex;align-items:center}
}

/* --- Clan : la liste des membres en cartes sur téléphone (nom + rôle + ELO, puis les boutons du chef sur leur ligne) --- */
@media (max-width:760px){
  table.clan-social{display:block;min-width:0 !important;width:100%}
  table.clan-social thead{display:none}
  table.clan-social tbody{display:flex;flex-direction:column;gap:8px}
  table.clan-social tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:10px 12px;
    border-radius:16px;background:rgba(var(--neu-rgb,235,245,235),.045)}
  table.clan-social td{display:block;padding:0 !important;border:0 !important;background:none !important;min-width:0}
  table.clan-social td.st{display:none !important}
  table.clan-social td.nm{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.clan-social td.nm a{font-weight:650}
  table.clan-social td:nth-child(6){grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;text-align:left}
  table.clan-social td:nth-child(6):empty{display:none}
  table.clan-social td .btn-ghost.xs{min-height:40px;padding:0 14px;font-size:13.5px}
}

/* 27/09/2026 : conversation privée du panneau « Amis et clan » (téléphone, tablette) — le fil prend toute la hauteur. La règle de
   conteneur « .ce-compact .ce-corps{display:block} » ci-dessus le laissait à 160 px, avec un grand vide au-dessus de la saisie. */
#svMpC .ce-compact .ce-corps{display:flex !important;flex-direction:column}