/* app/menus/atelier.css — l'écran de l'atelier (app/menus/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-tete .arena-title{margin:0;font-size:24px;color:#00e0ff;}
.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);}
button.atelier-onglet{font-family:inherit;cursor:pointer;}
.atelier-onglet.on{color:#07060f;background:#00e0ff;border-color:#00e0ff;}
.atelier-onglet.on small{color:#07364a;}
.atelier-onglet.off{color:#6d7488;background:transparent;border-style:dashed;cursor:default;}
.atelier-onglet small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.arena-panel .atelier-intro{margin:0;font-size:12.5px;color:#9ea6bd;}
.arena-panel .atelier-remise{margin:0;font-size:12px;font-weight:700;color:#ffd63d;}
.arena-panel .atelier-but{margin:0;font-size:13px;font-weight:700;color:#e8ecf6;line-height:1.3;}
.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:focus-visible{border-color:rgba(255,255,255,.28);outline:none;}@media (hover:hover){:where(html:not(.doigt)) .atelier-arme:hover{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:11px;font-weight:700;color:#ffd63d;}
.atelier-arme.zero .atelier-nom small{color:#8e96ad;}
.atelier-arme.fini .atelier-nom small{color:#7dff6a;}
.atelier-ligne{display:flex;align-items:center;gap:12px;margin-top:2px;}
.atelier-pips{display:flex;gap:3px;}
.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);}
/* Le modificateur (doré) et le surblindage (violet) : un losange SVG, éteint (contour) ou allumé ;
   jamais un rond, réservé à la maîtrise. */
svg.losange{flex:none;display:inline-block;width:9px;height:9px;vertical-align:-.05em;overflow:visible;}
svg.losange path{fill:#15132a;stroke:rgba(255,255,255,.32);stroke-width:1;stroke-linejoin:miter;}
svg.losange.modif.on path{fill:#ffd63d;stroke:#ffd63d;}
svg.losange.sur.on path{fill:#b48cff;stroke:#b48cff;}
svg.losange.sur.next path{stroke:#b48cff;stroke-dasharray:1.6 1.2;}
/* Le prestige (après le modificateur) : une étoile blanc chaud et le nombre d'étoiles. */
.prestige{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:#8e96ad;line-height:1;}
.prestige svg{width:10px;height:10px;flex:none;overflow:visible;}
.prestige path{fill:#15132a;stroke:rgba(255,255,255,.32);stroke-width:.8;stroke-linejoin:round;}
.prestige.on{color:#fff0c2;}
.prestige.on path{fill:#fff0c2;stroke:#fff0c2;filter:drop-shadow(0 0 2px rgba(255,220,140,.8));}
.atelier-pips .prestige{margin-left:4px;}
.atelier-detail .prestige-nom{color:#fff0c2;}
.atelier-pips svg.losange{margin-left:3px;}
.atelier-detail svg.losange{margin:0 1px;}
.atelier-detail .niv-arme{color:#00e0ff;}
.atelier-detail .mod-nom{color:#ffd63d;}
/* La maîtrise (choix C de Tris) : le niveau dans un rond SVG dont le contour violet se remplit vers
   le niveau suivant (plein, en dégradé, à la maîtrise 5) ; le chiffre centré sur le rond. */
svg.mq-rond{flex:none;display:block;width:19px;height:19px;overflow:visible;}
.mq-rond .mq-fond{fill:#0e0c1f;stroke:#2a2545;stroke-width:3;}
.mq-rond .mq-arc{fill:none;stroke:#c97bff;stroke-width:3;}
.mq-rond text{fill:#e5d6ff;font-size:11px;font-weight:900;font-family:inherit;}
.mq-rond.m5 .mq-fond{fill:url(#mq-plein);stroke:url(#mq-plein);}
.mq-rond.m5 text{fill:#fff;}
.mq-m{display:flex;align-items:center;gap:7px;margin-top:3px;flex-wrap:wrap;row-gap:1px;}
.mq-m .mq-rond{width:26px;height:26px;}
.mq-m .mq-t{color:#e5d6ff;}
.mq-m .mq-t b{color:#c9a6ff;}
.mq-m .mq-n{color:#8e96ad;font-size:max(11px,.92em);}
.mq-m .mq-n b{color:#c9a6ff;font-weight:700;}
/* La légende des jauges, en une ligne (maquette 1). */
.arena-panel .atelier-legende{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;font-size:11px;color:#8e96ad;line-height:1.3;}
.atelier-legende span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.atelier-legende .lg-niv{width:10px;height:6px;border-radius:2px;background:#00e0ff;box-shadow:0 0 5px rgba(0,224,255,.5);}
.atelier-legende .mq-rond{width:14px;height:14px;}
/* Dans l'Arsenal-X, la légende est sur la ligne du titre ; sur un téléphone debout, elle passe dessous,
   à la place de l'introduction. */
.atelier-tete .atelier-legende{flex:1;min-width:0;}
@media (orientation:portrait){
 html.petit-ecran .atelier-tete:has(.atelier-legende){flex-wrap:wrap;row-gap:4px;}
 html.petit-ecran .atelier-tete .atelier-legende{order:3;flex-basis:100%;justify-content:flex-start;gap:2px 10px;font-size:11px;}
 html.petit-ecran .atelier[data-vue~="legende"] > .atelier-intro{display:none;}
}
.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-prix{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;}
.atelier-prix span{white-space:nowrap;}
.atelier-prix small{font-size:11px;font-weight:700;color:#8e96ad;letter-spacing:.02em;}
.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;}
/* Le bouton d'achat (Améliorer, Blinder, Acheter à l'atelier ; Réveiller, Niveau sur la fiche d'un
   perso) : écrit en bleu, le titre en haut et le prix dessous avec le symbole cristal habituel. Sans assez
   de cristaux, il pâlit sans changer de forme ; le manque est écrit au-dessus (.atelier-manque). Le cyan plein
   reste à « Déployer ». */
.arena-root .arena-btn.atelier-action{height:auto;min-height:40px;padding:4px 6px;line-height:1.2;color:#00e0ff;font-weight:800;letter-spacing:0;text-transform:none;
 background:rgba(0,224,255,.06);border:1px solid rgba(0,224,255,.45);border-radius:10px;box-shadow:none;}
.arena-root .arena-btn.atelier-action:focus-visible{background:rgba(0,224,255,.12);border-color:#00e0ff;box-shadow:0 0 14px rgba(0,224,255,.25);outline:none;}@media (hover:hover){:where(html:not(.doigt)) .arena-root .arena-btn.atelier-action:hover{background:rgba(0,224,255,.12);border-color:#00e0ff;box-shadow:0 0 14px rgba(0,224,255,.25);outline:none;}}
.arena-root .arena-btn.atelier-action[disabled]{color:rgba(0,224,255,.45);background:rgba(255,255,255,.02);border:1px solid rgba(0,224,255,.16);box-shadow:none;}
.arena-root .atelier-action .prix-aerg{display:block;white-space:nowrap;font-size:.92em;font-weight:700;color:#e8ecf6;}
.arena-root .atelier-action[disabled] .prix-aerg{color:#6f778f;}
.arena-root .atelier-action .aerg-ico{width:.8em;height:1em;vertical-align:-.12em;margin:0 0 0 .2em;filter:none;}
.arena-root .atelier-action[disabled] .aerg-ico{opacity:.5;filter:none;}
.arena-panel .atelier-manque{margin:0;text-align:center;font-size:12px;color:#9ea6bd;}
.atelier-manque b{color:#e8ecf6;white-space:nowrap;}
.atelier-manque .aerg-ico{margin:0 0 0 .15em;}

/* Chantier-Æ : les six bâtiments (dessinés comme en partie), leur niveau sur dix (cinq crans de leur
   couleur, puis cinq dorés), et la fiche du bâtiment choisi : valeurs avant → après, échelle des dix
   niveaux avec leur prix, ce qu'il reste à payer. --c : la couleur du bâtiment. */
.bat-ligne{--c:#00e0ff;}
/* Sélection : contour de même épaisseur tout autour (Tris, 27/10 : plus de liseré épais à gauche, nulle part). */
.bat-ligne.sel{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);box-shadow:inset 0 0 0 1px var(--c);}
.bat-apercu{flex:none;width:40px;height:40px;}
.bat-niveau{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;}
.bat-niveau b{font-size:15px;font-weight:900;color:var(--c);line-height:1;}
.bat-niveau small{font-size:11px;font-weight:700;color:#6f778f;margin-left:-4px;}
.bat-crans{display:flex;gap:2px;}
.bat-crans i{width:11px;height:7px;border-radius:2px;background:#15132a;border:1px solid rgba(255,255,255,.12);}
.bat-crans i.on{background:var(--c);border-color:var(--c);box-shadow:0 0 5px color-mix(in srgb,var(--c) 70%,transparent);}
.bat-ligne .bat-fini{color:#ffe27a;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.bat-fiche{--c:#00e0ff;display:flex;flex-direction:column;gap:7px;padding:9px 10px;border-radius:12px;
 background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,transparent),rgba(8,10,20,.6) 60%);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);}
.bat-tete{display:flex;gap:11px;align-items:center;min-width:0;}
.bat-grand{flex:none;width:88px;height:88px;border-radius:14px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 18%,#121628),#0a0b14 72%);border:1px solid rgba(255,255,255,.1);}
.bat-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.bat-titre{font-size:16px;font-weight:900;color:#fff;line-height:1.1;}
.bat-titre span{font-size:12px;font-weight:800;color:var(--c);margin-left:4px;white-space:nowrap;}
.bat-titre span i{font-style:normal;color:#7dff6a;}
.arena-panel .bat-id p{margin:0;font-size:11.5px;color:#9ea6bd;line-height:1.3;}
.bat-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:4px;}
.bat-stat{display:flex;flex-direction:column;min-width:0;padding:4px 7px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);line-height:1.2;}
.bat-stat small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7c849b;}
.bat-stat b{font-size:12px;font-weight:800;color:#e8ecf6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bat-stat em{font-style:normal;font-size:11.5px;font-weight:800;color:#7dff6a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bat-stat em::before{content:'→ ';color:#5f9a58;}
.bat-stat.monte{border-color:rgba(125,255,106,.28);}
.bat-echelle{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;}
.bat-cran{display:flex;flex-direction:column;align-items:center;padding:3px 0 2px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);line-height:1.15;min-width:0;}
.bat-cran b{font-size:12px;font-weight:900;color:#6f778f;}
.bat-cran small{font-size:11px;font-weight:700;color:#6f778f;white-space:nowrap;font-variant-numeric:tabular-nums;}
.bat-cran.paye{background:color-mix(in srgb,var(--c) 22%,transparent);border-color:color-mix(in srgb,var(--c) 60%,transparent);}
.bat-cran.paye b{color:#fff;}
.bat-cran.paye small{color:var(--c);}
.bat-cran.ok{border-color:rgba(0,224,255,.5);}
.bat-cran.ok b,.bat-cran.ok small{color:#cfe9f2;}
.bat-cran.next{border-color:#7dff6a;box-shadow:0 0 8px rgba(125,255,106,.35);animation:bat-next 1.6s ease-in-out infinite;}
.bat-cran.next b{color:#7dff6a;}
@keyframes bat-next{50%{box-shadow:0 0 2px rgba(125,255,106,.1);}}
.bat-calcul{font-size:11.5px;color:#9ea6bd;text-align:center;}
.bat-calcul b{color:#e8ecf6;white-space:nowrap;}
.bat-calcul .aerg-ico,.bat-rendu .aerg-ico{width:.8em;height:1em;vertical-align:-.12em;margin-left:.15em;}
.bat-rendu{font-size:11.5px;color:#7dff6a;text-align:center;}
.bat-rendu b{white-space:nowrap;}

/* 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-onglet{padding:6px 0;font-size:11px;}
html.petit-ecran .arena-root .arena-btn.atelier-action{padding:3px 6px;}
html.petit-ecran .arena-panel .atelier-manque{font-size:11px;}
@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 ; le bas (manque de cristaux, bouton d'achat, barre des menus) reste en bas. */
@media (orientation:portrait){
 html.petit-ecran .arena-panel.atelier-ecran{display:flex;flex-direction:column;overflow:hidden;}
 html.petit-ecran .atelier{flex:1;min-height:0;gap:5px;}
 html.petit-ecran .arena-panel .atelier-intro{font-size:11px;line-height:1.3;}
 html.petit-ecran .atelier-tete .arena-title{font-size:18px;}
 html.petit-ecran .atelier-onglet{padding:3px 0;line-height:1.2;}
 html.petit-ecran .atelier-onglet small{font-size:11px;}
 html.petit-ecran .arena-panel .atelier-but{font-size:11px;}
 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;}
}
/* Téléphone couché : textes et jauges plus serrés. */
@media (orientation:landscape){
 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-corps{overflow:hidden;}
 html.petit-ecran .atelier-detail{padding:5px 9px;font-size:11.5px;}
}
/* Chantier-Æ, téléphone couché : la liste des bâtiments à gauche, la fiche du bâtiment choisi à
   droite, côte à côte, pour comparer d'un coup d'œil (introduction cachée). */
@media (orientation:landscape){
 html.petit-ecran .atelier[data-vue~="bat"]{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:8px;row-gap:5px;align-content:start;}
 html.petit-ecran .atelier[data-vue~="bat"] > *{grid-column:1 / -1;}
 html.petit-ecran .atelier[data-vue~="bat"] > .atelier-but,html.petit-ecran .atelier[data-vue~="bat"] > .atelier-intro{display:none;}
 html.petit-ecran .atelier > .bat-liste{grid-column:1;grid-template-columns:minmax(0,1fr);gap:3px;align-self:start;}
 html.petit-ecran .atelier > .bat-fiche{grid-column:2;grid-row:span 1;align-self:start;padding:6px 8px;gap:5px;}
 html.petit-ecran .atelier > .bat-liste,html.petit-ecran .atelier > .bat-fiche{grid-row:2;}
 /* Sans défiler (demande de Tris) : la fenêtre ne défile plus, les six lignes se partagent la hauteur. */
 html.petit-ecran .arena-panel.atelier-ecran:has(.bat-liste){overflow:hidden;}
 html.petit-ecran .arena-panel.atelier-ecran > .atelier:has(.bat-liste){flex:1 1 0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;}
 html.petit-ecran .atelier[data-vue~="bat"] > .menus-bas{grid-row:3;}
 html.petit-ecran .atelier > .bat-liste{align-self:stretch;min-height:0;overflow:hidden;grid-template-rows:repeat(8,minmax(0,1fr));}
 html.petit-ecran .atelier > .bat-liste .bat-ligne{min-height:0;}
 html.petit-ecran .atelier > .bat-fiche{max-height:100%;overflow:hidden;}
 html.petit-ecran .bat-ligne{padding:2px 8px;min-height:0;}
 html.petit-ecran .bat-apercu{width:28px;height:28px;}
 html.petit-ecran .bat-ligne .atelier-corps{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;}
 html.petit-ecran .bat-ligne .atelier-nom{font-size:11.5px;}
 html.petit-ecran .bat-niveau b{font-size:13px;}
 html.petit-ecran .bat-crans i{width:6px;height:6px;}
 html.petit-ecran .bat-ligne .atelier-prix small{display:none;}
 html.petit-ecran .bat-grand{width:58px;height:58px;}
 html.petit-ecran .bat-id p{display:none;}
 html.petit-ecran .bat-titre{font-size:14px;}
 html.petit-ecran .bat-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;}
 html.petit-ecran .bat-stat{padding:2px 6px;}
 html.petit-ecran .bat-stat b{font-size:11px;}
 html.petit-ecran .bat-stat em{font-size:11px;}
 html.petit-ecran .bat-cran b{font-size:11px;}
 html.petit-ecran .bat-cran small{font-size:11px;}
 html.petit-ecran .bat-calcul,html.petit-ecran .bat-rendu{font-size:11px;}
}
/* Chantier-Æ, téléphone debout : la fiche plus serrée (valeurs sur deux colonnes), pas d'introduction ; huit
   bâtiments (31/10) : chaque ligne sur une seule rangée, le nom à gauche, les crans et le prix à droite. */
@media (orientation:portrait){
 html.petit-ecran .atelier[data-vue~="bat"] > .atelier-intro{display:none;}
 html.petit-ecran .bat-ligne{min-height:34px;padding:2px 8px;}
 html.petit-ecran .bat-apercu{width:30px;height:30px;}
 html.petit-ecran .bat-ligne .atelier-corps{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;}
 html.petit-ecran .bat-ligne .atelier-nom{font-size:12px;line-height:1.15;}
 html.petit-ecran .bat-crans i{width:7px;height:7px;}
 html.petit-ecran .bat-ligne .atelier-prix small{display:none;}
 html.petit-ecran .bat-fiche{padding:7px 8px;gap:6px;}
 html.petit-ecran .bat-grand{width:64px;height:64px;align-self:flex-start;}
 html.petit-ecran .bat-tete{align-items:flex-start;gap:9px;}
 html.petit-ecran .arena-panel .bat-id p{font-size:11px;}
 html.petit-ecran .bat-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;}
 html.petit-ecran .bat-stat{padding:3px 6px;}
 html.petit-ecran .bat-stat b{font-size:11.5px;}
 html.petit-ecran .bat-stat em{font-size:11px;}
 html.petit-ecran .bat-cran small{font-size:11px;}
}
/* ---------- Arsenal-X : toutes les armes sans défiler (demande de Tris, 17/10) ----------
   Une tuile par arme (icône, nom, jauges de niveau, prix du prochain cran ; la maîtrise en trait
   violet tout en bas), en grille : quatre colonnes (deux sur un téléphone debout). La fenêtre ne
   défile plus : la grille prend la hauteur qui reste entre le titre et l'encadré de l'arme choisie,
   ses rangées se la partagent. */
.atelier-armes.arsenal-grille{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:5px;}
.arme-tuile{position:relative;overflow:hidden;min-height:0;padding:5px 8px 7px;gap:7px;}
.arme-tuile .atelier-corps{gap:3px;justify-content:center;}
.arme-tuile .atelier-nom{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12;font-size:12px;}
.arme-tuile .atelier-ligne{justify-content:space-between;gap:6px;margin-top:0;}
.arme-tuile .atelier-pips{flex:none;}
/* La tuile en grille : l'icône puis le nom en haut ; dessous, sur une même ligne et le même axe,
   le rond de maîtrise (sous l'icône), les jauges et le losange, le prix (à droite). */
.atelier-arme.arme-tuile{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:center;column-gap:7px;row-gap:3px;}
.arme-tuile .atelier-corps,.arme-tuile .atelier-ligne{display:contents;}
.arme-tuile .arena-ico{grid-column:1;grid-row:1;justify-self:center;}
.arme-tuile .atelier-nom{grid-column:2 / 4;grid-row:1;}
.arme-tuile .mq-rond{grid-column:1;grid-row:2;justify-self:center;}
.arme-tuile .atelier-pips{grid-column:2;grid-row:2;align-items:center;}
.arme-tuile .atelier-prix{grid-column:3;grid-row:2;justify-self:end;line-height:1;}
.arme-tuile .atelier-pips i{width:9px;}
.arme-tuile .atelier-prix{flex:none;display:block;font-size:11px;white-space:nowrap;}
.arena-panel.atelier-ecran:has(.arsenal-grille){overflow:hidden;}
.arena-panel.atelier-ecran > .atelier:has(.arsenal-grille){flex:1 1 0;min-height:0;}
.atelier > .arsenal-grille{flex:1 1 auto;min-height:0;overflow:hidden;} /* toute la hauteur libre (audit du 20/10) */
.atelier[data-vue~="arsenal"] > *:not(.arsenal-grille){flex:none;}
html.petit-ecran .arme-tuile{padding:3px 7px 6px;gap:6px;}
html.petit-ecran .arme-tuile .arena-ico{width:28px;height:19px;}
html.petit-ecran .arme-tuile .atelier-nom{font-size:11.5px;}
/* Prix à cinq chiffres (« 16,5 k ») : jauges et prix un peu plus serrés, pour tenir à 360 px. */
html.petit-ecran .arme-tuile .atelier-ligne{gap:3px;}
html.petit-ecran .arme-tuile .atelier-pips{gap:2px;}
html.petit-ecran .arme-tuile .atelier-pips i{width:7px;}
html.petit-ecran .arme-tuile .atelier-prix{letter-spacing:-.02em;}
@media (max-width:640px){.atelier-armes.arsenal-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}}
@media (orientation:portrait){
 html.petit-ecran .atelier > .arsenal-grille{overflow:hidden;}
 html.petit-ecran .arme-tuile .atelier-pips i{width:7px;height:5px;}
 html.petit-ecran .arme-tuile .atelier-pips{gap:2px;}
 html.petit-ecran .arme-tuile .atelier-prix{font-size:11px;}
 html.petit-ecran .atelier-arme.arme-tuile{row-gap:2px;column-gap:5px;}
 html.petit-ecran .arme-tuile .atelier-pips i{width:6px;}
 html.petit-ecran .arme-tuile .atelier-pips svg.losange{margin-left:2px;}
 html.petit-ecran .arme-tuile .mq-rond{width:14px;height:14px;} /* seize armes (26/10) : comme couché */
 /* Seize armes, huit rangées (26/10 ; douze et six ou sept rangées le 19/10) : un nom sur deux lignes tient encore dans sa tuile. */
 html.petit-ecran .arme-tuile{padding-top:1px;padding-bottom:2px;}
 html.petit-ecran .arme-tuile .atelier-nom{line-height:1;}
}
/* Téléphone couché : ni phrase d'objectif ni introduction, l'onglet ouvert le dit déjà. */
@media (orientation:landscape){
 /* Le contenu d'une tuile ne fait que 27 px de haut : le rond de maîtrise sur le coin de l'icône. */
 html.petit-ecran .arme-tuile .mq-rond{width:14px;height:14px;}
 html.petit-ecran .atelier-arme.arme-tuile{row-gap:0;padding-top:1px;padding-bottom:1px;}
 html.petit-ecran .arme-tuile .atelier-nom{line-height:1.05;}
 html.petit-ecran .arme-tuile .arena-ico{margin:-4px 0;} /* l'icône ne rehausse pas la ligne du nom */
 html.petit-ecran .atelier[data-vue~="arsenal"] > .atelier-but,html.petit-ecran .atelier[data-vue~="arsenal"] > .atelier-intro{display:none;}
 html.petit-ecran .atelier[data-vue~="arsenal"]{gap:5px;}
 html.petit-ecran .atelier[data-vue~="arsenal"] .atelier-detail{padding:4px 9px;font-size:11px;line-height:1.35;}
 html.petit-ecran .atelier[data-vue~="arsenal"] .atelier-onglet{padding:3px 0;line-height:1.2;}
 html.petit-ecran .atelier[data-vue~="arsenal"] .atelier-tete .arena-title{font-size:18px;}
 html.petit-ecran .arme-tuile{padding:3px 7px 5px;}
 html.petit-ecran .arme-tuile .atelier-corps{gap:2px;overflow:clip;overflow-clip-margin:6px;} /* la lueur des jauges n'est pas coupée */
 html.petit-ecran .arme-tuile .atelier-nom{white-space:nowrap;}
}
/* Toutes les hauteurs (30/10, Redmi Note 15 en plein écran : l'appareil photo prend ~46 px en haut,
   les deux dernières tuiles passaient sous l'encadré de l'arme choisie). Debout, les tuiles n'ont plus de
   hauteur minimale fixe : les rangées se partagent la hauteur libre, une tuile au nom sur deux lignes
   garde la place de son contenu. Sur un écran court (requête sur la hauteur de l'atelier, appareil photo
   compris), la phrase d'objectif s'efface, comme couché, et l'encadré du bas se resserre. */
html.petit-ecran .atelier[data-vue~="arsenal"]{container:arsenal / size;}
@media (orientation:portrait){
 html.petit-ecran .atelier-arme.arme-tuile{min-height:0;}
 html.petit-ecran .atelier > .atelier-armes.arsenal-grille{flex:1 1 0;grid-auto-rows:minmax(min-content,1fr);}
 html.petit-ecran .arme-tuile .arena-ico{margin:-3px 0;} /* l'icône ne rehausse pas la ligne du nom */
}
@container arsenal (orientation:portrait) and (max-height:770px){
 .atelier > .atelier-but{display:none;}
 .atelier > .atelier-armes.arsenal-grille{gap:3px;}
 .atelier-detail{padding-top:5px;padding-bottom:5px;line-height:1.3;}
 .atelier-detail .mq-m{margin-top:2px;}
 .atelier-detail .mq-m .mq-rond{width:20px;height:20px;}
}
@container arsenal (orientation:landscape) and (max-height:340px){
 .arena-panel .atelier-tete .atelier-legende{row-gap:0;column-gap:10px;line-height:15px;margin-bottom:0;}
 .atelier > .atelier-armes.arsenal-grille{gap:3px;}
 .atelier-arme.arme-tuile{padding-top:0;padding-bottom:0;}
 .atelier-detail{padding-top:3px;padding-bottom:3px;}
 .atelier-detail .mq-m{margin-top:1px;}
 .atelier-detail .mq-m .mq-rond{width:16px;height:16px;}
}
/* Couché, un nom long (Double fusil à pompe) mettait le bouton d'achat sur trois lignes et tassait les
   tuiles : le prix suit le niveau sur la même ligne, deux lignes au plus. */
@container arsenal (orientation:landscape) and (max-height:400px){
 .arena-root .atelier-action .prix-aerg{display:inline;margin-left:.45em;}
}
/* Onglets Arsenal / Bâtiments (22/10) : au dessin de la barre du bas ; téléphone couché, symbole à gauche du mot
   pour garder la hauteur des tuiles d'armes. */
@media (max-height:500px){
 .atelier-onglets .carriere-onglet{flex-direction:row;min-height:0;padding:5px 0;gap:8px;}
 .atelier-onglets .carriere-onglet svg{width:20px;height:20px;}
}
/* ---------- Élite : les armes de la boîte noire (26/10) ----------
   Six tuiles en trois colonnes (deux sur un téléphone debout) ; trouvée : liseré et mot de sa couleur ;
   à trouver : éteinte. */