/* FRBC V35 shop — boutique mobile chic et épurée (remplace intégralement le brouillon V8).
 *
 * Périmètre : téléphones uniquement.
 *   - Portrait  : (orientation:portrait) and (max-width:600px)
 *   - Paysage   : (orientation:landscape) and (max-height:520px) and (max-width:1100px)
 * Hors de ces deux branches, rien ne change (version PC validée intacte), à
 * l'exception d'une seule règle : le bouton « Détails » ajouté par shop.js V35
 * est masqué partout ailleurs, la carte PC reste donc identique.
 *
 * Principes :
 *   - un seul défilement naturel (la carte .shop-card), aucun sticky / fixed ;
 *   - ordre : en-tête → Ma sélection → catégories → catalogue → crédits →
 *     informations (hero, intro, statistiques, sauvegarde) ;
 *   - .frbc-shop-scroll passe en display:contents pour que ses enfants (crédits,
 *     onglets, grille…) se rangent dans ce flux unique sans toucher au DOM ;
 *   - les vrais canvas 3D restent dans leur carte, rien n'est cloné ni déplacé ;
 *   - zones tactiles ≥ 48 px, visuels discrets.
 * Préfixe #shop-modal#shop-modal (deux id) : l'emporte sur les règles V34
 * existantes (jusqu'à 1 id + 2 classes) sans dépendre de l'ordre de chargement.
 */

/* Hors mobile : le bouton « Détails » V35 n'existe pas visuellement. */
#shop-modal .frbc-shop-details-toggle{display:none}

/* ===================== Branche commune (portrait + paysage mobiles) ===================== */
@media (orientation:portrait) and (max-width:600px),
       (orientation:landscape) and (max-height:520px) and (max-width:1100px){

 /* --- Fond et carte : un seul défilement --- */
 html #shop-modal#shop-modal:not([hidden]){
  display:flex!important;align-items:stretch!important;justify-content:center!important;
  padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px)
          calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 8px)!important;
 }
 html #shop-modal#shop-modal>.shop-card{
  position:relative!important;display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:14px!important;
  width:100%!important;max-width:var(--frbc-shop-w,560px)!important;
  height:100%!important;max-height:100%!important;min-height:0!important;margin:0 auto!important;
  padding:12px clamp(12px,3.6vw,18px) 18px!important;box-sizing:border-box!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;scrollbar-gutter:auto!important;
  border-radius:16px!important;
 }
 /* Le conteneur historique s'efface : ses enfants rejoignent le flux de la carte. */
 #shop-modal#shop-modal .frbc-shop-scroll{display:contents!important}

 /* Aucun élément collant ou flottant dans la boutique mobile. */
 #shop-modal#shop-modal :is(.shop-heading,.frbc-shop-selection,.shop-tabs,#shop-close,.eyebrow){
  position:static!important;top:auto!important;bottom:auto!important;float:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }

 /* --- Ordre unique --- */
 #shop-modal#shop-modal .shop-card>.eyebrow{order:0!important}
 #shop-modal#shop-modal .shop-heading{order:1!important}
 #shop-modal#shop-modal .frbc-shop-selection{order:2!important}
 #shop-modal#shop-modal .shop-tabs{order:3!important}
 #shop-modal#shop-modal #shop-grid{order:4!important}
 #shop-modal#shop-modal #shop-credits{order:5!important}
 #shop-modal#shop-modal .shop-collection-hero{order:6!important}
 #shop-modal#shop-modal .shop-intro{order:7!important}
 #shop-modal#shop-modal #profile-stats{order:8!important}
 #shop-modal#shop-modal .profile-backup{order:9!important}
 #shop-modal#shop-modal .shop-card>*{flex:0 0 auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}

 /* --- En-tête : sur-titre, titre, solde compact, × --- */
 #shop-modal#shop-modal .shop-card>.eyebrow{
  display:block!important;margin:2px 56px -8px 0!important;font-size:10px!important;letter-spacing:2px!important;
  line-height:1.3!important;opacity:.85!important;
 }
 #shop-modal#shop-modal #shop-close{
  position:absolute!important;top:6px!important;right:6px!important;left:auto!important;z-index:3!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
  color:#c9def0!important;font-size:26px!important;line-height:1!important;font-weight:400!important;
 }
 #shop-modal#shop-modal #shop-close::before{
  content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid #9cc6e64d;background:#0a223b80;z-index:-1;
 }
 #shop-modal#shop-modal #shop-close:focus-visible{outline:2px solid #e9d39b!important;outline-offset:-4px!important}
 #shop-modal#shop-modal .shop-heading{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;margin:0!important;padding:0 50px 0 0!important;min-height:48px!important;
  background:none!important;border:0!important;box-shadow:none!important;
 }
 #shop-modal#shop-modal #shop-title{
  flex:1 1 auto!important;min-width:0!important;margin:0!important;
  font-size:clamp(20px,5.6vw,25px)!important;line-height:1.1!important;letter-spacing:-.02em!important;
  overflow-wrap:anywhere!important;
 }
 /* Solde : une seule ligne discrète (pièce · montant · « crédits »). */
 #shop-modal#shop-modal .shop-heading .shop-wallet{
  position:relative!important;flex:0 0 auto!important;display:flex!important;flex-direction:row!important;
  align-items:center!important;gap:6px!important;min-width:0!important;min-height:0!important;width:auto!important;
  margin:0!important;padding:6px 10px 6px 8px!important;border-radius:999px!important;text-align:left!important;
  border:1px solid #8fbde15c!important;background:#071d36aa!important;box-shadow:none!important;
 }
 #shop-modal#shop-modal .shop-wallet .frbc-wallet-coin{
  position:static!important;transform:none!important;width:22px!important;height:22px!important;flex:0 0 22px!important;
 }
 #shop-modal#shop-modal .shop-wallet b{font-size:17px!important;line-height:1!important;min-height:0!important}
 #shop-modal#shop-modal .shop-wallet span{
  margin:0!important;font-size:0!important;letter-spacing:0!important;min-height:0!important;line-height:1!important;
 }
 /* « CRÉDITS DISPONIBLES » → « cr » visuel ; le texte complet reste dans le DOM. */
 #shop-modal#shop-modal .shop-wallet span::after{content:"cr";font-size:12px;letter-spacing:.5px;color:#b8e0ff}
 #shop-modal#shop-modal #shop-paid-balance{display:none!important}

 /* --- Ma sélection : bandeau sobre dans le flux --- */
 #shop-modal#shop-modal .frbc-shop-selection{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;
  margin:0!important;padding:4px 4px 4px 14px!important;min-height:56px!important;box-sizing:border-box!important;
  border:1px solid #c5a66773!important;border-radius:14px!important;
  background:#0d2741!important;box-shadow:none!important;
 }
 #shop-modal#shop-modal .frbc-selection-copy{display:flex!important;flex-direction:column!important;gap:2px!important;flex:1 1 auto!important;min-width:0!important}
 #shop-modal#shop-modal .frbc-selection-copy strong{font-size:14px!important;line-height:1.2!important}
 #shop-modal#shop-modal .frbc-selection-copy span{font-size:13px!important;line-height:1.2!important}
 #shop-modal#shop-modal .frbc-selection-copy small{display:none!important}
 #shop-modal#shop-modal .frbc-selection-total{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;flex:0 0 auto!important}
 #shop-modal#shop-modal .frbc-selection-total span{display:none!important}
 #shop-modal#shop-modal .frbc-selection-total strong{font-size:15px!important;line-height:1!important;white-space:nowrap!important}
 #shop-modal#shop-modal .frbc-selection-total img{width:20px!important;height:20px!important}
 #shop-modal#shop-modal #frbc-clear-selection{
  flex:0 0 auto!important;min-width:48px!important;min-height:48px!important;height:48px!important;
  padding:0 12px!important;border:0!important;background:transparent!important;
  font-size:13px!important;color:#d9e9f6!important;text-decoration:underline!important;text-underline-offset:3px!important;
 }

 /* --- Catégories : visuellement compactes, zone tactile 48 px --- */
 #shop-modal#shop-modal .shop-tabs{
  display:grid!important;gap:4px 6px!important;margin:0!important;padding:0!important;
  overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important;z-index:auto!important;
 }
 #shop-modal#shop-modal .shop-tabs button{
  position:relative!important;isolation:isolate!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:48px!important;height:48px!important;margin:0!important;padding:0 8px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;
  font-size:13px!important;font-weight:700!important;color:#c6dff5!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
 }
 /* La pastille visible (34 px) est dessinée dans la zone tactile de 48 px. */
 #shop-modal#shop-modal .shop-tabs button::after{
  content:"";position:absolute;left:0;right:0;top:7px;bottom:7px;z-index:-1;
  border-radius:999px;border:1px solid #98caff42;background:#112d4c;
 }
 #shop-modal#shop-modal .shop-tabs button.active{color:#0b365f!important;font-weight:800!important}
 #shop-modal#shop-modal .shop-tabs button.active::after{background:#e1f2ff;border-color:#e1f2ff}
 #shop-modal#shop-modal .shop-tabs button:focus-visible{outline:2px solid #e9d39b!important;outline-offset:-3px!important}

 /* --- Catalogue --- */
 #shop-modal#shop-modal #shop-grid{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;
  margin:0!important;padding:0!important;width:100%!important;overflow:visible!important;
 }
 /* Carte : aperçu / nom + prix + Acquérir / case de sélection. */
 #shop-modal#shop-modal #shop-grid .shop-item{
  display:grid!important;align-items:start!important;column-gap:4px!important;row-gap:0!important;
  width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;
  box-sizing:border-box!important;overflow:hidden!important;border-radius:14px!important;
  transform:none!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-item>.shop-product-media{
  grid-area:media!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:16/9!important;margin:0!important;
 }
 /* Vrais canvas : remplissent leur cadre sans être écrasés (ratio 1,78–1,8). */
 #shop-modal#shop-modal #shop-grid .shop-product-media>canvas{
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  object-fit:contain!important;aspect-ratio:auto!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-product-media>img{width:100%!important;height:100%!important;object-fit:cover!important}
 #shop-modal#shop-modal #shop-grid .shop-product-tag{font-size:11px!important;padding:5px 9px!important;top:10px!important;left:10px!important}

 /* Case de sélection : petit carré visible, vraie zone tactile 48 px de haut.
    Positionnée en haut à droite de la zone texte (la zone de grille sert de
    référence au positionnement absolu) : le nom réserve sa place à droite. */
 #shop-modal#shop-modal #shop-grid .shop-item{position:relative!important}
 #shop-modal#shop-modal #shop-grid .frbc-shop-select{
  grid-area:copy!important;position:absolute!important;inset:4px 4px auto auto!important;transform:none!important;z-index:1!important;
  display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;
  width:auto!important;max-width:none!important;min-width:48px!important;min-height:48px!important;height:48px!important;
  margin:0!important;padding:0 10px!important;box-sizing:border-box!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  font-size:12px!important;font-weight:600!important;color:#cfe3f3!important;white-space:nowrap!important;cursor:pointer!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-item:has(.frbc-shop-select) h3{padding-right:118px!important}
 #shop-modal#shop-modal #shop-grid .frbc-shop-select input[type="checkbox"]{
  order:2!important;flex:0 0 20px!important;width:20px!important;height:20px!important;margin:0!important;
  accent-color:#efc069!important;cursor:pointer!important;
 }

 /* Bloc texte. */
 #shop-modal#shop-modal #shop-grid .shop-product-copy{
  grid-area:copy!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
  align-items:center!important;align-content:flex-start!important;column-gap:10px!important;row-gap:6px!important;
  min-width:0!important;padding:12px 14px 14px!important;margin:0!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-product-copy>*{flex:0 0 100%!important;min-width:0!important;margin:0!important}
 #shop-modal#shop-modal #shop-grid .shop-item h3{
  order:1!important;font-size:clamp(15px,4.1vw,16px)!important;line-height:1.25!important;
  letter-spacing:-.01em!important;margin:0!important;overflow-wrap:anywhere!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-item-price{
  order:2!important;display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 10px!important;margin:0!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-item-price strong{
  font-size:15px!important;font-weight:700!important;letter-spacing:0!important;line-height:1.2!important;color:#f1e3bf!important;
 }
 #shop-modal#shop-modal #shop-grid .frbc-price-coin{width:18px!important;height:18px!important}
 #shop-modal#shop-modal #shop-grid .shop-item-price small{font-size:12px!important;color:#a9cbe6!important}
 /* Acquérir : largeur adaptée, 48 px de haut. */
 #shop-modal#shop-modal #shop-grid .shop-item button[data-item]{
  order:3!important;flex:0 1 auto!important;width:clamp(160px,58%,184px)!important;max-width:184px!important;white-space:nowrap!important;
  min-height:48px!important;height:auto!important;margin:4px 0 0!important;padding:0 12px!important;
  font-size:14px!important;font-weight:750!important;border-radius:12px!important;line-height:1.15!important;
 }
 /* « Détails du pack » : lien discret, zone tactile 48 px. */
 #shop-modal#shop-modal #shop-grid .frbc-shop-details-toggle{
  order:4!important;display:inline-flex!important;align-items:center!important;gap:6px!important;
  flex:0 0 auto!important;min-height:48px!important;min-width:48px!important;margin:4px 0 0!important;padding:0 6px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
  font-size:13px!important;font-weight:600!important;color:#c8def0!important;
  text-decoration:underline!important;text-underline-offset:3px!important;cursor:pointer!important;
 }
 #shop-modal#shop-modal #shop-grid .frbc-shop-details-toggle::after{
  content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;
 }
 #shop-modal#shop-modal #shop-grid .frbc-details-open .frbc-shop-details-toggle::after{transform:translateY(2px) rotate(-135deg)}
 #shop-modal#shop-modal #shop-grid .frbc-shop-details-toggle:focus-visible{outline:2px solid #e9d39b!important;outline-offset:-3px!important}
 /* Contenu du volet (masqué tant qu'il est fermé). */
 #shop-modal#shop-modal #shop-grid .shop-item p{
  order:5!important;font-size:13.5px!important;line-height:1.5!important;min-height:0!important;color:#c6dbec!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-bundle-includes{order:6!important;font-size:13px!important;line-height:1.45!important;padding-top:8px!important}
 #shop-modal#shop-modal #shop-grid .shop-product-copy>button:not([data-item]):not(.frbc-shop-details-toggle){order:7!important;min-height:48px!important}
 #shop-modal#shop-modal #shop-grid .shop-product-availability{order:8!important;font-size:12px!important;line-height:1.4!important;margin:0!important}
 #shop-modal#shop-modal #shop-grid .shop-item:not(.frbc-details-open) :is(.shop-product-copy>p,.shop-bundle-includes,.shop-product-availability,.shop-item-price small,.shop-product-copy>button:not([data-item]):not(.frbc-shop-details-toggle)){
  display:none!important;
 }

 /* --- Rechargement des crédits et informations --- */
 #shop-modal#shop-modal #shop-credits{margin:6px 0 0!important;scroll-margin-top:8px!important}
 #shop-modal#shop-modal #shop-credits :is(button,.shop-donation-feature){min-height:48px!important}
 #shop-modal#shop-modal #shop-credits a{display:inline-flex!important;align-items:center!important;min-height:48px!important}
 #shop-modal#shop-modal .shop-collection-hero{margin:0!important;padding:14px!important}
 #shop-modal#shop-modal .shop-collection-hero strong{font-size:15px!important}
 #shop-modal#shop-modal .shop-collection-hero p{font-size:13px!important;line-height:1.45!important}
 #shop-modal#shop-modal .shop-credit-link{min-height:48px!important}
 #shop-modal#shop-modal .shop-intro{margin:0!important;font-size:13px!important;line-height:1.5!important}
 #shop-modal#shop-modal #profile-stats{margin:0!important;font-size:13px!important}
 #shop-modal#shop-modal .profile-backup{margin:0!important;padding-bottom:4px!important}
 #shop-modal#shop-modal .profile-backup p{font-size:13px!important}
 #shop-modal#shop-modal .profile-backup small{font-size:12px!important;line-height:1.45!important}
 #shop-modal#shop-modal .profile-backup>div{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:8px!important}
 #shop-modal#shop-modal .profile-backup button{min-height:48px!important;font-size:13px!important;margin:0!important;width:100%!important}
}

/* ===================== Portrait : aperçu au-dessus des infos ===================== */
@media (orientation:portrait) and (max-width:600px){
 #shop-modal#shop-modal .shop-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #shop-modal#shop-modal #shop-grid .shop-item{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"media" "copy"!important}
}

/* ===================== Paysage : aperçu à gauche, infos à droite ===================== */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 html #shop-modal#shop-modal>.shop-card{--frbc-shop-w:900px;gap:12px!important;padding-top:8px!important}
 #shop-modal#shop-modal .shop-card>.eyebrow{display:none!important}
 #shop-modal#shop-modal .shop-tabs{grid-template-columns:repeat(6,minmax(0,1fr))!important}
 #shop-modal#shop-modal #shop-grid .shop-item{
  grid-template-columns:minmax(0,min(46%,340px)) minmax(0,1fr)!important;grid-template-areas:"media copy"!important;
 }
 #shop-modal#shop-modal #shop-grid .shop-item>.shop-product-media{align-self:start!important}
 #shop-modal#shop-modal #shop-grid .shop-product-copy{padding:10px 12px 12px 14px!important}
}