/* Bastide — habillage. Même chaleur que Nidou (polices, crème, brun), mais une interface de jeu :
   une barre en bas, un tiroir qui monte, et tout le reste de l'écran laissé à la ville. */
:root{
  --creme:#f6efe0; --creme2:#efe5d2; --brun:#5c4634; --brun2:#8a7560; --ligne:#d9cbb4; --ombre:rgba(92,70,46,.2);
  --accent:#9d5340; --mauvais:#b4553f;
  --font-titre:'Nidou Titres',system-ui,sans-serif; --font-texte:'Nidou Texte',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#cdbfa6;font-family:var(--font-texte);color:var(--brun);font-synthesis:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

#ui{position:fixed;inset:0;pointer-events:none}
#ui button{pointer-events:auto;font-family:var(--font-texte);color:var(--brun);cursor:pointer;border:0;background:none}
#ui button:disabled{opacity:.35;cursor:default}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ----- en haut ----- */
.haut{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start}
.ville{pointer-events:auto;display:flex;flex-direction:column;gap:2px;background:var(--creme);border:1px solid var(--ligne);
  border-radius:14px;padding:10px 16px;box-shadow:0 8px 22px var(--ombre)}
.ville b{font-family:var(--font-titre);font-weight:700;font-size:15px;letter-spacing:3px}
.ville span{font-size:11px;color:var(--brun2)}
.rond{width:44px;height:44px;border-radius:50%;background:var(--creme);border:1px solid var(--ligne);display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 16px var(--ombre);transition:transform .12s,background .12s}
.rond:hover{background:#fff;transform:translateY(-1px)}
.rond.petit{width:30px;height:30px;box-shadow:none;font-size:16px}
.burger{width:16px;height:2px;background:var(--brun);border-radius:2px;position:relative;display:block}
.burger:before,.burger:after{content:'';position:absolute;left:0;width:16px;height:2px;background:var(--brun);border-radius:2px}
.burger:before{top:-5px}.burger:after{top:5px}
.menu{position:absolute;top:52px;right:0;display:flex;flex-direction:column;gap:4px;background:var(--creme);border:1px solid var(--ligne);
  border-radius:14px;padding:8px;box-shadow:0 12px 30px var(--ombre);min-width:200px}
.menu button{text-align:left;padding:10px 12px;border-radius:9px;font-size:13px}
.menu button:hover{background:var(--creme2)}
.menu .danger{color:var(--mauvais)}

/* ----- la barre ----- */
.barre{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  background:var(--creme);border:1px solid var(--ligne);border-radius:20px;padding:9px 12px;box-shadow:0 14px 36px rgba(92,70,46,.28);
  max-width:calc(100vw - 24px)}
.groupe{display:flex;gap:6px;align-items:center}
.sep{width:1px;align-self:stretch;background:var(--ligne);margin:4px 0}
.en-main{pointer-events:auto;display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:14px;background:var(--creme2);border:1px solid var(--ligne);min-width:170px}
.en-main img{width:44px;height:44px;border-radius:10px;background:#fff;display:block}
.en-main b{display:block;font-size:12.5px;font-family:var(--font-titre);font-weight:700;letter-spacing:.3px}
.en-main small{color:var(--brun2);font-size:10px}
.familles .famille{display:flex;flex-direction:column;align-items:center;gap:3px;width:60px;padding:7px 4px 6px;border-radius:12px;transition:background .12s,transform .12s}
.famille span{font-size:9.5px;letter-spacing:.6px;font-family:var(--font-titre);font-weight:700;text-transform:uppercase}
.famille .ico{width:24px;height:24px}
.famille:hover{background:var(--creme2);transform:translateY(-1px)}
#ui .famille[aria-pressed=true]{background:var(--brun);color:var(--creme)}
.famille.en-main:not([aria-pressed=true]){box-shadow:inset 0 -3px 0 var(--accent)}
.couleur{width:44px;height:44px;border-radius:50%;background:var(--c,#c07a5c);box-shadow:0 0 0 3px var(--creme),0 0 0 4px var(--ligne),0 6px 16px var(--ombre);transition:transform .12s}
.couleur:hover{transform:scale(1.06)}

/* ----- le tiroir ----- */
.tiroir{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));
  background:var(--creme);border:1px solid var(--ligne);border-radius:18px;box-shadow:0 18px 44px rgba(92,70,46,.3);pointer-events:auto;
  animation:monte .18s ease-out}
@keyframes monte{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.t-tete{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 4px}
.t-tete b{font-family:var(--font-titre);font-weight:700;font-size:14px;letter-spacing:1px}
.t-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:10px 14px 14px;max-height:46vh;overflow-y:auto;scrollbar-width:thin}
.carte{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 9px;border-radius:14px;background:var(--creme2);border:1px solid transparent;transition:transform .12s,background .12s}
.carte img{width:84px;height:84px;display:block}
.carte span{font-size:11px;line-height:1.2;text-align:center}
.carte span b{display:block;font-family:var(--font-titre);font-weight:700;font-size:12px}
.carte span small{color:var(--brun2);font-size:10px}
.carte:hover{background:#fff;transform:translateY(-2px)}
#ui .carte.on{background:#fff;border-color:var(--brun);box-shadow:0 0 0 2px var(--creme),0 0 0 3px var(--brun)}

/* ----- le nuancier ----- */
.nuancier{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(8,38px);gap:8px;
  background:var(--creme);border:1px solid var(--ligne);border-radius:16px;padding:12px;box-shadow:0 18px 44px rgba(92,70,46,.3);pointer-events:auto;animation:monte .18s ease-out}
.teinte{width:38px;height:38px;border-radius:11px;background:var(--c);box-shadow:0 0 0 1px var(--ligne);transition:transform .12s}
.teinte:hover{transform:scale(1.08)}
#ui .teinte[aria-pressed=true]{box-shadow:0 0 0 2px var(--creme),0 0 0 4px var(--brun)}

/* ----- aide, messages, diagnostic ----- */
.aide{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);margin:0;background:rgba(246,239,224,.92);border:1px solid var(--ligne);
  border-radius:11px;padding:8px 14px;font-size:11.5px;color:var(--brun2);box-shadow:0 6px 16px var(--ombre);transition:opacity .5s,transform .5s;pointer-events:none;white-space:nowrap}
.aide b{color:var(--brun);font-family:var(--font-titre);font-weight:700}
.aide.cachee{opacity:0;transform:translate(-50%,8px)}
.tiroir:not(.hidden)~.aide,.nuancier:not(.hidden)~.aide{opacity:0}
.toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);background:var(--brun);color:var(--creme);border-radius:12px;padding:10px 16px;font-size:13px;box-shadow:0 10px 26px var(--ombre)}
.toast.mauvais{background:var(--mauvais)}
.dev{position:absolute;left:14px;bottom:14px;font-size:11px;color:var(--brun2);background:rgba(246,239,224,.85);padding:6px 10px;border-radius:8px}

@media (max-width:820px){ .en-main{min-width:0} .en-main div{display:none} .famille span{display:none} .familles .famille{width:44px} .aide{display:none} }
/* la 3D n'a pas démarré : on le dit au milieu de l'écran, au lieu d'un fond vide */
.sans-3d{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;background:var(--creme);border:1px solid var(--ligne);
  border-radius:16px;padding:22px 26px;box-shadow:0 18px 44px rgba(92,70,46,.3);font-size:14px;line-height:1.6}
.sans-3d b{font-family:var(--font-titre);font-weight:700;font-size:16px;display:block;margin-bottom:8px}
.sans-3d p{margin:0;color:var(--brun2)}