/* Arcmarch, refonte des interfaces (23 octobre 2026, chantier « boutique ») : la Boutique en CATALOGUE. Retour de Bastien : « trop de cartes et de boutons partout, AI slop ». Contrat : docs/design/INTERFACE_GRAMMAIRE.md. Cette feuille charge APRÈS lot2-monde-bataille.css et lot4-resultats.css ; elle décide seule de la mise en page de [data-screen="shop"] (aucune règle de jeu, aucun flux, aucun filter sur #canvas, aucun backdrop-filter). Une règle de cadre étroit se place après sa base. GRAMMAIRE : une feuille ivoire (celle du socle), des LIGNES plates séparées d'un filet de 1 (encre à 12 %), sans carte par produit. L'icône peinte (webp transparent) est posée nue, avec son ombre. Titre 20, description 16 sur une ligne, stock en texte nu à droite. LE PRIX EST LE BOUTON (44 de haut) : l'or en or, la gemme en bleu, côte à côte quand l'offre en propose deux. « Stock plein » est un statut en texte, jamais un bouton. Le réglage d'usage est une ligne « Utilisation : Garder › » qui ouvre une liste (un seul à la fois). Le titre d'une section est un titre de 17 et de l'espace, plus de ruban incliné. Les illustrations viennent de assets/sources/ui/boutique/ (provenance : assets/references/production/ui_icones_tour2 et ui_boutique_lot2, statut candidat, validation artistique à Bastien). */ :root { --bq-encre:#14254A; --bq-encre2:#4A5A78; --bq-filet:rgba(20,37,74,.12); --bq-or-haut:#FFE27A; --bq-or:#F6B91F; --bq-or-bas:#EBA010; --bq-or-texte:#3A2400; --bq-gem-haut:#4FC3FF; --bq-gem:#1E8DFF; --bq-gem-bas:#0F6BEB; --bq-img-or:url(boutique/AM-UI-ICONE-PIECE-OR_v02_96.webp); --bq-img-gemme:url(boutique/AM-UI-ICONE-GEMME_v01_96.webp); } /* ---------------------------------------------------------------- en-tête : le titre et les deux bourses posés sur le papier, sans boîte */ #stage .screen.panel[data-screen="shop"] > .head { padding-bottom:2px; } #stage .screen.panel[data-screen="shop"] > .head > .head-titles { height:44px; padding:0; justify-content:flex-start; background:none; border:0; box-shadow:none; border-radius:0; } #stage .screen.panel[data-screen="shop"] > .head .panel-title { font:italic 900 28px/1 var(--f-titre); } #stage .screen.panel[data-screen="shop"] > .head > .purse { gap:14px; } #stage .screen.panel[data-screen="shop"] > .head > .purse > .purse-line { height:44px; padding:0; gap:6px; background:none; border:0; box-shadow:none; border-radius:0; } #stage .screen.panel[data-screen="shop"] .shop-purses .picon.pi-or { --img:var(--bq-img-or); width:28px; } #stage .screen.panel[data-screen="shop"] .shop-purses .picon.pi-cristaux { --img:var(--bq-img-gemme); width:28px; } #stage .screen.panel[data-screen="shop"] .shop-purses .val { font-size:22px; } /* ---------------------------------------------------------------- titres de section : 17 gras et de l'espace, aucun ruban */ #stage .screen.panel[data-screen="shop"] .shop-h { display:block; position:static; height:auto; margin:16px 2px 0; padding:0; border:0; background:none; box-shadow:none; clip-path:none; font:800 17px/1.2 var(--f-lecture); letter-spacing:0; text-transform:none; text-shadow:none; color:var(--bq-encre); } #stage .screen.panel[data-screen="shop"] .shop-h::before, #stage .screen.panel[data-screen="shop"] .shop-h::after { content:none; } #stage .screen.panel[data-screen="shop"] .shop-h:first-child, #stage .screen.panel[data-screen="shop"] #shop-cite > .shop-h { margin-top:0; } #stage .screen.panel[data-screen="shop"] .shop-h span { white-space:normal; overflow:visible; } #stage .screen.panel[data-screen="shop"] :is(#shop-offres, #shop-items).list { padding:0; } /* ---------------------------------------------------------------- la ligne de catalogue : icône nue, texte, usage, prix */ #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement { position:relative; display:grid; grid-template-columns:60px minmax(0, 1fr); grid-template-rows:auto; grid-auto-rows:auto; column-gap:12px; row-gap:0; align-items:start; margin:0; padding:9px 2px; box-sizing:border-box; border:0; border-bottom:1px solid var(--bq-filet); border-radius:0; background:none; box-shadow:none; color:var(--bq-encre); min-height:0; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement + .shop-row { border-top:0; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement:last-child { border-bottom:0; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement:focus-visible { outline:3px solid var(--azur); outline-offset:2px; } /* l'icône peinte, nue : pas de tuile, pas de cadre, seulement son ombre */ #stage .screen.panel[data-screen="shop"] .offer-art { position:relative; grid-column:1; grid-row:1 / span 4; width:60px; height:60px; margin:0; border:0; border-radius:0; background:none; box-shadow:none; display:block; } #stage .screen.panel[data-screen="shop"] .offer-art::before { content:''; position:absolute; inset:0; background:var(--bq-art, none) center / contain no-repeat; filter:drop-shadow(0 2px 2px rgba(20,37,74,.28)); } #stage .screen.panel[data-screen="shop"] .offer-art[data-art="bouclier"] { --bq-art:url(boutique/AM-UI-ICONE-BOUCLIER_v02_256.webp); } #stage .screen.panel[data-screen="shop"] .offer-art[data-art="pierre"] { --bq-art:url(boutique/AM-UI-ICONE-PIERRE_v03_256.webp); } #stage .screen.panel[data-screen="shop"] .offer-art[data-art="reinforce"] { --bq-art:url(boutique/AM-UI-ICONE-RENFORTS_v02_256.webp); } #stage .screen.panel[data-screen="shop"] .offer-art[data-art="knights"] { --bq-art:url(boutique/AM-UI-ICONE-ADOUBEMENT_v02_256.webp); } #stage .screen.panel[data-screen="shop"] .offer-art[data-art="wall"] { --bq-art:url(boutique/AM-UI-ICONE-MURAILLE_v02_256.webp); } /* le texte : le nom (20) et son stock nu à droite, la phrase (16, une ligne), le reçu en texte vert */ #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .col { grid-column:2; grid-row:1; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:0 10px; min-width:0; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .name { grid-column:1; grid-row:1; min-width:0; font:800 20px/1.15 var(--f-lecture); font-style:normal; letter-spacing:0; color:var(--bq-encre); } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .tag { grid-column:2; grid-row:1; order:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; text-align:right; white-space:nowrap; font:700 16px/1.2 var(--f-lecture); letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; color:var(--bq-encre2); } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .tag:empty { display:none; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .desc { grid-column:1 / -1; grid-row:2; min-width:0; font:500 16px/1.25 var(--f-lecture); color:var(--bq-encre2); white-space:nowrap; text-wrap:nowrap; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .shop-recu { grid-column:1 / -1; grid-row:3; margin:2px 0 0; padding:0; border-radius:0; background:none; box-shadow:none; font:700 14px/1.3 var(--f-lecture); color:#1F6B33; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .shop-recu[hidden] { display:none; } /* niveau pas atteint : l'icône se grise, la condition est un texte d'ambre */ #stage .screen.panel[data-screen="shop"] #shop-items .shop-row.locked .offer-art::before { filter:grayscale(.9) drop-shadow(0 2px 2px rgba(20,37,74,.18)); opacity:.7; } #stage .screen.panel[data-screen="shop"] #shop-items .shop-row.locked .name { color:var(--bq-encre2); } #stage .screen.panel[data-screen="shop"] #shop-items .shop-row.locked .tag { color:#8A5A06; } #stage .screen.panel[data-screen="shop"] #shop-offres .shop-row[data-urgent="1"] .tag { color:#B3261E; } /* ---------------------------------------------------------------- l'usage : UNE ligne qui ouvre une liste (un seul réglage déplié à la fois) */ #stage .screen.panel[data-screen="shop"] :is(#shop-items) .shop-row.shop-ravitaillement > .ravitaillement-ligne.usage-ligne { grid-column:2; grid-row:2; display:block; margin:0; padding:0; border:0; } #stage .screen.panel[data-screen="shop"] .usage-bouton { display:flex; align-items:center; gap:6px; width:100%; min-height:44px; margin:0; padding:0; border:0; background:none; text-align:left; color:var(--bq-encre); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #stage .screen.panel[data-screen="shop"] .usage-bouton .usage-lbl { flex:none; font:500 16px/1.2 var(--f-lecture); color:var(--bq-encre2); } #stage .screen.panel[data-screen="shop"] .usage-bouton .usage-lbl::after { content:' :'; } #stage .screen.panel[data-screen="shop"] .usage-bouton .usage-val { flex:1; min-width:0; font:800 16px/1.2 var(--f-lecture); color:var(--bq-encre); white-space:nowrap; } #stage .screen.panel[data-screen="shop"] .usage-bouton .usage-chev { flex:none; width:8px; height:8px; margin:0 6px 0 4px; border:solid var(--bq-encre2); border-width:2px 2px 0 0; transform:rotate(45deg); transition:transform var(--t-appui) var(--courbe); } #stage .screen.panel[data-screen="shop"] .usage-ligne[data-ouvert="1"] .usage-bouton .usage-chev { transform:rotate(135deg); margin-bottom:4px; } #stage .screen.panel[data-screen="shop"] .usage-bouton:focus-visible, .usage-choix:focus-visible { outline:3px solid var(--azur); outline-offset:1px; } #stage .screen.panel[data-screen="shop"] .usage-liste { margin:2px 0 6px; border-top:1px solid var(--bq-filet); } #stage .screen.panel[data-screen="shop"] .usage-liste[hidden] { display:none; } #stage .screen.panel[data-screen="shop"] .usage-choix { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 22px; align-items:center; gap:0 8px; width:100%; min-height:52px; margin:0; padding:6px 0; box-sizing:border-box; border:0; border-bottom:1px solid var(--bq-filet); background:none; text-align:left; color:var(--bq-encre); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #stage .screen.panel[data-screen="shop"] .usage-choix:last-child { border-bottom:0; } #stage .screen.panel[data-screen="shop"] .usage-choix .usage-nom { grid-column:1; font:600 16px/1.25 var(--f-lecture); } #stage .screen.panel[data-screen="shop"] .usage-choix small { grid-column:1; font:500 14px/1.3 var(--f-lecture); color:var(--bq-encre2); } #stage .screen.panel[data-screen="shop"] .usage-choix .usage-coche { grid-column:2; grid-row:1 / span 2; width:20px; height:20px; border-radius:50%; box-sizing:border-box; border:2px solid #B7BFD0; } #stage .screen.panel[data-screen="shop"] .usage-choix[aria-checked="true"] .usage-nom { font-weight:800; } #stage .screen.panel[data-screen="shop"] .usage-choix[aria-checked="true"] .usage-coche { border-color:#D89A0A; background:radial-gradient(circle, #F6B91F 0 42%, transparent 46%); } #stage .screen.panel[data-screen="shop"] .usage-choix:disabled { opacity:.5; cursor:default; } #stage .screen.panel[data-screen="shop"] .usage-choix:not(:disabled):active { background:rgba(20,37,74,.05); } #stage .screen.panel[data-screen="shop"] .usage-ligne .ravitaillement-raison { display:block; margin:0 0 6px; font:500 14px/1.3 var(--f-lecture); color:#8A5A06; } #stage .screen.panel[data-screen="shop"] .usage-ligne .ravitaillement-raison[hidden] { display:none; } /* ---------------------------------------------------------------- l'achat : UNE bande à bord fin de 44, deux moitiés séparées d'un trait de 1 (or | gemmes) Astra (23 octobre 2026) : deux gros boutons colorés par produit recréent la surcharge. Les deux monnaies restent visibles, dans UN seul contrôle : fond ivoire, texte d'encre, icône peinte de 20 nue, prix de 16, aucun relief ni aplat plein (le bleu plein est réservé à l'action dominante d'un écran). Une seule monnaie : une seule moitié. L'état pressé teinte la moitié touchée (or ou bleu pâle). */ #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement > .shop-paiements { grid-column:2; grid-row:3; justify-self:end; width:max-content; max-width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; height:44px; box-sizing:border-box; margin:2px 0 0; padding:0; overflow:hidden; border:1px solid rgba(20,37,74,.30); border-radius:12px; background:#FFFDF6; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer { position:relative; flex:0 0 auto; min-width:0; height:100%; min-height:0; margin:0; padding:0 14px; gap:6px; display:flex; align-items:center; justify-content:center; border:0; border-radius:0; box-sizing:border-box; white-space:nowrap; font:800 16px/1 var(--f-lecture); letter-spacing:0; text-shadow:none; color:var(--bq-encre); background:none; box-shadow:none; transition:background var(--t-appui) var(--courbe); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer + .shop-payer { border-left:1px solid rgba(20,37,74,.30); } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer[data-devise="coins"]:not(:disabled):active { background:rgba(246,185,31,.30); transform:none; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer[data-devise="gems"]:not(:disabled):active { background:rgba(30,141,255,.18); transform:none; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer:focus-visible { outline:3px solid var(--azur); outline-offset:-3px; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer .picon { width:20px; height:20px; margin:0; } #stage .screen.panel[data-screen="shop"] .shop-payer .picon.pi-or { --img:var(--bq-img-or); } #stage .screen.panel[data-screen="shop"] .shop-payer .picon.pi-cristaux { --img:var(--bq-img-gemme); } /* faute de fonds : le texte et l'icône pâlissent, la raison reste dans le libellé (« Il en manque 3 ») */ #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer:disabled { background:none; color:#7C879B; box-shadow:none; font-weight:700; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer:disabled .picon { opacity:.45; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .shop-ou { display:none; } /* stock plein : un STATUT en texte à la place des prix, jamais un bouton */ #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .shop-statut { display:none; font:700 16px/1.2 var(--f-lecture); color:#1F6B33; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.plein > .shop-paiements { justify-self:start; justify-content:flex-start; height:auto; margin-top:0; border:0; background:none; overflow:visible; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.plein .shop-statut { display:block; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.plein .shop-payer { display:none; } /* ---------------------------------------------------------------- cadre étroit (après les règles de base) */ @media (max-width:349px) { #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement { grid-template-columns:48px minmax(0, 1fr); column-gap:10px; } #stage .screen.panel[data-screen="shop"] .offer-art { width:48px; height:48px; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .name { font-size:18px; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row .col .desc { font-size:15px; white-space:normal; } #stage .screen.panel[data-screen="shop"] :is(#shop-items, #shop-offres) .shop-row.shop-ravitaillement .shop-payer { padding:0 10px; font-size:15px; } } /* l'écran n'a plus de ruban à porter : la liste commence tout de suite sous l'en-tête */ #stage .screen.panel[data-screen="shop"] .scroll-area { padding-top:0; }