/* =====================================================================
   SOCLE COMMUN : la DA « carte à la lanterne » pour les menus des jeux (oct. 2026)
     <link rel="stylesheet" href="../socle/nuit-menus.css?v=…">   (en DERNIER, après les feuilles du jeu)
   S'applique quand le <body> porte la classe .nuitUI. Repeint les motifs communs des menus :
   .modal > .sheet, h1/h2/h3, .kicker, .big (principal, crème), .mid/.ghost (contour), .pickChip,
   .role, champs, #hubLien, #toast. Les retouches propres à un jeu vont dans sa feuille.
   Rien ne change de taille : seules les couleurs et les habillages bougent.
   Le Feu de Camp a la sienne, plus complète (camp/css/nuit.css).
   ===================================================================== */
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 des jeux 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}
/* les fenêtres secondaires ouvertes PAR-DESSUS l'accueil (#fenetre .sheet.fixe : Raid, Ciel, Gouffre, Rame, Bois Noir, Animal Camp) :
   un vrai panneau de nuit, sinon le texte de l'accueil se lit à travers */
html body.nuitUI #fenetre .sheet.fixe,html body.nuitUI #fenetre .sheet{
  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}
html body.nuitUI .sheet h1{
  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}

/* ---- 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{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 .xClose{background:var(--n-case)!important;color:var(--n-texte)!important;border:0!important;box-shadow:none!important;border-radius:999px!important}

/* ---- rôles, puces, champs ---- */
html body.nuitUI .role,html body.nuitUI .modal .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 .modal .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)}

/* ---- 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}

/* ---- les autres boutons des fenêtres (onglets, choix, cartes d'aventure…) : cases de nuit ;
        le choix en cours a l'anneau de lanterne. Pas de !important sur le fond : un style posé
        dans la page (pastille de couleur…) garde la main. ---- */
html body.nuitUI .modal .sheet button:not(.big):not(.mid):not(.ghost):not(.pickChip):not(.xClose):not(.role):not(.card){
  background-color:var(--n-case);border-color:transparent;color:var(--n-texte);box-shadow:none}
html body.nuitUI .modal .sheet button:not(.big):not(.mid):not(.ghost):not(.pickChip):not(.xClose):not(.role):not(.card):hover{background-color:var(--n-case2)}
html body.nuitUI .modal .sheet button:not(.big):not(.mid):not(.ghost):not(.pickChip):not(.xClose):is([aria-pressed="true"],[aria-selected="true"],.sel,.on,.choisi,.actif){
  background-color:var(--n-case2)!important;box-shadow:inset 0 0 0 2px var(--n-lant)!important}

/* ---- les réglages propres à un jeu, dans la fenêtre commune (#setBody) : cases de nuit ---- */
html body.nuitUI .scVoile #setBody{color:var(--n-texte)}
html body.nuitUI .scVoile #setBody .setSec{background:var(--n-pan)!important;border:0!important;border-radius:14px!important}
html body.nuitUI .scVoile #setBody h3{color:var(--n-terre)!important}
html body.nuitUI .scVoile #setBody .hint,html body.nuitUI .scVoile #setBody p,html body.nuitUI .scVoile #setBody label,html body.nuitUI .scVoile #setBody .setAide{color:var(--n-gris)!important}
html body.nuitUI .scVoile #setBody .sRow button,html body.nuitUI .scVoile #setBody .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 .scVoile #setBody .sRow button[aria-pressed="true"]{background:var(--n-creme)!important;border-color:var(--n-creme)!important;color:#10151F!important}
html body.nuitUI .scVoile #setBody .kb span{color:var(--n-gris)}
html body.nuitUI .scVoile #setBody .kb b{color:var(--n-texte)}

/* =====================================================================
   LES AUTRES JEUX (oct. 2026) : mêmes motifs, autres noms de classes.
   - fenêtres .ov (Nuit, Counter Scout, Cimes, Animal Camp, Paper Scout) et .modal (Raid, Ciel, Gouffre, Rame, Siège, Repaire) ;
   - le voile bleu flou du jeu derrière les menus (comme La Veillée et Foulards & Dragons), plus de panneau papier ;
   - .big crème, .mid / .ghost en contour, .mid.vert = « Rejoindre / Créer » vert, .mid.bleu bleu, .gris sourd ;
   - fiches de rôle (.fiche, .carte, .mode, .carteItem, .av, .petitEcu) : cases de nuit, choix allumé = anneau de lanterne.
   ===================================================================== */
html body.nuitUI .ov,html body.nuitUI .modal{background:radial-gradient(ellipse 60% 75% at 50% 50%,rgba(10,14,34,.72),rgba(10,14,34,.3) 70%,rgba(10,14,34,.18))!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
html body.nuitUI .ov .sheet,html body.nuitUI .modal .sheet,html body.nuitUI .ov>.sheet{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--n-texte)!important}
html body.nuitUI .sheet h1,html body.nuitUI .sheet h2,html body.nuitUI .sheet h2.plaque,html body.nuitUI .sheet h3{color:var(--n-creme)!important;background:none!important;border:0!important;box-shadow:none!important;
  -webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important}
html body.nuitUI .sheet h3,html body.nuitUI .sheet .kicker,html body.nuitUI .sheet .petitTitre,html body.nuitUI .sheet .titreBas{color:var(--n-terre)!important}
html body.nuitUI .sheet p,html body.nuitUI .sheet li,html body.nuitUI .sheet label,html body.nuitUI .sheet .petit,html body.nuitUI .sheet .regles,html body.nuitUI .sheet .modeTxt,html body.nuitUI .sheet small{color:var(--n-doux)!important}
html body.nuitUI .sheet .petit,html body.nuitUI .sheet small,html body.nuitUI .sheet .muted{color:var(--n-gris)!important}
html body.nuitUI .sheet .lien,html body.nuitUI .sheet .codeBox b,html body.nuitUI .sheet .code,html body.nuitUI .sheet b.b,html body.nuitUI .sheet #sCode{color:var(--n-lant)!important;text-shadow:none!important;-webkit-text-stroke:0!important}
html body.nuitUI .sheet .codeBox,html body.nuitUI .sheet .lienInvit{background:var(--n-pan)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;color:var(--n-texte)!important}
html body.nuitUI .sheet .codeBox span,html body.nuitUI .sheet .codeBox small{color:var(--n-gris)!important}
html body.nuitUI .hubLien{color:var(--n-gris)!important}
html body.nuitUI .hubLien:hover,html body.nuitUI .hubLien:focus-visible{color:var(--n-creme)!important}
html body.nuitUI .sheet kbd{background:var(--n-case);color:var(--n-creme);border:0;border-bottom:2px solid var(--n-trait2);border-radius:6px}
/* boutons : les classes génériques */
html body.nuitUI .sheet button,html body.nuitUI .ov button{font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-weight:700;border-radius:999px;box-shadow:none;text-shadow:none;
  background:rgba(16,21,31,.45);color:var(--n-texte);border:1.5px solid var(--n-trait2)}
html body.nuitUI .sheet button:hover:not(:disabled),html body.nuitUI .ov button:hover:not(:disabled){background:var(--n-case);filter:none}
html body.nuitUI .sheet button:active,html body.nuitUI .ov button:active{transform:none;box-shadow:none}
html body.nuitUI .sheet button:disabled,html body.nuitUI .ov button:disabled{opacity:.45!important;background:transparent!important;color:var(--n-texte)!important}
html body.nuitUI .sheet .big,html body.nuitUI .ov .big,html body.nuitUI .sheet button.big,html body.nuitUI .ov button.big{background:var(--n-creme)!important;color:#10151F!important;border:0!important;box-shadow:none!important;text-shadow:none!important;
  border-radius:999px!important;font-family:'Atkinson Hyperlegible',system-ui,sans-serif!important;font-weight:700!important}
html body.nuitUI .sheet .big:hover:not(:disabled),html body.nuitUI .ov .big:hover:not(:disabled){background:#FFFFFF!important}
html body.nuitUI .sheet .mid,html body.nuitUI .sheet .ghost,html body.nuitUI .ov .mid,html body.nuitUI .ov .ghost,html body.nuitUI .sheet .mini,html body.nuitUI .ov .mini{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 .sheet .mid:hover:not(:disabled),html body.nuitUI .sheet .ghost:hover:not(:disabled),html body.nuitUI .ov .mid:hover:not(:disabled),html body.nuitUI .ov .ghost:hover:not(:disabled){background:var(--n-case)!important}
html body.nuitUI .sheet .mid.vert,html body.nuitUI .ov .mid.vert,html body.nuitUI .sheet button.vert,html body.nuitUI .ov button.vert,html body.nuitUI .sheet .mid.teal{background:#2F6B3F!important;border-color:#2F6B3F!important;color:var(--n-creme)!important}
html body.nuitUI .sheet .mid.bleu,html body.nuitUI .ov .mid.bleu,html body.nuitUI .sheet .mid.slate{background:#2A66A8!important;border-color:#2A66A8!important;color:var(--n-creme)!important}
html body.nuitUI .sheet .mid.rouge,html body.nuitUI .ov .mid.rouge,html body.nuitUI .sheet .ghost.danger{background:#A8272D!important;border-color:#A8272D!important;color:var(--n-creme)!important}
html body.nuitUI .sheet .mid.gris,html body.nuitUI .ov .mid.gris,html body.nuitUI .sheet .gris{color:var(--n-gris)!important}
html body.nuitUI .sheet .mid.vert:hover:not(:disabled),html body.nuitUI .ov button.vert:hover:not(:disabled){background:#3A7F4C!important}
/* un petit texte dans un bouton coloré (« nouveau », un prix…) reste crème, pas gris */
html body.nuitUI .sheet .mid.vert small,html body.nuitUI .sheet .mid.bleu small,html body.nuitUI .sheet .mid.rouge small,html body.nuitUI .sheet .big small{color:inherit!important;opacity:.85}
/* cases à choisir : fiches de rôle, cartes, modes… */
html body.nuitUI .sheet .fiche,html body.nuitUI .sheet .carte,html body.nuitUI .sheet .mode,html body.nuitUI .sheet .carteItem,html body.nuitUI .sheet .av,html body.nuitUI .sheet .petitEcu,html body.nuitUI .sheet .carteBaton,
html body.nuitUI .sheet .ligneAchat,html body.nuitUI .sheet .joueurs li,html body.nuitUI .sheet .equipes li,html body.nuitUI .sheet .ficheObjet,html body.nuitUI .sheet .ficheVide,html body.nuitUI .sheet .case{
  background:var(--n-case)!important;color:var(--n-texte)!important;border:1.5px solid transparent!important;border-radius:14px!important;box-shadow:none!important}
html body.nuitUI .sheet .fiche:hover,html body.nuitUI .sheet .carte:hover,html body.nuitUI .sheet .mode:hover,html body.nuitUI .sheet .carteItem:hover,html body.nuitUI .sheet .av:hover{background:var(--n-case2)!important}
html body.nuitUI .sheet .fiche.on,html body.nuitUI .sheet .carte.on,html body.nuitUI .sheet .carte.sel,html body.nuitUI .sheet .carte[aria-pressed="true"],html body.nuitUI .sheet .mode.on,html body.nuitUI .sheet .carteItem.on,
html body.nuitUI .sheet .av[aria-pressed="true"],html body.nuitUI .sheet .petitEcu.on,html body.nuitUI .sheet .fiche[aria-pressed="true"],html body.nuitUI .sheet .mode[aria-pressed="true"]{
  background:var(--n-case2)!important;box-shadow:inset 0 0 0 2px var(--n-lant)!important}
html body.nuitUI .sheet .fiche b,html body.nuitUI .sheet .carte b,html body.nuitUI .sheet .carte h3,html body.nuitUI .sheet .carteItem b,html body.nuitUI .sheet .av b,html body.nuitUI .sheet .fiche h3{color:var(--n-creme)!important}
html body.nuitUI .sheet .fiche span,html body.nuitUI .sheet .carte span,html body.nuitUI .sheet .carte p,html body.nuitUI .sheet .carteItem small,html body.nuitUI .sheet .av p,html body.nuitUI .sheet .av .tag,html body.nuitUI .sheet .fiche p,html body.nuitUI .sheet .stats{color:var(--n-gris)!important}
html body.nuitUI .sheet .carte.verrou,html body.nuitUI .sheet .carteItem.verrou,html body.nuitUI .sheet .carte:disabled{opacity:.5}
html body.nuitUI .sheet .joueurs li.vide,html body.nuitUI .sheet .equipes li.bot{background:transparent!important;border:1.5px dashed var(--n-trait2)!important;color:var(--n-sourd)!important}
html body.nuitUI .sheet .joueurs li i{box-shadow:none!important}
html body.nuitUI .sheet input:not([type=checkbox]):not([type=range]),html body.nuitUI .ov input:not([type=checkbox]):not([type=range]),html body.nuitUI .sheet select{
  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 .sheet .equipes h3.b{color:#8DB6E3!important}
html body.nuitUI .sheet .equipes h3.r{color:#E8878B!important}
/* le petit message en haut (toast / bulle) */
html body.nuitUI #toast,html body.nuitUI .toast,html body.nuitUI #msg .boite{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}

/* =====================================================================
   L'INTERFACE EN JEU (HUD) : panneaux de nuit semi-transparents, mêmes places et tailles.
   Les jeux peignent leurs panneaux avec des variables (--papier, --encre, --paper…) : on les redéfinit ;
   ceux qui ont le papier en dur (Raid, Ciel, Gouffre, Rame, Paper Scout) ont leurs classes ci-dessous.
   ===================================================================== */
html body.nuitUI{--papier:#161D2B;--papier2:#1C2433;--encre:#EDE6D6;--encre2:#A9A4B2;--beige:#161D2B;--creme:#F4EEDF;
  --paper:#161D2B;--paper2:#1C2433;--paper-lt:#1C2433;--ink-c:#EDE6D6;--ink:#EDE6D6;--t2:#A9A4B2;--off:#3A4459;--sombre:#0B0F17;--sombre2:#10151F;
  /* les fonds translucides et accents de jour : chaque jeu les déclare dans son :root avec SES valeurs de jour
     (ex. --papier-voile:rgba(255,250,235,.45)) et s'en sert à la place des couleurs en dur ; la nuit les repeint ici.
     --papier-voile : case translucide qui contient d'autres cases (blocs)     → panneau de nuit
     --papier-voile2 : case translucide (listes, onglets, boutons de choix)     → case de nuit
     --papier-case  : case plus opaque (fiches, cartes à choisir, pastilles)   → case de nuit
     --papier-champ : champ de saisie, touche, kbd (crème opaque)              → case de nuit
     --papier-sel   : case choisie / acquise (vert pâle, ocre pâle)            → case de nuit 2
     --papier-sourd : case éteinte (non gagnée, verrouillée ; souvent transparente le jour) → panneau de nuit
     --trait-voile  : bordure discrète (pointillés, filets)                    → trait de nuit 2
     --encre-accent / --encre-accent2 : accents colorés sur papier (vert, rouge) → terre / lanterne */
  --papier-voile:var(--n-pan);--papier-voile2:var(--n-case);--papier-case:var(--n-case);--papier-champ:var(--n-case);--papier-sel:var(--n-case2);--papier-sourd:var(--n-pan);
  --trait-voile:var(--n-trait2);--encre-accent:var(--n-terre);--encre-accent2:var(--n-lant)}
html body.nuitUI #hud{color:var(--n-texte)}
html body.nuitUI #hud .pan,html body.nuitUI .pan,html body.nuitUI .plaquette,html body.nuitUI #barre,html body.nuitUI #quete,html body.nuitUI #bulle,html body.nuitUI #infoBulle,
html body.nuitUI #mini,html body.nuitUI #carteGrande,html body.nuitUI #tAgir,html body.nuitUI .cadre,html body.nuitUI .buff,html body.nuitUI #diag,html body.nuitUI .hBloc,html body.nuitUI .cB,
html body.nuitUI #hud .ghost,html body.nuitUI #panneau,html body.nuitUI .stat,html body.nuitUI .iconBtn,html body.nuitUI #nuitProchaine,html body.nuitUI #zoomBtns button,html body.nuitUI #toast,html body.nuitUI .toast{
  background-color:rgba(16,21,31,.86)!important;background-image:none!important;border-color:rgba(44,52,70,.9)!important;color:var(--n-texte)!important;box-shadow:none!important;text-shadow:none!important}
html body.nuitUI .plaquette,html body.nuitUI #mini,html body.nuitUI #hud .ghost,html body.nuitUI .iconBtn,html body.nuitUI #zoomBtns button{border-radius:12px!important}
html body.nuitUI #hud .pan b,html body.nuitUI .plaquette b,html body.nuitUI #hudNom b,html body.nuitUI #hudSous b{color:var(--n-creme)!important}
html body.nuitUI #hudNom span,html body.nuitUI .plaquette span,html body.nuitUI #hud .pan small,html body.nuitUI #hud small,html body.nuitUI .hBloc small,html body.nuitUI .cB small{color:var(--n-gris)!important}
html body.nuitUI #hud .pan button,html body.nuitUI #hud button:not(.big):not(.mid):not(.ghost){color:var(--n-texte)}
html body.nuitUI kbd{background:#2C3446!important;color:#F4EEDF!important;border-color:#3A4459!important;box-shadow:none!important}
html body.nuitUI #hud .bar,html body.nuitUI .bar{background:#2C3446!important;border-color:transparent!important}
/* dialogues (Cimes, Animal Camp, Counter Scout, Paper Scout) */
html body.nuitUI #diag button,html body.nuitUI #dlgChoix button,html body.nuitUI #dlgFermer,html body.nuitUI #carnetFermer,html body.nuitUI #fenFermer{
  background:var(--n-case)!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 #diag button:hover,html body.nuitUI #dlgChoix button:hover,html body.nuitUI #dlgChoix button:focus{background:var(--n-case2)!important;border-color:var(--n-lant)!important}
html body.nuitUI #dlgChoix button{border-radius:12px!important}
html body.nuitUI #dlgNom,html body.nuitUI #diag b{color:var(--n-terre)!important}
/* la bulle de dialogue (Cimes, Animal Camp : div.dialogue ; Paper Scout : #dialogue) — pas les simples paragraphes p.dialogue (Dirigeable) */
html body.nuitUI div.dialogue,html body.nuitUI #dialogue:not(.ov),html body.nuitUI #dialogue.narrateur:not(.ov){background:rgba(16,21,31,.92)!important;border:0!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important;color:var(--n-texte)!important}
html body.nuitUI div.dialogue b,html body.nuitUI #dNom{color:var(--n-terre)!important}
html body.nuitUI div.dialogue p,html body.nuitUI #dTexte{color:var(--n-doux)!important}
html body.nuitUI #dPortrait{border-color:var(--n-trait2)!important;background:var(--n-case)!important}
html body.nuitUI #dSuite{color:var(--n-gris)!important}

/* ---- boutons secondaires lisibles partout (oct. 2026) : texte crème, plus de contour d'encre hérité
        du jeu (-webkit-text-stroke), fond de nuit assez opaque pour se lire sur un décor clair ;
        « gris » = un peu plus doux, jamais terne ---- */
html body.nuitUI .sheet button,html body.nuitUI .ov button,html body.nuitUI .modal button{-webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important}
html body.nuitUI .sheet .mid,html body.nuitUI .sheet .ghost,html body.nuitUI .ov .mid,html body.nuitUI .ov .ghost,html body.nuitUI .sheet .mini,html body.nuitUI .ov .mini,html body.nuitUI .mid,html body.nuitUI .ghost{
  background:rgba(16,21,31,.82)!important;color:var(--n-creme)!important;border-color:#4A5570!important}
html body.nuitUI .sheet .mid:hover:not(:disabled),html body.nuitUI .ov .mid:hover:not(:disabled),html body.nuitUI .sheet .ghost:hover:not(:disabled),html body.nuitUI .ov .ghost:hover:not(:disabled){background:var(--n-case2)!important;border-color:var(--n-terre)!important}
html body.nuitUI .sheet .mid.gris,html body.nuitUI .ov .mid.gris,html body.nuitUI .sheet button.gris,html body.nuitUI .ov button.gris{color:var(--n-doux)!important}

/* ---- les boutons tactiles ronds en jeu (Cimes, Coin Chill : #doigts ; Paper Scout, Arène : .tBtn ;
        Dirigeable : #tactile .tb, #pave ; Rame : #tactile button) — oct. 2026.
        Le papier crème de jour + --encre repeinte en crème la nuit = icônes invisibles :
        disques de nuit translucides, bord trait de nuit, icônes et texte crème ;
        appuyé / actif = anneau de lanterne. Mêmes tailles, mêmes places (seules couleurs et ombres bougent). ---- */
html body.nuitUI #doigts button,html body.nuitUI .tBtn,html body.nuitUI #tactile .tb,html body.nuitUI #tactile button,html body.nuitUI #pave button{
  background:rgba(16,21,31,.72)!important;border-color:var(--n-trait2)!important;color:var(--n-creme)!important;box-shadow:none!important;text-shadow:none!important}
html body.nuitUI .tBtn small,html body.nuitUI .tBtn span{color:var(--n-creme)!important}
html body.nuitUI #doigts button:active,html body.nuitUI #doigts button.actif,html body.nuitUI .tBtn:active,html body.nuitUI .tBtn.on,
html body.nuitUI #tactile .tb:active,html body.nuitUI #tactile .tb.on,html body.nuitUI #tactile button:active,html body.nuitUI #tactile button.on,html body.nuitUI #pave button:active{
  background:rgba(35,44,62,.82)!important;border-color:var(--n-lant)!important;box-shadow:0 0 0 2px var(--n-lant)!important}

/* ---- le dialogue en bas de l'écran (Cimes, Coin Chill : <div class="ov bas" id="dialogue">) — oct. 2026.
        Le calque plein écran ne doit pas être voilé : seule la bulle est un panneau de nuit, le décor reste visible
        (avant : le motif #dialogue de Paper Scout peignait tout l'écran en nuit à 92 %). ---- */
html body.nuitUI .ov.bas{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* le lien « Tous les jeux » et les petites lignes d'aide restent lisibles sur un décor clair */
html body.nuitUI .hubLien,html body.nuitUI #hubLien{color:var(--n-doux)!important;text-shadow:0 1px 3px rgba(0,0,0,.75)!important}
html body.nuitUI .ov .sheet>p.petit,html body.nuitUI .ov .sheet>.petit,html body.nuitUI .ov .sheet .kicker{text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* =====================================================================
   LE MENU D'ACCUEIL SUR LE CÔTÉ (oct. 2026) — les neuf jeux : Arène, Scout en papier, Bois Noir, Coin Chill,
   Sentiers, Caverne, Gouffre, Rame du Calao, Cimes.
     <div class="ov menuCote" id="titre">…   ou   <div class="modal menuCote" id="titre">…   (+ « droite » pour le poser à droite)
   - la scène du jeu se voit derrière, à peine voilée (le voile bleu flou des menus, ci-dessus) ;
     + « ombre » : un dégradé sombre du côté du menu, pour un décor clair (aucun par défaut) ;
   - une colonne de largeur fixe (--cote-l, 540px par défaut), posée à 6vw du bord, texte et boutons alignés à gauche ;
     elle défile si l'écran est trop bas (téléphone couché) ;
   - téléphone en portrait (≤ 760px) : toute la largeur, 16px de marge.
   Les fenêtres secondaires (comment jouer, réglages, rejoindre…) ne changent pas.
   ===================================================================== */
html body.nuitUI .menuCote{justify-content:flex-start;align-items:center;padding:16px 16px 16px max(16px,6vw);box-sizing:border-box;overflow:hidden}
html body.nuitUI .menuCote.droite{justify-content:flex-end;padding:16px max(16px,6vw) 16px 16px}
html body.nuitUI .menuCote::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cote-ombre,none)}
html body.nuitUI .menuCote>.sheet{position:relative;width:min(var(--cote-l,540px),100%)!important;max-width:100%!important;min-width:0;max-height:100%;overflow:auto;
  margin:0!important;box-sizing:border-box;text-align:left;flex:0 0 auto;overscroll-behavior:contain}
html body.nuitUI .menuCote>.sheet>*{min-width:0;max-width:100%}
html body.nuitUI .menuCote>.sheet :is(h1,h2,.kicker,.petit,p,.muted){text-align:left!important;margin-left:0!important;margin-right:0!important}
html body.nuitUI .menuCote>.sheet h1{width:auto!important}
html body.nuitUI .menuCote>.sheet :is(.ligne,.row){justify-content:flex-start!important}
/* + « ombre » (décor clair : Cimes, Rame) : un dégradé sombre du côté du menu pour la lisibilité */
html body.nuitUI .menuCote.ombre{--cote-ombre:linear-gradient(90deg,rgba(10,14,34,.5),rgba(10,14,34,.32) 40%,rgba(10,14,34,0) 68%)}
html body.nuitUI .menuCote.droite.ombre{--cote-ombre:linear-gradient(270deg,rgba(10,14,34,.5),rgba(10,14,34,.32) 40%,rgba(10,14,34,0) 68%)}
@media (max-width:760px){
  html body.nuitUI .menuCote,html body.nuitUI .menuCote.droite{justify-content:center;padding:16px}
  html body.nuitUI .menuCote.ombre,html body.nuitUI .menuCote.droite.ombre{--cote-ombre:rgba(10,14,34,.3)}
}