@font-face { font-family: "Comfortaa"; src: url("/fonts/Comfortaa-Regular.ttf") format("truetype"); }
@font-face { font-family: "Comfortaa"; src: url("/fonts/Comfortaa-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Amaranth"; src: url("/fonts/Amaranth-Regular.ttf") format("truetype"); }
@font-face { font-family: "Amaranth"; src: url("/fonts/Amaranth-Bold.ttf") format("truetype"); font-weight: 700; }

/* Tout est scopé sous .boutique-page (fragment inclus à la fois par la page
   /boutique autonome et par la vue interne du jeu, index.html - même raison
   que .profil_page dans profil.css) : ni variable sur :root, ni sélecteur
   d'élément nu (body/button/a/*...), pour ne jamais déteindre sur le reste du
   jeu une fois ce fichier chargé dans le même document que commun.css/
   menu.css. .modal-backdrop/.modal-close/.primary-button/.secondary-button
   existent déjà globalement dans menu.css avec un tout autre style - le
   scope à deux classes (spécificité 0,2,0) l'emporte sans avoir à renommer. */
.boutique-page, .boutique-page * { box-sizing: border-box; }
.boutique-page {
	--green-950: #173615;
	--green-800: #285c22;
	--green-700: #397a2e;
	--green-500: #6ea937;
	--green-100: #eaf3dc;
	--paper: #fffefa;
	--ink: #273127;
	--muted: #69736a;
	--line: #d9e0d5;
	--gold: #d99a24;
	--gold-soft: #fff2bf;
	--orange: #e98a08;
	--red: #d84a3d;
	--blue: #1677a4;
	--shadow: 0 25px 70px rgba(13, 34, 12, .35);
	color: var(--ink);
	font-family: "Comfortaa", sans-serif;
}
/* Fond exterieur de la page autonome. La vue interne fournit son propre fond
   plein ecran dans pages-secondaires-spa.css (meme patron que profil.css). */
body.page-boutique { margin: 0; min-height: 100vh; background-color: #172317; }

/* Plusieurs règles ci-dessous posent leur propre `display` sur un élément
   qu'on bascule aussi en `hidden` depuis Boutique.js (.balance-card,
   .shop-layout...) - à spécificité égale, une règle d'auteur l'emporte sur le
   `[hidden] { display: none }` du navigateur (même limite déjà documentée
   dans commun.css/preparation.css/profil.css de ce projet). */
.boutique-page [hidden] { display: none !important; }
.boutique-page button, .boutique-page select, .boutique-page a { font: inherit; }
.boutique-page button, .boutique-page select { cursor: pointer; }
.boutique-page button:focus-visible, .boutique-page select:focus-visible, .boutique-page a:focus-visible { outline: 3px solid rgba(233, 138, 8, .42); outline-offset: 2px; }

.boutique-page .preview {
	position: relative;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	padding: 4px 6px 0;
	background-color: #589306;
	background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(11,46,8,.47)), url("/images/padding.png");
}
.boutique-page .table-context { position: absolute; inset: 0; display: grid; place-items: center; opacity: .13; pointer-events: none; }
.boutique-page .mini-board { position: relative; width: min(800px, 70vw); aspect-ratio: 1; border: 24px solid rgba(255,255,255,.62); border-radius: 8%; background: #ddc790; box-shadow: 0 35px 80px rgba(0,0,0,.3); transform: rotate(-5deg); }
.boutique-page .mini-board::before { position: absolute; inset: 12%; border: 19px dotted #755f36; border-radius: 50%; content: ""; }
.boutique-page .mini-board > span { position: absolute; inset: 37%; display: grid; place-items: center; border: 3px solid #608946; border-radius: 50%; color: #426a2e; font: 700 3rem "Amaranth"; }
.boutique-page .mini-board i { position: absolute; width: 6%; aspect-ratio: 1; border: 5px solid white; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,.35); }
.boutique-page .mini-board i:nth-of-type(1) { top: 8%; left: 47%; background: var(--red); }
.boutique-page .mini-board i:nth-of-type(2) { top: 47%; right: 8%; background: var(--blue); }
.boutique-page .mini-board i:nth-of-type(3) { bottom: 8%; left: 47%; background: var(--green-700); }
.boutique-page .mini-board i:nth-of-type(4) { top: 47%; left: 8%; background: #ecb13c; }

.boutique-page .shop-page { position: relative; z-index: 2; width: 100%; height: calc(100vh - 4px); min-height: 0; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 24px 24px 0 0; background: var(--paper); box-shadow: var(--shadow); }
.boutique-page .shop-header { flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 17px; min-height: 90px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(96deg, rgba(255,253,247,.98), rgba(255,246,215,.95) 60%, #edf6e4); }
.boutique-page .back-link { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d3ddcf; border-radius: 8px; background: white; color: var(--green-800); text-decoration: none; box-shadow: 0 4px 11px rgba(38,69,31,.08); }
.boutique-page .eyebrow { margin: 0 0 4px; color: var(--green-700); font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.boutique-page h1, .boutique-page h2, .boutique-page h3, .boutique-page p { letter-spacing: 0; }
.boutique-page h1 { margin: 0; color: var(--green-950); font: 700 1.75rem "Amaranth"; }
.boutique-page .balance-card { min-width: 178px; display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 10px; border: 1px solid #e2c76c; border-radius: 8px; background: linear-gradient(135deg, #fffef8, #fff0bb); box-shadow: 0 6px 16px rgba(129,89,16,.1); }
.boutique-page .coin { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #ffde6d, #d99118); color: #7f5200; box-shadow: inset 0 2px rgba(255,255,255,.7), 0 3px 8px rgba(113,75,7,.18); }
.boutique-page .balance-card small, .boutique-page .balance-card strong { display: block; }
.boutique-page .balance-card small { color: #806b31; font-size: .52rem; font-weight: 700; }
.boutique-page .balance-card strong { margin-top: 3px; color: #5d430c; font: 700 1.08rem "Amaranth"; font-variant-numeric: tabular-nums; }

.boutique-page .shop-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.boutique-page .category-sidebar { min-height: 0; overflow-y: auto; padding: 17px 12px; border-right: 1px solid var(--line); background: #f4f7f1; }
.boutique-page .sidebar-label { margin: 0 9px 8px; color: #7c857b; font-size: .51rem; font-weight: 700; text-transform: uppercase; }
.boutique-page .category-button { position: relative; width: 100%; min-height: 48px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; margin: 2px 0; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: #526050; text-align: left; }
.boutique-page .category-button[hidden] { display: none; }
.boutique-page .category-button > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: white; color: #698064; box-shadow: 0 0 0 1px #dde5d9; }
.boutique-page .category-button b, .boutique-page .category-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boutique-page .category-button b { font-size: .62rem; }
.boutique-page .category-button small { margin-top: 3px; color: #929a90; font-size: .47rem; }
.boutique-page .category-button:hover { background: #e9efe5; }
.boutique-page .category-button.is-active { background: white; color: var(--green-800); box-shadow: 0 5px 13px rgba(35,65,29,.08); }
.boutique-page .category-button.is-active::before { position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--orange); content: ""; }
.boutique-page .category-button.is-active > i { background: var(--green-100); color: var(--green-700); box-shadow: none; }
.boutique-page .fair-play-note { display: flex; gap: 9px; margin: 15px 4px 0; padding: 11px; border-top: 1px solid #dbe2d7; color: var(--green-700); }
.boutique-page .fair-play-note > i { margin-top: 2px; }
.boutique-page .fair-play-note p { margin: 0; }
.boutique-page .fair-play-note strong, .boutique-page .fair-play-note span { display: block; }
.boutique-page .fair-play-note strong { font-size: .52rem; }
.boutique-page .fair-play-note span { margin-top: 4px; color: var(--muted); font-size: .45rem; line-height: 1.4; }

.boutique-page .catalog-area { min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px 18px 0; background: #fbfcf9; }
.boutique-page .catalog-banner { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 18px 24px; border-radius: 8px; background: linear-gradient(112deg, #204e2d 0%, #397a3f 57%, #f0bf45 160%); color: white; box-shadow: 0 9px 24px rgba(28,73,35,.18); }
.boutique-page .catalog-banner::before, .boutique-page .catalog-banner::after { position: absolute; content: ""; transform: rotate(25deg); background: rgba(255,255,255,.08); }
.boutique-page .catalog-banner::before { top: -70px; right: 220px; width: 60px; height: 230px; }
.boutique-page .catalog-banner::after { top: -80px; right: 120px; width: 18px; height: 250px; }
.boutique-page .catalog-banner > div:first-child { position: relative; z-index: 1; max-width: 665px; }
.boutique-page .banner-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #ffdf81; font-size: .51rem; font-weight: 700; text-transform: uppercase; }
.boutique-page .catalog-banner h2 { margin: 0; font: 700 1.45rem "Amaranth"; }
.boutique-page .catalog-banner p { margin: 5px 0 0; color: rgba(255,255,255,.82); font-size: .55rem; line-height: 1.55; }
.boutique-page .idea-button { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; background: white; color: var(--green-800); font-size: .51rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 10px rgba(15,42,19,.2); }
.boutique-page .idea-button:hover { background: #fff4c8; }
.boutique-page .idea-scene { position: relative; width: 185px; height: 116px; flex: none; }
.boutique-page .idea-sheet { position: absolute; z-index: 2; right: 24px; top: 5px; width: 106px; height: 106px; display: grid; place-items: center; align-content: center; gap: 7px; border: 5px solid white; border-radius: 7px; background: #fff8dc; color: var(--green-700); box-shadow: 0 12px 22px rgba(0,0,0,.24); transform: rotate(6deg); }
.boutique-page .idea-sheet::before, .boutique-page .idea-sheet::after { position: absolute; width: 24px; height: 5px; border-radius: 3px; background: #ee815d; content: ""; }
.boutique-page .idea-sheet::before { top: 12px; left: 10px; transform: rotate(-13deg); }
.boutique-page .idea-sheet::after { right: 9px; bottom: 13px; background: #68adbf; transform: rotate(18deg); }
.boutique-page .idea-sheet > i { font-size: 1.65rem; }
.boutique-page .idea-sheet b { color: #52694f; font: 700 .62rem/1.1 "Amaranth"; text-align: center; }
.boutique-page .idea-scene > .fa-wand-magic-sparkles { position: absolute; z-index: 3; top: 2px; left: 3px; color: #ffe482; font-size: 2rem; transform: rotate(-24deg); filter: drop-shadow(0 4px 5px rgba(0,0,0,.25)); }
.boutique-page .idea-scene > .fa-gift { position: absolute; z-index: 3; right: 1px; bottom: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 7px; background: #e88a35; color: white; font-size: 1.45rem; box-shadow: 0 7px 14px rgba(0,0,0,.22); transform: rotate(-7deg); }

.boutique-page .catalog-toolbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px 10px; }
.boutique-page .toolbar-filters { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.boutique-page .collection-count { height: 38px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid #cfe0c6; border-radius: 7px; background: var(--green-100); color: var(--green-700); white-space: nowrap; }
.boutique-page .collection-count > i { margin-right: 2px; }
.boutique-page .collection-count strong { font: 700 .72rem "Amaranth"; font-variant-numeric: tabular-nums; }
.boutique-page .collection-count span { font-size: .49rem; font-weight: 700; }
.boutique-page .collection-count b { font: inherit; }
.boutique-page .owned-filter { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #d6dfd2; border-radius: 7px; background: white; color: #596457; font-size: .49rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.boutique-page .owned-filter input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.boutique-page .toggle-track { position: relative; width: 29px; height: 17px; flex: none; border-radius: 9px; background: #cbd3c8; transition: background .16s ease; }
.boutique-page .toggle-track i { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .16s ease; }
.boutique-page .owned-filter input:checked + .toggle-track { background: var(--green-500); }
.boutique-page .owned-filter input:checked + .toggle-track i { transform: translateX(12px); }
.boutique-page .owned-filter input:focus-visible + .toggle-track { outline: 3px solid rgba(233,138,8,.42); outline-offset: 2px; }
.boutique-page .theme-select { min-width: 205px; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 11px; border: 1px solid #d6dfd2; border-radius: 7px; background: white; color: var(--green-700); }
.boutique-page .theme-select span { color: var(--muted); font-size: .52rem; font-weight: 700; }
.boutique-page .theme-select select { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .56rem; font-weight: 700; }

.boutique-page .catalog-grid { display: grid; gap: 18px; }
.boutique-page .theme-section { min-width: 0; }
.boutique-page .theme-section[hidden] { display: none; }
.boutique-page .theme-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; padding: 0 2px 8px; border-bottom: 1px solid #e1e8dd; }
.boutique-page .theme-section-header h2 { margin: 0; color: #2f4431; font: 700 .96rem "Amaranth"; }
.boutique-page .theme-section-count { flex: none; color: #7b867c; font-size: .48rem; font-weight: 700; text-transform: uppercase; }
.boutique-page .theme-items { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.boutique-page .shop-item { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dfe5dc; border-radius: 8px; background: white; box-shadow: 0 4px 12px rgba(35,65,29,.05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.boutique-page .shop-item:hover { transform: translateY(-2px); border-color: #cbd9c5; box-shadow: 0 9px 20px rgba(35,65,29,.1); }
.boutique-page .shop-item[hidden] { display: none; }
.boutique-page .item-preview { position: relative; height: 138px; flex: none; overflow: hidden; border-bottom: 1px solid #e3e8e0; background: #eef2ec; }
.boutique-page .item-copy { min-height: 113px; padding: 11px 12px 5px; }
.boutique-page .item-theme { color: var(--green-700); font-size: .45rem; font-weight: 700; text-transform: uppercase; }
.boutique-page .item-copy h3 { margin: 4px 0 5px; color: #293529; font: 700 .8rem "Amaranth"; }
.boutique-page .item-copy p { margin: 0; color: var(--muted); font-size: .48rem; line-height: 1.42; }
/* width: auto - commun.css definit `button { width:100% }` en global (voir
   menu.css .primary-button pour le meme repli) : sans cet override, le
   width:100% se calcule sur la largeur de .shop-item SANS tenir compte des
   marges laterales (margin ci-dessous) poussees par la suite, et deborde
   visiblement a droite de la carte - repere sur la vue boutique integree au
   jeu (index.html, qui charge commun.css), pas sur /boutique en autonome
   (qui ne le charge pas). */
.boutique-page .buy-button, .boutique-page .owned-button, .boutique-page .level-button, .boutique-page .wear-button, .boutique-page .equipped-button { width: auto; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: auto 11px 11px; border-radius: 7px; font-size: .54rem; font-weight: 700; line-height: normal; }
/* Neutralise le fond de glyphe FontAwesome (souvent plus large que l'encre
   visible, ex. fa-check) : sans ça, justify-content:center centre bien la
   BOITE de l'icone mais le trait visible dedans reste décentré vers un
   côté - constaté sur "Équipé". */
.boutique-page .buy-button i, .boutique-page .owned-button i, .boutique-page .level-button i, .boutique-page .wear-button i, .boutique-page .equipped-button i { width: 1em; text-align: center; }
.boutique-page .buy-button { border: 1px solid #d68408; background: linear-gradient(180deg, #f3a92d, var(--orange)); color: white; box-shadow: inset 0 1px rgba(255,255,255,.34), 0 3px 8px rgba(161,94,0,.16); }
.boutique-page .buy-button:hover { background: #d97c00; }
.boutique-page .owned-button { border: 1px solid #bcd4af; background: var(--green-100); color: var(--green-700); }
.boutique-page .level-button { border: 1px solid #dfe2dc; background: #f1f3f0; color: #8b9189; }
/* Équiper depuis la boutique (pas seulement l'onglet "Mes cosmétiques", pas
   encore construit) : un objet possédé mais pas actif sur son emplacement
   (equipement_joueur) propose "Porter" ; l'objet réellement actif affiche
   "Déséquiper" (cliquable, retire la ligne equipement_joueur pour revenir au
   skin par défaut) plutôt qu'un simple "Possédé" indifférencié. */
.boutique-page .wear-button { border: 1px solid #4a7a3f; background: linear-gradient(180deg, #6fae5e, var(--green-700)); color: white; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 3px 8px rgba(35,65,29,.18); }
.boutique-page .wear-button:hover { background: #3f6a35; }
.boutique-page .wear-button:disabled { opacity: .6; cursor: default; }
.boutique-page .equipped-button { border: 1px solid #bcd4af; background: var(--green-100); color: var(--green-700); cursor: pointer; }
.boutique-page .equipped-button:hover { background: #dbe8d4; }
.boutique-page .equipped-button:disabled { opacity: .6; cursor: default; }
.boutique-page .new-ribbon, .boutique-page .premium-badge { position: absolute; z-index: 4; top: 8px; left: 8px; padding: 5px 7px; border-radius: 5px; color: white; font-size: .43rem; font-weight: 700; text-transform: uppercase; }
.boutique-page .new-ribbon { background: var(--orange); }
.boutique-page .premium-badge { right: 8px; left: auto; background: rgba(30,40,30,.83); }

/* Aperçu générique piloté par les données (docs/BOUTIQUE.md §13,
   `boutique.png` par item) - la maquette d'origine dessinait chaque item à la
   main ; ici le fond reste par catégorie (classes ci-dessous, reprises telles
   quelles) et l'image réelle de l'item vient se poser par-dessus. */
.boutique-page .item-boutique-image { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.boutique-page .item-category-icon { position: relative; z-index: 2; color: rgba(39, 49, 39, .3); font-size: 2.6rem; }

.boutique-page .pawn-preview { display: flex; align-items: center; justify-content: center; padding: 10px; background: linear-gradient(155deg, #dcebd4, #faf3cf); }
.boutique-page .card-back-preview, .boutique-page .card-face-preview { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(145deg, #d9e7ed, #eef1df); }
.boutique-page .palette-preview { display: grid; place-content: center; background: #242934; }
.boutique-page .board-preview { display: grid; place-items: center; background: #254a29; }
.boutique-page .board-preview img.item-boutique-image { object-fit: cover; }
.boutique-page .victory-preview, .boutique-page .defeat-preview { display: grid; place-items: center; background: linear-gradient(155deg, #6b2d91, #d74b76 55%, #f1a926); color: #ffe07d; }
.boutique-page .sound-preview { display: grid; place-items: center; background: linear-gradient(145deg, #193d2a, #6f8f46); color: #fff2a6; }
.boutique-page .reaction-preview { display: grid; place-items: center; background: linear-gradient(145deg, #ffe6a8, #ffb44a); }
.boutique-page .capture-preview { padding: 0; background: linear-gradient(155deg, #2b3b2f, #16211a); }

/* docs/BOUTIQUE.md : prevue d'un effet de capture ("devoration") -
   deux pions neutres fixes, le mangeur pulse pendant que le mange rejoue la
   variante choisie (Boutique.js#construitSceneCapture pose data-effet et
   declenche/redeclenche via la classe is-playing). Independant de jeu.css
   (pas charge sur /boutique) : positions en % fixes, pas de variable posee
   en JS ni de plafonnement de duree (pas de moteur de deplacement
   concurrent dans une carte de catalogue statique). */
.boutique-page .capture-preview-stage { position: relative; width: 100%; height: 100%; }
.boutique-page .capture-preview-stage.is-large { height: 190px; }
.boutique-page .capture-preview-mangeur {
	position: absolute; left: 30%; top: 60%; width: 27%; aspect-ratio: 1;
	transform: translate(-50%, -50%); border-radius: 50%;
	box-shadow: 3px 2px 0 0 rgba(0,0,0,.35); z-index: 2;
}
.boutique-page .capture-preview-cible {
	position: absolute; left: 64%; top: 40%; width: 27%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
}
.boutique-page .capture-preview-mange {
	position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
	box-shadow: 3px 2px 0 0 rgba(0,0,0,.35);
}
.boutique-page .capture-preview-extra { position: absolute; inset: 0; pointer-events: none; }

/* Glouton */
.boutique-page .capture-preview-miettes i {
	position: absolute; width: 15%; height: 15%; border-radius: 50%;
	background: #fff3bc; box-shadow: 0 0 0 1px rgba(117,73,29,.28); opacity: 0;
}
.boutique-page .capture-preview-miettes i:nth-child(1) { left: 15%; top: 20%; }
.boutique-page .capture-preview-miettes i:nth-child(2) { left: 62%; top: 12%; }
.boutique-page .capture-preview-miettes i:nth-child(3) { left: 10%; top: 66%; }
.boutique-page .capture-preview-miettes i:nth-child(4) { left: 68%; top: 62%; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-mange { animation: capture-preview-glouton-mange 0.9s cubic-bezier(.2,.78,.2,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-mangeur { animation: capture-preview-glouton-mangeur 0.9s cubic-bezier(.2,.82,.2,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-miettes i:nth-child(1) { animation: capture-preview-miette-a .42s ease-out .48s forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-miettes i:nth-child(2) { animation: capture-preview-miette-b .42s ease-out .48s forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-miettes i:nth-child(3) { animation: capture-preview-miette-c .42s ease-out .48s forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="glouton"] .capture-preview-miettes i:nth-child(4) { animation: capture-preview-miette-d .42s ease-out .48s forwards; }

/* Impact */
.boutique-page .capture-preview-onde {
	border-radius: 50%; opacity: 0;
	background:
		radial-gradient(circle, rgba(255,255,255,.95) 0 5%, transparent 7%),
		radial-gradient(circle, rgba(255,255,255,0) 37%, rgba(255,255,255,.9) 41%, rgba(255,213,97,.48) 48%, rgba(255,255,255,0) 66%);
	filter: drop-shadow(0 0 5px rgba(255,241,180,.9));
}
.boutique-page .capture-preview-stage.is-playing[data-effet="impact"] .capture-preview-mange { animation: capture-preview-impact-mange 0.72s cubic-bezier(.2,.86,.24,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="impact"] .capture-preview-onde { animation: capture-preview-onde-anim 0.6s ease-out .16s forwards; }

/* Poussée */
.boutique-page .capture-preview-stage.is-playing[data-effet="poussee"] .capture-preview-mange { animation: capture-preview-poussee-mange 0.72s cubic-bezier(.26,.7,.2,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="poussee"] .capture-preview-mangeur { animation: capture-preview-poussee-mangeur 0.72s cubic-bezier(.26,.7,.2,1) forwards; }

/* Service Express */
.boutique-page .capture-preview-couverts i {
	position: absolute; top: 34%; left: -35%; width: 170%; height: 32%;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px rgba(42,56,66,.9)) drop-shadow(0 2px 3px rgba(8,17,25,.52));
	opacity: 0;
}
.boutique-page .capture-preview-couverts .fourchette {
	z-index: 2;
	background: linear-gradient(180deg, #fff 0 35%, #dfe7ec 55%, #fff 76%) left center / 72% 38% no-repeat;
}
.boutique-page .capture-preview-couverts .fourchette::before {
	content: ""; position: absolute; right: 27%; top: 11%; width: 25%; height: 78%;
	border-radius: 55% 28% 28% 55%;
	background: linear-gradient(180deg, #fff 0 34%, #dce5ea 57%, #fff 78%);
	clip-path: polygon(0 31%, 36% 12%, 100% 0, 100% 100%, 36% 88%, 0 69%);
}
.boutique-page .capture-preview-couverts .fourchette::after {
	content: ""; position: absolute; right: 0; top: 0; width: 36%; height: 100%; border-radius: 0 24% 24% 0;
	background: repeating-linear-gradient(180deg, #fff 0 17%, #b2bec6 18% 21%, transparent 22% 27%);
	clip-path: polygon(0 11%, 100% 0, 100% 100%, 0 89%);
}
.boutique-page .capture-preview-couverts .couteau {
	z-index: 1;
	background: linear-gradient(180deg, #fff 0 34%, #dce5ea 55%, #fff 77%) left center / 54% 42% no-repeat;
}
.boutique-page .capture-preview-couverts .couteau::before {
	content: ""; position: absolute; left: 46%; top: 3%; width: 54%; height: 94%;
	background: linear-gradient(165deg, #fff 0 43%, #dbe4e9 45% 52%, #fff 54% 76%, #cbd5db 77%);
	clip-path: polygon(0 25%, 64% 7%, 100% 24%, 88% 54%, 66% 77%, 15% 77%, 0 64%);
}
.boutique-page .capture-preview-couverts .couteau::after {
	content: ""; position: absolute; left: 47%; top: 24%; width: 8%; height: 52%;
	border-radius: 30%; background: #fff; box-shadow: inset 0 0 0 1px rgba(61,76,87,.4);
}
.boutique-page .capture-preview-stage.is-playing[data-effet="service"] .capture-preview-mange { animation: capture-preview-service-mange 1.02s cubic-bezier(.22,.8,.18,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="service"] .capture-preview-couverts .fourchette { animation: capture-preview-fourchette 1.02s cubic-bezier(.16,1,.3,1) forwards; }
.boutique-page .capture-preview-stage.is-playing[data-effet="service"] .capture-preview-couverts .couteau { animation: capture-preview-couteau 1.02s cubic-bezier(.16,1,.3,1) forwards; }

@keyframes capture-preview-glouton-mange { 0%, 16% { transform: translate(0,0) scale(1); opacity: 1; filter: brightness(1) saturate(1) blur(0); } 32% { transform: translate(24%,-7%) scale(.96,1.04) rotate(4deg); opacity: 1; filter: brightness(1.04) saturate(1.06) blur(0); } 46% { transform: translate(43%,-11%) scale(.92,1.08) rotate(7deg); opacity: 1; filter: brightness(1.08) saturate(1.1) blur(0); } 58% { transform: translate(24%,-7%) scale(.76,1.14) rotate(-5deg); opacity: 1; filter: brightness(1.14) saturate(1.08) blur(0); } 78% { transform: translate(-55%,10%) scale(.36) rotate(14deg); opacity: .88; filter: brightness(1.2) saturate(.9) blur(0); } 100% { transform: translate(-55%,10%) scale(.05) rotate(24deg); opacity: 0; filter: brightness(1.45) saturate(.55) blur(1px); } }
@keyframes capture-preview-glouton-mangeur { 0%, 16% { transform: translate(-50%,-50%) scale(1); } 34% { transform: translate(-50%,-50%) translateX(12%) scale(.94,1.06); } 56% { transform: translate(-50%,-50%) translateX(34%) scale(1.12,.9); } 76% { transform: translate(-50%,-50%) translateX(50%) scale(1.2); } 100% { transform: translate(-50%,-50%) translateX(46%) scale(1); } }
@keyframes capture-preview-miette-a { to { opacity: 0; transform: translate(-40%, -50%); } 40% { opacity: 1; } }
@keyframes capture-preview-miette-b { to { opacity: 0; transform: translate(45%, -55%); } 40% { opacity: 1; } }
@keyframes capture-preview-miette-c { to { opacity: 0; transform: translate(-45%, 45%); } 40% { opacity: 1; } }
@keyframes capture-preview-miette-d { to { opacity: 0; transform: translate(50%, 40%); } 40% { opacity: 1; } }
@keyframes capture-preview-impact-mange { 0%, 18% { transform: translate(0,0) scale(1); opacity: 1; filter: brightness(1) saturate(1) blur(0); } 34% { transform: translate(15%,3%) scale(.9,1.1); opacity: 1; filter: brightness(1.1) saturate(1.1) blur(0); } 48% { transform: translate(0,0) scale(1.3); opacity: 1; filter: brightness(1.65) saturate(.75) blur(0); } 70% { transform: scale(.7); opacity: .72; filter: brightness(1.35) saturate(.5) blur(.2px); } 100% { transform: scale(.08); opacity: 0; filter: brightness(1.8) saturate(.2) blur(1.5px); } }
@keyframes capture-preview-onde-anim { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2); } }
@keyframes capture-preview-poussee-mange { 0%, 20% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; filter: brightness(1) saturate(1) blur(0); } 36% { transform: translate(14%,2%) scale(.8,1.12) rotate(0); opacity: 1; filter: brightness(1.18) saturate(1.08) blur(0); } 60% { transform: translate(58%,8%) scale(.92) rotate(14deg); opacity: 1; } 82% { transform: translate(116%,16%) scale(.72) rotate(25deg); opacity: .82; filter: brightness(1) saturate(.85) blur(.25px); } 100% { transform: translate(116%,16%) scale(.48) rotate(25deg); opacity: 0; filter: brightness(1.2) saturate(.55) blur(1.2px); } }
@keyframes capture-preview-poussee-mangeur { 0%, 35% { transform: translate(-50%,-50%) scale(1) skewX(0deg); } 55% { transform: translate(-50%,-50%) scale(1.16) skewX(-8deg); } 100% { transform: translate(-50%,-50%) scale(1) skewX(0deg); } }
@keyframes capture-preview-service-mange { 0%, 24% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1) saturate(1) blur(0); } 38% { transform: scale(.8,1.2) rotate(-7deg); opacity: 1; filter: brightness(1.18) saturate(1.05) blur(0); } 52% { transform: scale(1.12,.78) rotate(8deg); filter: brightness(1.32) saturate(.9) blur(0); } 67% { transform: translateY(-12%) scale(.72,1.14) rotate(-12deg); opacity: .94; } 84% { transform: translateY(16%) scale(.58,.36) rotate(18deg); opacity: .7; filter: brightness(1.35) saturate(.55) blur(.25px); } 100% { transform: translateY(28%) scale(.12,.42) rotate(25deg); opacity: 0; filter: brightness(1.55) saturate(.3) blur(1.2px); } }
@keyframes capture-preview-fourchette { 0%, 9% { opacity: 0; transform: translate(-68%,88%) rotate(-8deg) scale(.62); } 28% { opacity: 1; transform: translate(3%,-1%) rotate(-46deg) scale(1.08); } 36%, 59% { opacity: 1; transform: translate(0,0) rotate(-42deg) scale(1); } 72% { opacity: .96; transform: translate(4%,-5%) rotate(-50deg) scale(.94); } 100% { opacity: 0; transform: translate(76%,-80%) rotate(-68deg) scale(.52); } }
@keyframes capture-preview-couteau { 0%, 9% { opacity: 0; transform: translate(68%,88%) rotate(8deg) scaleX(-1) scale(.62); } 28% { opacity: 1; transform: translate(-3%,-1%) rotate(46deg) scaleX(-1) scale(1.08); } 36%, 59% { opacity: 1; transform: translate(0,0) rotate(42deg) scaleX(-1) scale(1); } 72% { opacity: .96; transform: translate(-4%,-5%) rotate(50deg) scaleX(-1) scale(.94); } 100% { opacity: 0; transform: translate(-76%,-80%) rotate(68deg) scaleX(-1) scale(.52); } }

.boutique-page .capture-preview-replay { margin: 10px auto 0; display: flex; }

@media (prefers-reduced-motion: reduce) {
	.boutique-page .capture-preview-stage.is-playing * { animation-duration: 0.01ms !important; }
}
.boutique-page .generic-preview { display: grid; place-items: center; background: linear-gradient(145deg, #e3e8e0, #cfd9cb); }

.boutique-page .empty-state { flex: 1; min-height: 220px; display: grid; place-content: center; padding: 24px 20px; text-align: center; color: var(--muted); }
.boutique-page .empty-state > i { color: #9bb095; font-size: 2.2rem; }
.boutique-page .empty-state h3 { margin: 13px 0 5px; font: 700 1rem "Amaranth"; }
.boutique-page .empty-state p { margin: 0; font-size: .56rem; }

.boutique-page .modal-backdrop { position: fixed; z-index: 10050; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(19,31,18,.72); backdrop-filter: blur(4px); }
.boutique-page .modal-backdrop[hidden] { display: none; }
.boutique-page .purchase-modal { position: relative; width: min(460px, 100%); padding: 29px; border: 1px solid rgba(255,255,255,.75); border-radius: 12px; background: #fffefa; text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.35); animation: boutique-modal-enter .2s ease-out; }
@keyframes boutique-modal-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.boutique-page .modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 7px; background: #f0f3ee; color: #697367; }
/* docs/BOUTIQUE.md §14 : image_boutique (500x500) reste souvent NULL
   tant qu'aucun visuel dédié n'existe pour un item - la modale d'achat doit
   quand même bien présenter le produit. Repli en cascade géré en JS
   (Boutique.js#remplitVisuelModale) : image_boutique, puis l'asset réel du
   dossier de l'item quand la catégorie en a un (dos de carte, pion), puis
   seulement l'icône générique ci-dessous. */
.boutique-page .purchase-visual { display: grid; place-items: center; margin: 0 auto 16px; }
.boutique-page .purchase-visual-image { display: block; max-width: 100%; max-height: 230px; width: auto; height: auto; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.24); object-fit: contain; }
.boutique-page .purchase-mark { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--gold-soft), #f4ae39); color: #795100; font-size: 1.35rem; box-shadow: 0 7px 17px rgba(151,98,9,.16); }
.boutique-page .purchase-modal h2 { margin: 0; color: var(--green-950); font: 700 1.35rem "Amaranth"; }
.boutique-page #purchase-description { margin: 7px auto 18px; color: var(--muted); font-size: .57rem; line-height: 1.5; }
.boutique-page .balance-summary { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; padding: 14px; border: 1px solid #e3e6df; border-radius: 8px; background: #f7f8f5; }
.boutique-page .balance-summary > i { color: #a7afa4; }
.boutique-page .balance-summary span, .boutique-page .balance-summary strong, .boutique-page .balance-summary small { display: block; }
.boutique-page .balance-summary span { color: var(--muted); font-size: .5rem; font-weight: 700; }
.boutique-page .balance-summary strong { margin: 5px 0 2px; color: #3d4b3c; font: 700 1.16rem "Amaranth"; font-variant-numeric: tabular-nums; }
.boutique-page .balance-summary small { color: #899087; font-size: .44rem; }
.boutique-page .balance-summary .new-balance { padding: 8px; border-radius: 7px; background: var(--green-100); }
.boutique-page .balance-summary .new-balance strong { color: var(--green-700); }
.boutique-page .balance-summary .new-balance.is-insufficient { background: #fbe8e5; }
.boutique-page .balance-summary .new-balance.is-insufficient strong { color: #b84439; }
.boutique-page .remaining-track { height: 7px; margin: 10px 5px 17px; overflow: hidden; border-radius: 6px; background: #e1e5de; }
.boutique-page .remaining-track span { display: block; width: 80%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-500), #b8cd47); transition: width .2s ease; }
.boutique-page .purchase-price { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 14px; color: var(--muted); font-size: .56rem; }
.boutique-page .purchase-price strong { color: #73530c; font-size: .72rem; }
.boutique-page .purchase-price b { font: inherit; }
.boutique-page .insufficient-message { margin: -2px 0 14px; padding: 9px; border-radius: 7px; background: #fbe8e5; color: #9d372e; font-size: .51rem; line-height: 1.45; }
.boutique-page .modal-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 9px; }
.boutique-page .secondary-button, .boutique-page .confirm-button { min-height: 40px; border-radius: 7px; font-size: .56rem; font-weight: 700; }
.boutique-page .secondary-button { border: 1px solid #d7ddd3; background: white; color: #5f695e; }
.boutique-page .confirm-button { border: 1px solid #cf7900; background: linear-gradient(180deg, #f3a92d, var(--orange)); color: white; box-shadow: 0 5px 12px rgba(174,101,0,.18); }
.boutique-page .confirm-button:disabled { border-color: #d7dbd4; background: #e8ebe6; color: #949a92; box-shadow: none; cursor: not-allowed; }
/* Nom volontairement prefixe (pas .modal-open) : ne doit jamais interferer
   avec un autre systeme du site qui verrouillerait le scroll du body pour
   sa propre modale. */
body.boutique-modal-open { overflow: hidden; }
/* Repris du toast global (menu.css, ex. "Vous avez été reconnecté") : même
   position haute centrée, même fond sobre - demandé explicitement plutôt que
   le bandeau bas-droite d'origine. Bug trouvé en le construisant : menu.css
   pose aussi un `.toast` NON scopé (composant partagé) ; l'ancienne règle
   ici ne redéfinissait que right/bottom, jamais top/left - sur ces deux
   propriétés precises, sans concurrent scopé, c'est donc la règle globale
   qui s'appliquait malgré sa specificite plus faible (la cascade se
   resout propriete par propriete, pas regle par regle). Avec top ET bottom
   poses simultanement (l'un par cette regle, l'autre par la regle globale),
   position:fixed etirait l'element sur toute la hauteur - la barre verticale
   plein ecran vue en test. Toutes les proprietes de positionnement sont donc
   explicitement redefinies ci-dessous, y compris celles qui semblent
   redondantes avec le composant global, pour ne plus jamais en dependre. */
.boutique-page .toast {
	box-sizing: border-box;
	position: fixed;
	z-index: 10060;
	top: calc(5% + max(10px, env(safe-area-inset-top)));
	left: 50%;
	right: auto;
	bottom: auto;
	width: max-content;
	max-width: min(360px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 17px;
	border-radius: 12px;
	background: #202a20;
	color: white;
	box-shadow: 0 12px 34px rgba(0,0,0,.3);
	font-size: .62rem;
	font-weight: 700;
	text-align: left;
	overflow-wrap: anywhere;
	opacity: 0;
	transform: translate(-50%, -15px);
	pointer-events: none;
	transition: 180ms ease;
}
.boutique-page .toast i { width: 23px; height: 23px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green-700); }
.boutique-page .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.boutique-page .toast.is-error { background: #4a1f1c; }
.boutique-page .toast.is-error i { background: #a4453a; }

@media (max-width: 820px) {
	.boutique-page .shop-page { height: calc(100dvh - 4px); min-height: 0; border-radius: 19px 19px 0 0; }
	.boutique-page .shop-layout { grid-template-columns: 175px minmax(0,1fr); }
	.boutique-page .theme-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
	.boutique-page .preview { padding: 4px 6px 0; }
	.boutique-page .shop-layout { display: flex; flex-direction: column; overflow: hidden; }
	.boutique-page .category-sidebar { flex: none; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 7px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
	.boutique-page .sidebar-label, .boutique-page .fair-play-note { display: none; }
	.boutique-page .category-sidebar nav { display: flex; gap: 5px; }
	.boutique-page .category-button { width: 70px; min-height: 52px; grid-template-columns: 1fr; justify-items: center; gap: 3px; margin: 0; padding: 4px; text-align: center; }
	.boutique-page .category-button > i { width: 28px; height: 27px; }
	.boutique-page .category-button b { font-size: .43rem; }
	.boutique-page .category-button small { display: none; }
	.boutique-page .category-button.is-active::before { inset: auto 10px 0; width: auto; height: 3px; }
	.boutique-page .catalog-area { padding: 10px 10px 0; }
	.boutique-page .catalog-banner { min-height: 174px; padding: 14px; flex-direction: column; align-items: flex-start; }
	.boutique-page .catalog-banner > div:first-child { max-width: 265px; }
	.boutique-page .catalog-banner h2 { font-size: 1rem; }
	.boutique-page .catalog-banner p { font-size: .44rem; }
	.boutique-page .idea-scene { display: none; }
	.boutique-page .catalog-toolbar { display: block; padding-top: 13px; }
	.boutique-page .toolbar-filters { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; margin-top: 9px; }
	.boutique-page .collection-count { justify-content: center; padding-inline: 8px; }
	.boutique-page .owned-filter { justify-content: center; min-width: 0; padding-inline: 8px; }
	.boutique-page .owned-filter > span:last-child { overflow: hidden; text-overflow: ellipsis; }
	.boutique-page .theme-select { grid-column: 1 / -1; width: 100%; min-width: 0; max-width: none; }
	.boutique-page .catalog-grid { gap: 14px; }
	.boutique-page .theme-section-header { margin-bottom: 7px; padding-bottom: 6px; }
	.boutique-page .theme-section-header h2 { font-size: .82rem; }
	.boutique-page .theme-section-count { font-size: .42rem; }
	.boutique-page .theme-items { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
	.boutique-page .item-preview { height: 112px; }
	.boutique-page .item-copy { min-height: 105px; padding: 9px; }
	.boutique-page .item-copy h3 { font-size: .7rem; }
	.boutique-page .item-copy p { font-size: .43rem; }
	.boutique-page .buy-button, .boutique-page .owned-button, .boutique-page .level-button, .boutique-page .wear-button, .boutique-page .equipped-button { margin-inline: 8px; font-size: .49rem; }
	.boutique-page .shop-header { grid-template-columns: 34px minmax(0,1fr) auto; min-height: 75px; gap: 9px; padding: 10px; }
	.boutique-page .back-link { width: 34px; height: 34px; }
	.boutique-page h1 { font-size: 1.1rem; }
	.boutique-page .shop-heading .eyebrow { display: none; }
	.boutique-page .balance-card { min-width: 106px; gap: 7px; padding: 7px; }
	.boutique-page .coin { width: 29px; height: 29px; }
	.boutique-page .balance-card small { font-size: .4rem; }
	.boutique-page .balance-card strong { font-size: .83rem; }
}

@media (max-width: 430px) {
	.boutique-page .purchase-modal { padding: 25px 18px 18px; }
	.boutique-page .balance-summary { grid-template-columns: 1fr 20px 1fr; padding: 10px; }
	.boutique-page .modal-actions { grid-template-columns: 1fr; }
}