/* app/atelier.css — l'écran de l'atelier (app/atelier.js) : Arsenal-X, la liste des armes à forger. */

.arena-panel.atelier-ecran{width:min(760px,100%);}
.atelier{display:flex;flex-direction:column;gap:8px;}
.atelier-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.atelier-sur{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8e96ad;font-weight:700;}
.atelier-tete .arena-title{margin:0;font-size:24px;}
.atelier-onglets{display:flex;gap:6px;}
.atelier-onglet{flex:1;text-align:center;padding:8px 0;border-radius:10px;font-size:12px;font-weight:800;color:#9ea6bd;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.atelier-onglet.on{color:#07060f;background:#00e0ff;border-color:#00e0ff;}
.atelier-onglet.off{color:#6d7488;background:transparent;border-style:dashed;cursor:default;}
.atelier-onglet small{display:block;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.arena-panel .atelier-intro{margin:0;font-size:12.5px;color:#9ea6bd;}
.atelier-armes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;}
.atelier-arme{display:flex;align-items:center;gap:9px;min-width:0;padding:6px 9px;border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:#e7e9ee;
 background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:border-color .15s,background .15s;}
.atelier-arme:hover,.atelier-arme:focus-visible{border-color:rgba(255,255,255,.28);outline:none;}
.atelier-arme.sel{border-color:rgba(0,224,255,.6);background:rgba(0,224,255,.07);}
.atelier-arme .arena-ico{width:36px;height:24px;flex:none;object-fit:contain;}
.atelier-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.atelier-nom{font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.atelier-nom small{font-size:10px;font-weight:700;color:#ffd63d;}
.atelier-arme.fini .atelier-nom small{color:#7dff6a;}
.atelier-txt{font-size:10.5px;color:#8e96ad;line-height:1.3;}
.atelier-ligne{display:flex;align-items:center;gap:12px;margin-top:2px;}
.atelier-pips{display:flex;gap:3px;}
.atelier-maitrise{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:10px;color:#8e96ad;white-space:nowrap;}
.atelier-maitrise b{color:#c9a6ff;font-weight:800;}
.atelier-jauge{position:relative;flex:1;max-width:90px;height:4px;border-radius:2px;background:#15132a;overflow:hidden;}
.atelier-jauge i{position:absolute;inset:0;transform-origin:0 0;background:linear-gradient(90deg,#9a5cff,#ff2fd0);}
.atelier-pips i{width:12px;height:6px;border-radius:2px;background:#15132a;border:1px solid rgba(255,255,255,.12);}
.atelier-pips i.on{background:#00e0ff;border-color:#00e0ff;box-shadow:0 0 6px rgba(0,224,255,.6);}
.atelier-pips i.modif{width:8px;height:8px;border-radius:50%;margin:-1px 0 0 2px;}
.atelier-pips i.modif.on{background:#ffd63d;border-color:#ffd63d;box-shadow:0 0 6px rgba(255,214,61,.7);}
.atelier-prix{flex:none;font-size:11px;font-weight:800;color:#7ff3ff;white-space:nowrap;font-variant-numeric:tabular-nums;}
.atelier-prix .aerg-ico{margin:0 0 0 .2em;}
.atelier-arme.cher .atelier-prix{color:#8e96ad;}
.atelier-arme.fini .atelier-prix{color:#7dff6a;}
.atelier-detail{padding:7px 10px;border-radius:10px;font-size:12px;color:#c9cfe0;background:rgba(0,224,255,.05);border:1px solid rgba(0,224,255,.25);line-height:1.4;}
.atelier-detail b{color:#fff;}
.atelier .arena-actions{margin-top:4px;}
.atelier .arena-actions .primary{flex:1.6;}
.atelier .arena-btn small{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;}
.atelier .arena-btn .aerg-ico{margin:0 0 0 .25em;}

/* Téléphone : une colonne, lignes serrées, titre plus petit. */
html.petit-ecran .atelier-tete .arena-title{font-size:20px;}
html.petit-ecran .atelier-arme{padding:5px 8px;gap:7px;}
html.petit-ecran .atelier-arme .arena-ico{width:30px;height:20px;}
html.petit-ecran .atelier-txt{font-size:10px;}
html.petit-ecran .atelier-onglet{padding:6px 0;font-size:11px;}
html.petit-ecran .atelier .arena-actions .arena-btn{font-size:12px;padding:0 6px;}
@media (max-width:640px){.atelier-armes{grid-template-columns:minmax(0,1fr);}}
/* Téléphone debout : tout tient sans défiler. Lignes d'une hauteur (le détail de l'arme choisie
   est dans l'encadré du bas), pas d'introduction ; si l'écran est trop court, seule la liste des
   armes défile, les boutons restent en bas. Le grand bouton prend toute la largeur au-dessus. */
@media (orientation:portrait){
 html.petit-ecran .arena-panel.atelier-ecran{display:flex;flex-direction:column;overflow:hidden;padding-bottom:10px;}
 html.petit-ecran .atelier{flex:1;min-height:0;gap:6px;}
 html.petit-ecran .atelier-intro,html.petit-ecran .atelier-txt{display:none;}
 html.petit-ecran .atelier-tete .arena-title{font-size:18px;}
 html.petit-ecran .atelier-onglet{padding:4px 0;}
 html.petit-ecran .atelier-onglet small{display:inline;margin-left:4px;}
 html.petit-ecran .atelier-armes{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:4px;}
 html.petit-ecran .atelier-arme{padding:4px 8px;min-height:44px;}
 html.petit-ecran .atelier-nom{font-size:12px;}
 html.petit-ecran .atelier-ligne{gap:8px;}
 html.petit-ecran .atelier-pips i{width:9px;}
 html.petit-ecran .atelier-maitrise small{display:none;}
 html.petit-ecran .atelier-corps{overflow:hidden;}
 html.petit-ecran .atelier-detail{padding:5px 9px;font-size:11.5px;}
 html.petit-ecran .atelier .arena-actions{position:static;flex-wrap:wrap;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);background:none;}
 html.petit-ecran .atelier .arena-actions .arena-btn{min-height:40px;}
 html.petit-ecran .atelier .arena-actions .primary{order:-1;flex:1 1 100%;}
}