/* =========================================================================
   Refonte des pages (30/09/2026) — chargé EN DERNIER, après tous les autres CSS.
   Identité Volt inchangée : on retouche la STRUCTURE (place perdue, hiérarchie,
   un seul appel à l'action par écran), pas les couleurs.
   Retour arrière : retirer la ligne refonte.css d'index.html (publier.sh).
   Règles : pas de :has() (lenteurs), aucun défilement horizontal, PC = la page ne défile pas.
   ========================================================================= */

/* ---- 1. En-tête : « Se connecter » = l'action principale ; la langue redevient discrète ---- */
html[data-theme] #userbox .btn-steam{background:var(--id);color:var(--id-ink);border-color:transparent;font-weight:700;box-shadow:none}
html[data-theme] #userbox .btn-steam:hover{background:var(--id-hi, var(--id))}
html[data-theme] #langsel{background:transparent;box-shadow:none;border-color:var(--line)}
html[data-theme] #langsel button.on{background:transparent;color:var(--txt);box-shadow:none;text-shadow:none;filter:none}
html[data-theme] #langsel button.on:hover{background:var(--glass, rgba(255,255,255,.06))}

/* ---- 2. Bandeau Compagnon : une seule ligne (83 px → 48 px) ; rien sur téléphone (logiciel PC/Mac) ---- */
@media (min-width:901px){
  #app > #pubComp.pub-comp-barre{display:flex;align-items:center;gap:14px;padding:7px 8px 7px 16px;margin:0 0 12px;min-height:0;border-radius:999px}
  .pub-comp-barre .pub-deck-t{flex:none;white-space:nowrap;font-size:13px}
  .pub-comp-barre > p.sub{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--muted)}
  .pub-comp-barre .pub-deck-a{flex:none;margin:0;display:flex;gap:6px}
  .pub-comp-barre .pub-deck-a .bt{height:30px;padding:0 14px;font-size:12.5px;display:inline-flex;align-items:center}
}
@media (max-width:900px){ #pubComp{display:none !important} }

/* ---- 3. Bloc « Jouer » vide : une ligne discrète au lieu d'une carte en pointillés ---- */
#phCorps > .ph-t{display:inline-block;margin:0 12px 0 0;vertical-align:baseline}
#phCorps > .ph-t + .ph-vide{display:inline;padding:0;border:0;background:none;text-align:left;font-size:13px;color:var(--muted)}
.ph-main > .head + #phCorps{margin-top:2px}

/* ---- 4. Chat d'un visiteur : un petit bloc avec son bouton, plus une colonne vide de 500 px ---- */
.ph-chat-c > .ce-vide,.acc-chat > .ph-chat-c > .ce-vide{flex:0 0 auto !important;height:auto !important;min-height:0 !important}
.ce-vide{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ce-vide > .head{margin:0}
.ce-vide > .sub{margin:0}
.ce-vide .cnx-indice{font-size:12.5px;padding:7px 12px}
/* un seul appel à se connecter par écran : l'accueil a déjà « Entrer », la page Jouer sa pastille en tête */
.acc-chat .ce-vide .cnx-indice,.jd .ph-chat .ce-vide .cnx-indice,.ech-lobby .ce-vide .cnx-indice{display:none}
/* page Chat / Mon profil d'un visiteur : état vide centré, aéré, un seul bouton */
.panel.empty.cnx-vide,#app > .panel.pad.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 24px;text-align:center}
#app > .panel.pad.empty > br{display:none}
#app > .panel.pad.empty > h2{margin:0 !important}
#app > .panel.pad.empty > .sub{margin:0}

/* ---- 5. Onglets de salon réduits à un seul (« Général » seul sur l'accueil) : on ne les montre pas ---- */
.ph-chat-o.un-seul{display:none !important}

/* ---- 6. Twitch : les vignettes remplissent la largeur (plus de trou à droite) ---- */
.tw-grille{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tw-grille > .tw-c{min-width:0}

/* ---- 7. Échecs : les 11 cadences sur une ligne, tuiles plus basses ---- */
@media (min-width:1100px){
  .ech-cadences{grid-template-columns:repeat(11,minmax(0,1fr));gap:8px}
  .ech-cad{padding:12px 4px}
  .ech-cad b{font-size:clamp(14px,1.1vw,19px);white-space:nowrap}
}
.ech-lobby p.cnx-indice{width:fit-content;margin:0 0 12px}

/* ---- 8. Statistiques : chiffres clés plus compacts, tableaux qui tiennent dans leur demi-colonne ---- */
#app .panel > .grid.g4 > .tile{padding:12px 16px}
#app .panel > .grid.g4 > .tile .v{font-size:30px;margin:2px 0;line-height:1.1}
#app .panel > .grid.g4 > .tile .n{font-size:12px}
@media (min-width:1100px){
  #app .stats-grille table th,#app .stats-grille table td{padding-left:8px;padding-right:8px}
  #app .stats-grille table th{letter-spacing:.04em}
}

/* ---- 8 bis. Accueil, « À la une » : les brèves ne débordent plus l'une sur l'autre ---- */
.acc-sec-a{overflow:hidden}
.acc-sec-a .acc-meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1100px) and (max-height:900px){ .acc-sec-a b{-webkit-line-clamp:2} }

/* ---- 9. Rythme et lisibilité : petites étiquettes lisibles, rubriques cohérentes ---- */
.field > label,h3.ph-t{font-size:11.5px}
.acc-fil-it b,.acc-it .src,.acc-src{font-size:11px}
details.aide > summary{color:var(--muted);font-size:12.5px}
details.aide > summary:hover{color:var(--txt)}

/* ---- 10. Accessibilité : focus clavier bien visible, animations coupées si demandé ---- */
:focus-visible{outline:2px solid var(--id);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .refonte-anim,.fade-in{animation:none !important} }

/* ---- 11. Téléphone : longues listes repliées à 20 lignes + « Voir tout (n) » (refonte.js) ---- */
.rf-replie > :nth-child(n+21){display:none !important}
.rf-plus{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin:12px 0 0;font-weight:600}

/* ---- 12. Serveurs communautaires (CS2, Valheim, Rust, ARK) : la recherche monte dans l'en-tête de la liste ---- */
@media (min-width:1100px){
  #jdListe.srv-nav > .head{flex-wrap:nowrap;align-items:center}
  #jdListe.srv-nav > .head > .sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #jdListe.srv-nav > .head > #svQ{margin-left:auto;flex:none;width:clamp(170px,16vw,240px)}
}