/* =====================================================
   Finitions esthétiques : lisibilité, zones tactiles, boutons, profil, états vides, mode clair/sombre.
   Chargé en dernier : ne remplace que ce qui est indiqué.
   ===================================================== */
:root{--petit:"Pixelify Sans","Press Start 2P",ui-monospace,Menlo,Consolas,monospace}

/* ---- 1. roue des réglages : ne cache plus le bas des pages ---- */
main{padding-bottom:96px}
#bfRegBtn{transition:opacity .25s}
html.defile #bfRegBtn:not(:hover):not(:focus-visible){opacity:.3}

/* ---- 3. petits textes : même police qu'avant (Press Start 2P), simplement un peu plus grands ---- */
.hint{font-size:9px}
.empty{font-size:9px}
.msg,#msg{font-size:9px}
.boostmsg{font-size:10px}
.pied{font-size:10px}
.pied .modbtn{font-size:10px}
.side{font-size:9px}
.side .lbl,.side .field{font-size:9px}
.side .hint{font-size:8px}
.side button{font-size:9px}
.side .txt{font-size:9px}
.mini .t{font-size:8px}
.mini .acts button{font-size:8px}
.badge{font-size:8px}
kbd{font-size:9px}
button{font-size:10px}
.dbtn small{font-size:8px}
.dopt{font-size:8px}
.fsombre small{font-size:8px}
.mini .fl,.mini .fl button{font-size:7px}

/* ---- tri de la galerie : le bouton « Tri : du + rare au − rare » reste blanc, même enfoncé ---- */
.dopt[data-opt="tri"][aria-pressed="true"],.dopt[data-opt="asc"][aria-pressed="true"],.dopt:not([data-opt="fav"])[aria-pressed="true"]{background:var(--panel);color:var(--ink)}

/* ---- profil : tous les éléments agrandis ---- */
#vueProfil{zoom:1.3}
@media (max-width:760px){#vueProfil{zoom:1.15}}

/* ---- 10. boutons : léger soulèvement au survol, aspect net quand ils sont inactifs ---- */
.panel button:not(:disabled):not([aria-pressed="true"]):hover,.side button:not(:disabled):not([aria-pressed="true"]):hover,header.top nav button:not(:disabled):not([aria-pressed="true"]):hover,#bfReglages button:not(:disabled):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.panel button:not(:disabled):active,.side button:not(:disabled):active,header.top nav button:not(:disabled):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.panel button:disabled,.side button:disabled,header.top nav button:disabled{opacity:.45;cursor:not-allowed;box-shadow:2px 2px 0 var(--line)}
@media (prefers-reduced-motion:reduce){.panel button:hover,.side button:hover,header.top nav button:hover{transform:none!important}}

/* ---- 4. zones tactiles plus généreuses sur mobile / écran tactile ---- */
@media (max-width:760px),(pointer:coarse){
  header.top nav button{min-height:42px}
  .side button:not(.fbtn):not(.sw),.panel > .row > button,#profOpts button,.field button,.arena-actions button,#bfReglages button{min-height:40px}
  input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
  .field{gap:12px}
}

/* ---- 9. éditeur sur mobile : le dessin reste visible en haut pendant qu'on fait défiler les outils ---- */
@media (max-width:620px){
  .center{position:sticky;top:6px;z-index:30;background:var(--bg);padding:6px 0 8px;box-shadow:0 6px 0 -2px var(--bg)}
  .studio .card{width:min(100%,calc(38vh * .8))}
}

/* ---- 7. profil : infos à gauche, badges à droite (écran large) ---- */
@media (min-width:1000px){
  #vueProfil:not([hidden]){display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"info badges" "liens badges" "reste reste";gap:16px;align-items:start}
  #vueProfil > .panel:first-child{grid-area:info}
  #vueProfil > #profBadges{grid-area:badges}
  #vueProfil > #profLiens{grid-area:liens}
  #vueProfil > :not(.panel){grid-area:reste}
}

/* ---- 13. états vides : petite carte pixel au-dessus du texte ---- */
.empty{text-align:center;padding:14px 8px;line-height:1.5}
.empty:not(.charge)::before{content:"";display:block;width:44px;height:56px;margin:0 auto 10px;background:var(--ink);opacity:.32;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14' shape-rendering='crispEdges'><path d='M1 0h9v1h1v12h-1v1H1v-1H0V1h1zM2 2v10h7V2zM5 4h1v1h1v1h-1v1H5V6H4V5h1z' fill-rule='evenodd'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14' shape-rendering='crispEdges'><path d='M1 0h9v1h1v12h-1v1H1v-1H0V1h1zM2 2v10h7V2zM5 4h1v1h1v1h-1v1H5V6H4V5h1z' fill-rule='evenodd'/></svg>") center/contain no-repeat}
.empty .vide-act{margin-top:12px}

/* ---- 15. récompense de badge : éclat ---- */
.fete-p{position:fixed;z-index:500;width:6px;height:6px;pointer-events:none}
.fete-t{position:fixed;z-index:501;pointer-events:none;font-size:14px;color:var(--accent);text-shadow:2px 2px 0 var(--bg),-2px -2px 0 var(--bg),2px -2px 0 var(--bg),-2px 2px 0 var(--bg)}

/* ---- 16. apparence : Auto / Clair / Sombre ---- */
.apparence{margin-top:12px}
.apparence .row{margin-top:6px}

/* onglet Boosters : la ligne « mentions légales · conditions · confidentialité · modération » reste toujours dans l'écran (elle passait sous la barre des tâches quand les boosters s'ouvrent) */
html.boost-fixe #pied{position:fixed;left:0;right:0;bottom:6px;margin:0;z-index:5;pointer-events:none}
html.boost-fixe #pied a,html.boost-fixe #pied button{pointer-events:auto}

/* pied de page (mentions légales…) : toujours tout en bas de la fenêtre, même sur les onglets courts */
main{display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box;padding-bottom:20px!important}
main>#pied{margin:auto auto 0;padding-top:28px;width:100%}
html.boost-fixe #pied{padding-top:0;width:auto}

/* le ciseau est à l'écran : la ligne des mentions légales est masquée (seulement sur l'onglet Boosters, le temps de la découpe) */
html.boost-fixe.sans-pied #pied{display:none}