/* =====================================================================
   LE FEU DE CAMP : DA « carte à la lanterne » (oct. 2026)
   S'applique quand le <body> porte .nuitUI (par défaut, voir js/interface/51-menus-carnet.js ;
   l'ancien carnet reste possible avec .carnetUI). Chargée en DERNIER dans index.html.
   - fenêtres : panneaux bleu nuit à coins ronds, texte crème, petits titres couleur terre ;
   - bouton principal crème, les autres en contour, « Rejoindre » en vert ;
   - « allumé » (choisi, prêt) = lanterne jaune ;
   - le jeu reste visible derrière l'accueil.
   Rien ne change de taille : seules les couleurs et les habillages bougent.
   ===================================================================== */
body.nuitUI{
  --n-fond:#0B0F17; --n-feuille:#10151F; --n-pan:#161D2B; --n-case:#1C2433; --n-case2:#232C3E;
  --n-trait:#2C3446; --n-trait2:#3A4459;
  --n-creme:#F4EEDF; --n-texte:#EDE6D6; --n-doux:#D6CFC0; --n-gris:#A9A4B2; --n-sourd:#8C8A96;
  --n-terre:#C2A682; --n-lant:#F3C66B; --n-vert:#8FCB9B;
}

/* ---- les fenêtres ---- */
/* le voile bleu flou du jeu reste derrière les menus (pas de panneau sombre), sauf les vraies fenêtres */
html body.nuitUI #setM .setSheet{
  background:rgba(16,21,31,.94)!important;border:1.5px solid #252E40!important;border-radius:20px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.55)!important;color:var(--n-texte)!important;padding:28px 32px 24px}
html body.nuitUI .sheet h1,html body.nuitUI #menu .sheet h1,html body.nuitUI #menu .sheet h1.ciKeep{
  background:none!important;border:0!important;box-shadow:none!important;-webkit-text-stroke:0!important;paint-order:normal!important;
  text-shadow:none!important;color:var(--n-creme)!important;padding:0!important;font-size:clamp(40px,6vw,62px)}
html body.nuitUI .sheet h2,html body.nuitUI #setM h2{color:var(--n-creme)!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body.nuitUI .sheet h3,html body.nuitUI #setM h3{color:var(--n-terre)!important}
html body.nuitUI .kicker{color:var(--n-terre)!important;opacity:1!important;font-weight:700}
html body.nuitUI .sheet p,html body.nuitUI .sheet label{color:var(--n-doux)}
html body.nuitUI #hubLien{color:var(--n-gris)!important}
html body.nuitUI #hubLien:hover{color:var(--n-creme)!important}
html body.nuitUI #menu #roleDesc b{color:var(--n-terre)!important}

/* ---- boutons ---- */
html body.nuitUI .big{background:var(--n-creme)!important;color:#10151F!important;border:0!important;border-radius:999px!important;box-shadow:none!important;text-shadow:none!important;
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif!important;font-weight:700!important}
html body.nuitUI .big:hover:not(:disabled){background:#FFFFFF!important;filter:none}
html body.nuitUI .mid,html body.nuitUI .ghost,html body.nuitUI .mid.quitMid{background:rgba(16,21,31,.45)!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2)!important;
  border-radius:999px!important;box-shadow:none!important;text-shadow:none!important;font-family:'Atkinson Hyperlegible',system-ui,sans-serif!important;font-weight:700!important}
html body.nuitUI .mid:hover:not(:disabled),html body.nuitUI .ghost:hover:not(:disabled){background:var(--n-case)!important;filter:none}
html body.nuitUI .big:active,html body.nuitUI .mid:active,html body.nuitUI .ghost:active{transform:none!important;box-shadow:none!important}
html body.nuitUI .modal button:disabled,html body.nuitUI .big:disabled,html body.nuitUI .mid:disabled{opacity:.45!important}
html body.nuitUI #menu #joinOpen,html body.nuitUI #menu #joinBtn,html body.nuitUI #joinBtn{background:var(--c-vert,#2F6B3F)!important;border-color:var(--c-vert,#2F6B3F)!important;color:var(--n-creme)!important}
html body.nuitUI #menu #hostBtn{background:transparent!important;border-color:var(--n-trait2)!important;color:var(--n-texte)!important}
html body.nuitUI #menu #persoOpen{background:var(--n-case)!important;border:0!important;color:var(--n-texte)!important}
html body.nuitUI #menu #persoOpen:hover{background:var(--n-case2)!important}
html body.nuitUI .xClose,html body.nuitUI #recreClose,html body.nuitUI #veilClose{background:var(--n-case)!important;color:var(--n-texte)!important;border:0!important;box-shadow:none!important;border-radius:999px!important}

/* ---- la barre du haut de l'accueil (Carnet, Atelier, réglages) ---- */
html body.nuitUI #topNav button,html body.nuitUI #setBtn{background:rgba(16,21,31,.88)!important;color:var(--n-texte)!important;border:0!important;box-shadow:none!important;
  border-radius:999px!important;font-family:'Atkinson Hyperlegible',system-ui,sans-serif!important;font-weight:700!important}
html body.nuitUI #topNav button:hover,html body.nuitUI #setBtn:hover{background:var(--n-case)!important}

/* ---- rôles, puces, champs ---- */
html body.nuitUI .role,html body.nuitUI #menu .role{background:var(--n-case)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;color:var(--n-texte)!important}
html body.nuitUI .role:hover{background:var(--n-case2)!important}
html body.nuitUI .role[aria-pressed="true"],html body.nuitUI #menu .role[aria-pressed="true"]{background:var(--n-case2)!important;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
html body.nuitUI .role b{color:var(--n-creme)!important}
html body.nuitUI .role span{color:var(--n-gris)!important}
html body.nuitUI .pickChip{background:var(--n-case)!important;border:0!important;border-radius:999px!important;color:var(--n-texte)!important;box-shadow:none!important}
html body.nuitUI .pickChip[aria-pressed="true"]{background:var(--n-creme)!important;color:#10151F!important}
html body.nuitUI .sheet input:not([type=checkbox]):not([type=range]),html body.nuitUI .sheet select,html body.nuitUI .sheet textarea{
  background:var(--n-case)!important;color:var(--n-creme)!important;border:1.5px solid var(--n-trait2)!important;border-radius:12px!important;box-shadow:none!important}
html body.nuitUI .sheet input::placeholder{color:var(--n-sourd)}
html body.nuitUI input[type=checkbox],html body.nuitUI input[type=range]{accent-color:var(--n-terre)}

/* ---- accueil : le tuto, les réglages de la partie, « Rejoindre » ---- */
html body.nuitUI #tutoAsk,html body.nuitUI #tutoBox{background:var(--n-pan)!important;border:0!important;border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important;color:var(--n-texte)!important}
html body.nuitUI #tutoAsk b,html body.nuitUI #tutoBox .k{color:var(--n-terre)!important}
html body.nuitUI #tutoAsk p,html body.nuitUI #tutoBox p{color:var(--n-doux)!important}
html body.nuitUI #menu .sheet details,html body.nuitUI #menu .sheet #acSec details#runOpts{background:none!important;border:0!important;color:var(--n-texte)!important}
html body.nuitUI #menu .sheet #acSec #runOpts>summary,html body.nuitUI #menu .sheet details summary{background:transparent!important;color:var(--n-texte)!important;
  border:1.5px solid var(--n-trait2)!important;border-radius:999px!important;box-shadow:none!important;font-family:'Atkinson Hyperlegible',system-ui,sans-serif!important;font-weight:700!important}
html body.nuitUI #menu .roPanel,html body.nuitUI #menu #acSec .joinBox{background:var(--n-feuille)!important;border:1.5px solid var(--n-trait2)!important;border-radius:16px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.55)!important;color:var(--n-texte)!important}
html body.nuitUI #menu #acSec .joinBox::before{background:var(--n-feuille)!important;border-color:var(--n-trait2)!important}
html body.nuitUI #menu .sheet details label,html body.nuitUI .modRow{background:var(--n-case)!important;border:0!important;border-radius:12px!important;color:var(--n-doux)!important}
html body.nuitUI .pubList h4{color:var(--n-terre)}
html body.nuitUI .pubEmpty{color:var(--n-gris)}
html body.nuitUI #resumeBox{background:var(--n-pan)!important;border:0!important;border-radius:16px!important;color:var(--n-texte)!important}
html body.nuitUI #resumeBox b{color:var(--n-lant)!important}
html body.nuitUI #menuMsg,html body.nuitUI .best{color:var(--n-gris)!important}

/* ---- salon, fin de partie ---- */
html body.nuitUI #lobbyM .code{color:var(--n-lant)!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body.nuitUI #lobbyList li{background:var(--n-case)!important;border:0!important;border-radius:12px!important;color:var(--n-texte)!important;box-shadow:none!important}
html body.nuitUI #over .stats>div{background:var(--n-pan)!important;border:0!important;border-radius:14px!important;box-shadow:none!important}
html body.nuitUI #over .stats b{color:var(--n-creme)!important;text-shadow:none!important}
html body.nuitUI #over .stats span{color:var(--n-gris)!important}

/* ---- cartes à choisir (niveau, spécialité) ---- */
html body.nuitUI .card{background:var(--n-case)!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2);box-shadow:none;border-radius:16px!important}
html body.nuitUI button.card:hover{background:var(--n-case2)!important;transform:none!important}
html body.nuitUI .card b{color:var(--n-creme)!important}
html body.nuitUI .card p,html body.nuitUI .card .lv{color:var(--n-doux)!important}
html body.nuitUI .card.rar1{border-color:#4b8fd6}html body.nuitUI .card.rar2{border-color:#e8c44a}html body.nuitUI .card.voie{border-color:#9b6bd6}

/* ---- le carnet de progression ---- */
html body.nuitUI #carnetM .cnTabs,html body.nuitUI #carnetM .chip,html body.nuitUI #carnetM .xpLine,
html body.nuitUI #carnetM .cnProfile,html body.nuitUI #carnetM .cnSection,html body.nuitUI #carnetM .cnAside{background:var(--n-pan)!important;border:0!important;color:var(--n-texte)!important;box-shadow:none!important}
html body.nuitUI .cnTabs button{background:transparent!important;color:var(--n-gris)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
html body.nuitUI .cnTabs button[aria-selected="true"]{background:var(--n-case2)!important;color:var(--n-creme)!important}

/* ---- en jeu : panneaux de nuit semi-transparents, mêmes places et tailles ---- */
html body.nuitUI .chip,html body.nuitUI .res,html body.nuitUI .meters{background:rgba(16,21,31,.84)!important;border-color:transparent!important;border-radius:12px}
html body.nuitUI .chip b{color:var(--n-lant)}
html body.nuitUI #dayBar{background:rgba(16,21,31,.9)!important;border:0!important;border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important}
html body.nuitUI .tool{background:var(--n-case)!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
html body.nuitUI .tool[aria-pressed="true"]{background:var(--n-case2)!important;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
html body.nuitUI .cats button,html body.nuitUI .tabs button{background:transparent!important;border:0!important;border-radius:999px!important;color:var(--n-gris)!important;box-shadow:none!important}
html body.nuitUI .cats button[aria-pressed="true"],html body.nuitUI .tabs button[aria-selected="true"]{background:var(--n-case2)!important;color:var(--n-creme)!important}
html body.nuitUI #goBtn{background:var(--n-creme)!important;color:#10151F!important;border:0!important;box-shadow:none!important;border-radius:999px!important}
html body.nuitUI #pauseBtn,html body.nuitUI #hudSetBtn{background:rgba(16,21,31,.84)!important;border:0!important;border-radius:12px!important;color:var(--n-texte)!important;box-shadow:none!important}

/* ---- petits messages ---- */
html body.nuitUI #toast{background:var(--n-creme)!important;color:#10151F!important;border:0!important;border-radius:14px!important;box-shadow:0 10px 30px rgba(0,0,0,.5)!important}

/* ---- la carte du voyage (js/progression/64-fil-rouge.js dessine aussi en nuit) ---- */
html body.nuitUI #filJauge{background:rgba(16,21,31,.84)!important;color:var(--n-texte)!important;border:0!important;border-radius:10px!important;box-shadow:none!important}
html body.nuitUI #filJauge .fjBar i{background:rgba(237,230,214,.16)}
html body.nuitUI #filJauge .fjBar i.on{background:var(--n-lant)}
html body.nuitUI #filM canvas,html body.nuitUI #filPop canvas{border:1.5px solid #252E40!important;border-radius:16px!important;box-shadow:0 14px 34px rgba(0,0,0,.5)!important}

/* ---- l'écriteau de la vague (Veillée, Vague 1…) ---- */
html body.nuitUI #waveTag.sign,html body.nuitUI .sign{background:rgba(16,21,31,.88)!important;color:var(--n-creme)!important;border:0!important;border-radius:999px!important;
  box-shadow:none!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body.nuitUI #foes{color:var(--n-doux)}

/* ---- les réglages de la partie (dans la fenêtre commune socle/reglages.js) ---- */
html body.nuitUI .scCorps #setBody .sRow button,html body.nuitUI #setM .sRow button,html body.nuitUI #setM .kb button{
  background:transparent!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2)!important;border-radius:999px!important;box-shadow:none!important}
html body.nuitUI .scCorps #setBody .sRow button[aria-pressed="true"],html body.nuitUI #setM .sRow button[aria-pressed="true"]{
  background:var(--n-creme)!important;border-color:var(--n-creme)!important;color:#10151F!important}
html body.nuitUI .scCorps #setBody .hint,html body.nuitUI .scCorps #setBody p{color:var(--n-gris)!important}

/* =====================================================================
   LE SALON (js/interface/68-salon.js) : « Jouer » ouvre le camp ;
   à gauche ton rôle et les réglages, à droite le code, privé/publique et les scouts.
   Tailles fixes : la liste des scouts défile dans sa case, rien ne pousse.
   ===================================================================== */
html body.nuitUI #lobbyM .salonSheet{width:min(1100px,100%);max-width:none;display:grid;gap:12px;padding-top:4px;padding-bottom:4px;justify-items:stretch;text-align:left}
html body.nuitUI #lobbyM .salonTitre{text-align:center;font-size:clamp(30px,4vw,44px)}
.salonGrille{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start}
.salonG,.salonD{display:grid;gap:14px;min-width:0}
html body .salonSec{background:rgba(16,21,31,.55);border-radius:16px;padding:14px 18px;display:grid;gap:8px;min-width:0}
html body #lobbyM .salonRole #acRoleHead{display:flex;align-items:center;justify-content:space-between;gap:10px;position:static}
html body #lobbyM .salonRole #acRoleHead .kicker{margin:0}
html body.carnetUI #lobbyM #acRoleHead #persoOpen,html body #lobbyM #acRoleHead #persoOpen{position:static;transform:none;margin:0;min-height:34px;padding:4px 14px;font-size:14px}
html body #lobbyM .salonRole .roles{grid-template-columns:repeat(7,minmax(0,1fr));max-width:none;gap:6px}
html body #lobbyM .salonRole #genreRow{display:none}
html body #lobbyM .salonRole .role{padding:6px 2px 8px;gap:2px}
html body #lobbyM .salonRole .role canvas{width:48px;height:48px}
html body #lobbyM .salonRole .role b{font-size:12px;line-height:1.1;height:27px;display:flex;align-items:center}
html body #lobbyM .salonRole .role span{font-size:9px}
html body #lobbyM .salonRole #roleDesc{height:54px;overflow:hidden;margin:0;font-size:13px;line-height:1.35;text-align:left}
html body #lobbyM .salonRegl .roPanel{display:grid;gap:8px;position:static;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;width:auto}
html body #lobbyM .salonRegl .chipList{gap:6px}
html body #lobbyM .salonRegl #diffDesc{margin:0;font-size:13px;min-height:18px}
html body #lobbyM .salonRegl .modRow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;font-size:13px;line-height:1.35}
html body #lobbyM.salonInvite .salonRegl,html body #lobbyM .salonInvite .salonRegl{display:none}
.salonCode{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.salonCode .kicker{margin:0;flex:1 1 100%}
html body #lobbyM .salonCode .code{font-size:40px;line-height:1;letter-spacing:.16em;margin:0}
html body #lobbyM .salonCode #copyCode{min-height:34px;padding:4px 14px;font-size:14px}
html body #lobbyM .salonSheet.salonHorsLigne .salonCode,html body #lobbyM .salonSheet.salonHorsLigne #pubWrap{display:none}
html body #lobbyM .salonCamp #pubWrap{display:grid;gap:6px}
html body #lobbyM #pubToggle{display:flex;gap:6px}
html body #lobbyM #pubToggle button{flex:1;min-height:38px;border-radius:999px}
html body #lobbyM #pubHint,html body #lobbyM #lobbyIntro{margin:0;font-size:13px;line-height:1.4;height:54px;overflow:hidden}
html body #lobbyM #lobbyList{list-style:none;margin:0;padding:0;display:grid;gap:6px;height:204px;overflow-y:auto;align-content:start}
html body #lobbyM #lobbyList li{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;text-align:left}
.salonBas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
html body #lobbyM .salonBas #lobbyStart{min-width:280px;min-height:56px;font-size:20px;margin-left:auto}
html body #lobbyM .salonBas #lobbyWait{margin:0 0 0 auto}
html body #lobbyM #lobbyGames{grid-column:1 / -1}
/* DA de nuit : les cases du salon et le choix privé / publique */
html body.nuitUI #lobbyM #pubToggle button{background:transparent!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2)!important;box-shadow:none!important}
html body.nuitUI #lobbyM #pubToggle button[aria-pressed="true"]{background:var(--n-creme)!important;color:#10151F!important;border-color:var(--n-creme)!important}
html body.nuitUI #lobbyM #pubHint,html body.nuitUI #lobbyM #lobbyIntro{color:var(--n-gris)!important}
@media (max-width:820px){
  .salonGrille{grid-template-columns:minmax(0,1fr)}
  html body #lobbyM .salonRole .roles{grid-template-columns:repeat(4,minmax(0,1fr))}
  html body #lobbyM .salonBas #lobbyStart{min-width:0;flex:1 1 100%}
}

/* ---- oct. 2026 : plus d'Atelier, de rondins ni de carnet de progression dans La Veillée ---- */
#carnetBtn,#atelierBtn,#overCarnet,#overReward,#mmRondins,#menu .metaRow,#cnRondins{display:none!important}
/* les rôles et « Personnaliser » se choisissent dans le salon (js/interface/68-salon.js), plus sur l'accueil */
html body #menu #acRoleHead,html body #menu #genreRow,html body #menu #roles,html body #menu #roleDesc{display:none!important}
html body #lobbyM .salonRole .role span{font-size:8.5px!important;letter-spacing:.04em!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #lobbyM .salonRole #roleDesc .rd{display:block;text-align:left}