/* =====================================================================================================================
   Finitions — passe design du 09/10/2026 (Maxime : « refais une passe totale design partout »). Chargé en dernier dans index.html.
   Retour arrière : retirer la ligne finitions.css d'index.html. Aucune :has() (classes posées par marquerPage, app.js).
   ===================================================================================================================== */

/* --- 1. Espace du clan (#/clan) : la page ne défile plus (Maxime : « on peut scroller la page, pas top ») ---------------
   PC ≥ 1100 px : fiche du clan à gauche (colonne qui défile seule si besoin), onglets + chat/membres/élections à droite sur toute la
   hauteur. 1100-1199 px : empilé, le bloc du bas prend la hauteur qui reste (.cadre-plein). Téléphone : inchangé (la page défile). */
@media (min-width:1100px){
  #app.pg-clanvie > .clan-vie{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
  #app.pg-clanvie > .clan-vie > .clan-chat,html body #app.pg-clanvie > .clan-vie > .clan-chat{height:100% !important;min-height:300px;margin:0}
  #app.pg-clanvie > .clan-vie .ce-compact .ce-log{height:auto !important}
  #app.pg-clanvie > .clan-vie > [data-co]:not(.clan-chat){margin-bottom:12px}
}
@media (min-width:1100px){   /* 09/10/2026 (lot 2) : deux colonnes dès 1100 px (entre 1100 et 1199 la page défilait encore) */
  #app.pg-clanvie{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
    grid-template-areas:"crumb crumb" "tete onglets" "tete vie" "liens vie";grid-template-rows:auto auto auto minmax(0,1fr);column-gap:16px;align-content:start}
  #app.pg-clanvie > .crumb{grid-area:crumb}
  #app.pg-clanvie > .clan-head{grid-area:tete;margin:0 0 12px !important;display:flex;flex-direction:column;gap:12px;padding:18px !important}
  #app.pg-clanvie > .clan-liens{grid-area:liens;margin:0 !important;align-self:start}
  #app.pg-clanvie > #clanOnglets{grid-area:onglets;margin:0 0 10px !important;justify-self:start}
  #app.pg-clanvie > .clan-vie{grid-area:vie;margin:0}
  #app.pg-clanvie > :not(.crumb):not(.clan-head):not(.clan-liens):not(#clanOnglets):not(.clan-vie){grid-column:1 / -1}
  /* la fiche en colonne : logo + nom en haut, description, jeux, liens, puis les actions */
  #app.pg-clanvie > .clan-head .cl-crest{width:64px;height:64px}
  #app.pg-clanvie > .clan-head .ch-id{min-width:0}
  #app.pg-clanvie > .clan-head .ch-bio{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
  #app.pg-clanvie > .clan-head .ch-jeux{flex-wrap:wrap}
  #app.pg-clanvie > .clan-head .ch-act{position:static !important;display:flex;flex-wrap:wrap;gap:6px;order:3}
}

/* --- 2. En-tête téléphone : la vignette du jeu (62 px) débordait de son bouton (38 px) et passait sous la loupe --------- */
@media (max-width:760px){
  header.top a.jeu-choix{overflow:hidden}
  header.top a.jeu-choix > img{width:100% !important;height:100% !important;max-width:none;object-fit:cover;object-position:center}
}

/* --- 3. « Amis et clan » sur PC (lot 2, 09/10/2026) : la pastille flottante recouvrait le bas des pages → bouton dans l'en-tête,
   à côté de la cloche (comme sur téléphone et tablette), le panneau s'ouvre en menu déroulant sous l'en-tête ; un clic à côté le
   referme (voile transparent). Plus de bande réservée en bas des pages. */
@media (min-width:1200px){
  header.top .amis-tete{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:46px;padding:0 13px;margin-left:0;
    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:13.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
  header.top .amis-tete:hover{background:rgba(var(--neu-rgb,255,255,255),.11)}
  header.top .amis-tete svg{width:18px;height:18px}
  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)}
  header.top .amis-tete .dock-n{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
    font-style:normal;font-size:10.5px;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 .sv-mpn{position:absolute;bottom:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;box-shadow:0 0 0 2px var(--panel,#18191b)}
  header.top .amis-tete ~ .userbox{margin-left:0}
  html body #suivis.suivis.amis:not(.ouvert){display:none !important}
  html body #suivis.suivis.amis.ouvert{top:80px !important;bottom:auto !important;left:auto !important;right:18px !important;z-index:880 !important;
    height:min(660px,calc(100vh - 98px)) !important;animation-name:amDeroule !important}
  .sv-voile:not([hidden]){display:block !important;position:fixed;inset:0;z-index:875;background:transparent !important}
}
@keyframes amDeroule{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* --- 4. Page Jouer : un seul « Créer une partie » (le grand, en haut) ; la ligne « Dans le monde en ce moment : 25 salons… » ne se
   casse plus en colonnes sur téléphone --- */
#mpRacine .jd-info .mp-vide > .bt.ok[data-lolj-creer]{display:none}
#mpRacine .mp-vide-monde:not([hidden]){display:block !important;line-height:1.55}
#mpRacine .mp-vide-monde > *{display:inline !important}
#mpRacine .mp-vide-monde > .vv-pt{display:inline-block !important;margin-right:6px;vertical-align:1px}

/* --- 5. Accueil : « Règlement du concours » rattaché à sa carte (il flottait dessous) --- */
html body #ccPromo > .cc-regl{display:block;width:max-content;margin:6px 6px 0 auto;font-size:12px;color:var(--dim,#9aa0a6);text-decoration:none}
html body #ccPromo > .cc-regl:hover{color:var(--txt);text-decoration:underline;text-underline-offset:3px}

/* --- 6. Tablette (09/10/2026, Maxime : « la version tablette, pas top ») ---------------------------------------------------
   iPad en portrait (820 px) : l'en-tête passait sur deux lignes (« FR » tombait dessous) et poussait le bas des pages hors de l'écran
   (zone d'écriture du chat coupée). Entre 761 et 1023 px : le pseudo du menu du compte laisse sa place (l'avatar reste). */
@media (min-width:761px) and (max-width:1023px){
  header.top .userbox .me-nom{display:none !important}
  header.top .userbox .me-av{gap:4px;padding-right:8px}
}
/* le raccourci clavier « ⌘K » n'a pas de sens au doigt */
@media (pointer:coarse){ #spotOpen kbd{display:none !important} }

/* --- 7. Hauteur du contenu sur grand écran (09/10/2026, photo de Maxime sur sa tablette Xiaomi en paysage : bas des pages coupé) ---
   app.css donnait main{height:calc(100vh - 62px)} alors que l'en-tête finit à 76 px : 14 px coupés en bas sur PC, et davantage sur
   tablette Android (100vh y compte la zone sous les barres du système). Hauteur VISIBLE (dvh) moins l'en-tête réel. */
@media (min-width:1200px){
  main{height:calc(100vh - 76px - env(safe-area-inset-bottom,0px)) !important;height:calc(100dvh - 76px - env(safe-area-inset-bottom,0px)) !important}
  /* (2e photo : l'appli plein écran — viewport-fit=cover — passe sous la barre de gestes d'Android : sa hauteur est retirée) */
}
/* --- 8. Nom de l'ordinateur du Compagnon (« ● Mac mini… », en bas à gauche) sur un écran bas : réduit à « M… », il ne disait plus
   rien. Masqué : le point d'état reste sur la bulle, et le nom complet s'affiche en la touchant. */
@media (min-width:761px) and (max-height:759px){
  .comp-nom{display:none !important}
}

/* --- 9. Haut-parleur des chats (10/10/2026, Maxime : « dans le chat, pas d'icône pour couper le son ») : [data-son-tout], peint et géré
   par sons.js. Page Chat (en-tête du salon ; le téléphone garde le sien dans sa barre), chats intégrés, conversation privée. --- */
.chat-topic .ct-son,html body .ce-compact .ce-son{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;margin-left:6px;
  border-radius:999px;border:1px solid var(--line2,rgba(255,255,255,.12));background:transparent;color:var(--muted,#c9ccc9);cursor:pointer;transition:background .15s,color .15s}
.chat-topic .ct-son:hover,html body .ce-compact .ce-son:hover{background:rgba(var(--neu-rgb,255,255,255),.08);color:var(--txt)}
.chat-topic [data-son-tout].off,html body .ce-compact .ce-son.off,html body #suivis.suivis.amis .am-mp-b[data-son-tout].off{color:var(--warn,#ffb347)}
@media (max-width:760px){ .chat-topic .ct-son{display:none} }
@media (pointer:coarse){ .chat-topic .ct-son,html body .ce-compact .ce-son{width:40px;height:40px} }

/* --- 10. Serveurs de la communauté en onglets (10/10/2026, Maxime : « une nouvelle section en haut, comme le Cube ») ------------------
   Minecraft : un onglet par serveur validé (icône du serveur, joueurs en ligne) entre Lobbik et Communauté ; sa page = Discord / site en
   avant, la fiche en grand, son chat à côté. */
.mc-onglets .mcj-srv{display:inline-flex;align-items:center;gap:8px;max-width:240px}
.mc-onglets .mcj-srv img{width:20px;height:20px;border-radius:5px;image-rendering:pixelated;flex:none}
.mc-onglets .mcj-srv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-onglets .mcj-srv .mcj-srv-n{font-style:normal;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;background:rgba(var(--id-rgb,198,245,0),.16);color:var(--id,#c6f500)}
.mc-onglets{flex-wrap:wrap}
.mcs-page .mcs-p{overflow-y:auto}
.mcs-fiche{max-width:none !important;width:auto !important;padding:0 !important;background:none !important;box-shadow:none !important;border:0 !important}
.mcs-fiche .sanc-act > [data-non]:not([data-com-vocal]){display:none !important}   /* « Fermer » seulement (pas le vocal ni le lien du propriétaire) */
.mcs-fiche .mcc-f-tete h3{font-size:22px}
.mcs-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.mcs-cta a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:14px;font-weight:700;text-decoration:none;font-size:14.5px}
.mcs-cta .mcs-discord{background:#5865F2;color:#fff;box-shadow:0 10px 24px -12px rgba(88,101,242,.9)}
.mcs-cta .mcs-discord:hover{filter:brightness(1.08)}
.mcs-cta .mcs-site{border:1px solid var(--line2,rgba(255,255,255,.14));color:var(--txt);background:rgba(var(--neu-rgb,255,255,255),.05)}
/* la fiche à gauche, le chat du serveur à droite (Minecraft : #csHub, sans rangée « info » vide ; autres jeux : #smPage) */
#csHub.mcs-page, #smPage.mcs-page{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(360px,30%) !important;grid-template-areas:"live chat" !important;grid-template-rows:minmax(0,1fr) !important;gap:14px;align-items:stretch !important}
#smPage.mcs-page > *{align-self:stretch !important;margin:0 !important}
#csHub.mcs-page > #mccHub{display:none !important}
#csHub.mcs-page > .mcs-p, #smPage.mcs-page > .mcs-p{grid-area:live !important;min-height:0}
#csHub.mcs-page > #csChat, #smPage.mcs-page > #csChat{grid-area:chat !important;min-height:0}
@media (min-width:1100px){ #csHub.mcs-page > #csChat, #smPage.mcs-page > #csChat{height:auto !important} }
@media (max-width:1099px){ #csHub.mcs-page, #smPage.mcs-page{display:flex !important;flex-direction:column} #csHub.mcs-page > #csChat, #smPage.mcs-page > #csChat{min-height:480px} }
/* autres jeux : l'image du jeu (photo, pas des pixels) */
.sm-onglets .mcj-srv img{image-rendering:auto;object-fit:cover}