/* Maquette de la boutique (24 sept. 2026) : des feuillets de parchemin sur l'aquarelle, comme le reste du jeu. */
.maquette-boutique { min-height: 100vh; overflow-y: auto; }
.maquette-boutique #fond-monde { position: fixed; }
.boutique-bandeau { position: sticky; top: 6px; margin: 6px 8px 0; left: auto; right: auto; }
.boutique-bandeau .plus-eclats { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%;
  background: var(--ambre); color: var(--sur-ambre); font-style: normal; font-weight: 700; font-size: .8rem; line-height: 1; }
.boutique { position: relative; z-index: 1; padding: 10px 12px calc(var(--sous) + 30px); }
.maquette-avis { margin: 4px 0 10px; padding: 6px 10px; border-radius: 8px; background: rgba(184,65,58,.85); color: #fff3e6; font-size: .85rem; text-align: center; }
.feuillet { position: relative; background: var(--papier); border: 1px solid var(--or-fane-sombre); border-radius: 12px; box-shadow: var(--cadre); color: var(--encre); }
.feuillet::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(138,109,59,.35); border-radius: 8px; pointer-events: none; }
.achat { flex: none; min-height: 40px; padding: 6px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.achat .icone { width: 18px; height: 18px; }
.ruban-offre { position: absolute; z-index: 3; top: -9px; right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--brique); color: #fff3e6; font-size: .78rem; font-weight: 700; letter-spacing: .04em; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ruban-offre.petit { font-size: .68rem; padding: 2px 8px; }

/* l'offre de départ : les cartes en éventail sur le décor, le texte sur un feuillet */
.offre-vedette { position: relative; margin: 14px 0 6px; border-radius: 14px; overflow: visible; background: linear-gradient(rgba(21,18,32,.2), rgba(21,18,32,.85)), url(/img/fond_nexus.webp?v=1f95743f73) center 30% / cover;
  border: 1px solid #f3d6a0; box-shadow: 0 0 30px rgba(243,179,92,.35), 0 10px 30px rgba(0,0,0,.6); padding: 16px 12px 12px; }
.vedette-cartes { position: relative; height: 170px; display: flex; justify-content: center; align-items: flex-end; }
.vedette-cartes .carte { position: absolute; width: 104px; bottom: 0; box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.vedette-cartes .carte:nth-child(1) { transform: translateX(0) scale(1.08); z-index: 3; }
.vedette-cartes .carte:nth-child(2) { transform: translateX(-78px) rotate(-10deg); z-index: 2; }
.vedette-cartes .carte:nth-child(3) { transform: translateX(78px) rotate(10deg); z-index: 1; }
.vedette-texte { margin-top: 12px; padding: 12px 14px; background: var(--papier); border: 1px solid var(--or-fane-sombre); border-radius: 12px; box-shadow: var(--cadre); color: var(--encre); }
.vedette-texte small { display: block; color: var(--brique); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.vedette-texte > b { display: block; font-size: 1.35rem; font-variant: small-caps; letter-spacing: .03em; }
.vedette-texte ul { margin: 6px 0 8px; padding-left: 18px; font-size: .95rem; }
.vedette-texte li .icone { width: 16px; height: 16px; vertical-align: -3px; }
.prix-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.prix-ligne s { color: var(--encre-2); font-size: 1rem; }
.prix-ligne .achat { min-width: 45%; font-size: 1.1rem; }
.vedette-texte em { display: block; margin-top: 6px; color: var(--encre-2); font-size: .78rem; }

/* l'abonnement */
.abonnement { display: flex; align-items: center; gap: 12px; padding: 14px; }
.abo-sceau { flex: none; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #f8cf7e, #e0892f 60%, #b8631c); border: 2px solid #f3d6a0; box-shadow: 0 0 16px rgba(243,179,92,.7); }
.abo-sceau .icone { width: 40px; height: 40px; }
.abo-texte { flex: 1; min-width: 0; }
.abo-texte > b { font-size: 1.05rem; }
.abo-gains { display: flex; flex-direction: column; gap: 1px; margin: 4px 0; font-size: .86rem; color: var(--encre-2); }
.abo-gains span { display: inline-flex; align-items: center; gap: 4px; }
.abo-gains .icone { width: 15px; height: 15px; }
.abo-gains b { color: var(--encre); }
.abo-total { font-size: .8rem; color: var(--encre-2); }
.abo-total b { color: #3f7a36; }
.abonnement .achat { flex-direction: column; font-size: .9rem; }

/* le pass : une piste horizontale, gratuit dessus, pass dessous */
.pass { padding: 12px 0 10px; overflow: hidden; }
.pass-rangs { position: absolute; left: 10px; top: 16px; bottom: 50px; display: flex; flex-direction: column; justify-content: space-around; z-index: 2; }
.pass-etiquette { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.pass-etiquette.premium { color: #9a4f14; font-weight: 700; }
.pass-piste { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 8px 30px; scrollbar-width: none; }
.pass-palier { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pass-palier span.gratuit, .pass-palier span.prem { position: relative; width: 52px; height: 52px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--voile); border: 1px solid var(--voile-bord); }
.pass-palier span.prem { background: linear-gradient(rgba(243,179,92,.35), rgba(217,130,43,.2)); border-color: rgba(201,111,34,.6); }
.pass-palier span .icone { width: 30px; height: 30px; }
.pass-palier span small { font-size: .6rem; font-weight: 700; color: #9a4f14; }
.pass-palier .n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--papier-clair); border: 1px solid var(--or-fane-sombre); font-size: .72rem; font-weight: 700; }
.pass-palier.fait .gratuit::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--sauge); border: 2px solid var(--papier-clair); }
.pass-palier.fait .prem { filter: grayscale(.6); opacity: .7; }
.pass-palier.courant .n { background: var(--ambre); color: var(--sur-ambre); border-color: #f3d6a0; box-shadow: 0 0 8px var(--ambre); }
.pass-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px 0; font-size: .82rem; color: var(--encre-2); }

/* les paquets */
.rangee-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.offre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 8px; text-align: center; }
.offre > b { font-size: .9rem; line-height: 1.1; margin-top: 4px; }
.offre > small { font-size: .72rem; color: var(--encre-2); line-height: 1.15; min-height: 2.3em; }
.offre .achat { width: 100%; margin-top: 4px; padding: 4px 6px; min-height: 36px; font-size: .88rem; }
.offre .paquet.mini { width: 58px; }
.offre .paquet.domaine { filter: hue-rotate(60deg) saturate(1.2); }
.offre-carte { width: 76px; }
.offre.semaine { border-color: #c96f22; }

/* les éclats */
.grille-eclats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eclats-offre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 8px; text-align: center; }
.eclats-offre > .icone { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.eclats-offre > b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.eclats-offre > small { font-size: .74rem; color: #3f7a36; font-weight: 700; }
.eclats-offre .achat { width: 100%; margin-top: 4px; min-height: 36px; }
.eclats-offre.populaire { border-color: #c96f22; box-shadow: var(--cadre), 0 0 16px rgba(217,130,43,.35); }
.eclats-offre.double { background: linear-gradient(rgba(243,179,92,.35), rgba(217,130,43,.2)), var(--papier); }
.eclats-offre.double > small { color: var(--encre-2); font-weight: 400; }

/* la collection */
.cosmetiques { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.cosme { flex: 0 0 42%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 8px; text-align: center; }
.cosme > b { font-size: .92rem; margin-top: 4px; }
.cosme > small { font-size: .74rem; color: var(--encre-2); min-height: 2.3em; }
.cosme .achat { width: 100%; margin-top: 4px; min-height: 36px; }
/* l'essai : un bouton d'encre fine au-dessus du prix, et le bandeau qui décompte sous le bandeau du haut */
.cosme .essayer { width: 100%; margin-top: 6px; min-height: 34px; padding: 4px 6px; border: 1px dashed var(--or-fane-sombre); border-radius: 8px; background: transparent; color: var(--encre); font: inherit; font-size: .84rem; cursor: pointer; }
.cosme .essayer:disabled { opacity: .55; cursor: default; }
.essai-bandeau { position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); top: calc(var(--bandeau) + var(--sur) + 8px); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 4px 4px 4px 12px; border-radius: 22px; border: 1px solid var(--or-fane-sombre); background: var(--papier); box-shadow: var(--cadre); color: var(--encre); font-size: .86rem; white-space: nowrap; animation: apparaitre .25s ease-out; }
.essai-bandeau .essai-quoi { overflow: hidden; text-overflow: ellipsis; }
.essai-bandeau .essai-reste { font-variant-numeric: tabular-nums; color: var(--brique); }
.essai-bandeau .achat { min-height: 32px; padding: 0 12px; font-size: .84rem; }
.cosme-carte { width: 92px; }
.cosme-carte.prisme .carte { box-shadow: 0 0 0 2px transparent, 0 0 14px rgba(196,140,245,.8); outline: 2px solid; outline-color: #c48cf5; animation: prisme-cadre 3s linear infinite; }
@keyframes prisme-cadre { 0% { outline-color: #ff6b8a; } 33% { outline-color: #ffd36a; } 66% { outline-color: #6fdcff; } 100% { outline-color: #ff6b8a; } }
.cosme-dos { width: 92px; aspect-ratio: 5 / 7; background: center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: dos-lueur 2.4s ease-in-out infinite alternate; }
@keyframes dos-lueur { from { filter: drop-shadow(0 0 4px rgba(255,140,40,.4)); } to { filter: drop-shadow(0 0 14px rgba(255,140,40,.9)); } }
.cosme-theme { width: 92px; aspect-ratio: 5 / 7; border-radius: 8px; position: relative; overflow: hidden; background: linear-gradient(#5a3a1c, #2a1a0c); border: 1px solid #8a5a2a; }
.cosme-theme::before { content: ''; position: absolute; left: 40%; top: -10%; width: 22%; height: 120%; background: repeating-linear-gradient(#b9772c 0 10px, #9a5e22 10px 20px); transform: rotate(12deg); border-radius: 8px; }
.cosme-theme i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e8b872, #a8652a); border: 2px solid #5c3a1a; left: 38%; }
.cosme-theme i:nth-child(1) { top: 12%; } .cosme-theme i:nth-child(2) { top: 42%; left: 44%; }
.cosme-theme i.soleil { top: 72%; background: radial-gradient(circle at 40% 35%, #f8cf7e, #e0892f); box-shadow: 0 0 12px #f3b35c; }

/* le confort */
.confort { padding: 4px 12px; }
.confort-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--voile-bord); }
.confort-ligne:first-child { border-top: 0; }
.confort-ligne > .icone { width: 34px; height: 34px; flex: none; }
.confort-ligne div { flex: 1; display: flex; flex-direction: column; }
.confort-ligne small { color: var(--encre-2); font-size: .78rem; }
.confort-sous { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--voile-bord); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.confort-sous + .confort-ligne { border-top: 0; }
.confort-ligne .bouton.pub { display: inline-flex; align-items: center; gap: 4px; }
.confort-ligne .bouton.pub .lecture { width: 16px; height: 16px; display: inline-flex; }
.confort-ligne .bouton.pub .lecture svg { width: 100%; height: 100%; }

/* les garde-fous, en bas, visibles */
.boutique-pied { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; }
.lien-pied { padding: 8px; border-radius: 8px; border: 1px solid rgba(235,223,198,.4); background: rgba(21,18,32,.55); color: var(--encre-nuit); font: inherit; font-size: .82rem; }
.boutique h2 { margin-top: 22px; }

/* ------------------------------------------------ la boutique dans le jeu */
.boutique-ecran { position: fixed; inset: 0; z-index: 25; background: var(--nuit) url(/img/fond_nexus.webp?v=1f95743f73) center 30% / cover no-repeat; display: flex; flex-direction: column; animation: fin-voile .25s ease-out both; }
.boutique-ecran::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(21,18,32,.45), rgba(21,18,32,.2) 30%, rgba(21,18,32,.6)); pointer-events: none; }
.boutique-ecran .boutique-bandeau { position: relative; top: auto; left: auto; right: auto; flex: none; margin: calc(var(--sur) + 6px) 8px 0; z-index: 2; }
.boutique-ecran .boutique { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; z-index: 1; scrollbar-width: none; }
.boutique-fermer { flex: none; margin: 0; padding: 0 12px; border: 0; border-left: 1px solid var(--or-fane-sombre); background: none; color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
/* le « + » des éclats dans le bandeau : l'entrée de la boutique */
.plus-eclats { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 5px; padding: 0; border-radius: 50%; border: 1px solid #f3d6a0;
  background: var(--ambre); color: var(--sur-ambre); font: inherit; font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; position: relative; }
.plus-eclats.signal::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--brique); border: 1px solid #fff3e6; }
.acquis { flex: none; padding: 6px 12px; border-radius: 999px; background: rgba(109,138,104,.18); border: 1px solid rgba(63,122,54,.5); color: #3f7a36; font-weight: 700; font-size: .85rem; }
.non-merci { margin-right: auto; }
.abo-cote { display: flex; flex-direction: column; gap: 6px; }
.pass-palier button { font: inherit; cursor: pointer; padding: 0; }
.pass-palier button:disabled { cursor: default; }
.pass-palier span.gratuit, .pass-palier span.prem, .pass-palier button.gratuit, .pass-palier button.prem { position: relative; width: 52px; height: 52px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--voile); border: 1px solid var(--voile-bord); color: var(--encre); }
.pass-palier button.prem { background: linear-gradient(rgba(243,179,92,.35), rgba(217,130,43,.2)); border-color: rgba(201,111,34,.6); }
.pass-palier button .icone { width: 26px; height: 26px; }
.pass-palier button small { font-size: .6rem; font-weight: 700; color: var(--encre-2); line-height: 1; }
.pass-palier button.pret { box-shadow: 0 0 0 2px var(--ambre), 0 0 10px rgba(217,130,43,.6); animation: battre-point 1.4s ease-in-out infinite; }
.pass-palier button.pris { opacity: .45; }
.pass-palier button.pris::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--sauge); border: 2px solid var(--papier-clair); }
.pass-palier.fait .prem:disabled:not(.pris) { filter: grayscale(.5); }
.eclats-offre.energie > small { color: var(--encre-2); font-weight: 400; }
.cosme-dos.tictac { filter: sepia(.5) hue-rotate(-20deg) saturate(1.4) drop-shadow(0 0 8px rgba(243,214,160,.8)); animation: none; }
.fin-offre { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: nowrap; text-align: left; margin: 8px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--voile); border: 1px dashed var(--voile-bord); font-size: .85rem; color: var(--encre-2); }
.fin-offre .icone { width: 20px; height: 20px; }
.liste-achats { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; font-size: .9rem; }
.liste-achats li { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid var(--voile-bord); }
.liste-achats li b { flex: 1; font-weight: 600; }
.plafonds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.paiement-test { font-size: 1.05rem; }

/* ------------------------------------------------ les cosmétiques portés (classes posées sur <body>) */
/* les dos d'avant : leur effet sur l'image posée par Cartes.choisirDos (le dos du Domaine pour le Tic-Tac) */
.retournable .dos.dos-tictac { filter: sepia(.5) hue-rotate(-20deg) saturate(1.4) drop-shadow(0 0 8px rgba(243,214,160,.8)) !important; }
.retournable .dos.dos-forge { animation: dos-lueur 2.4s ease-in-out infinite alternate; }
body.lisere-prisme .carte.rang-2 { outline: 2px solid #c48cf5; outline-offset: -1px; animation: prisme-cadre 3s linear infinite; }
body.chemin-automne #chemin .route { filter: sepia(1) saturate(2.4) hue-rotate(-14deg) brightness(.82); }   /* les pavés gardent leur relief, teintés de bronze */
body.chemin-automne #chemin .route-bordure { stroke: #6b3f12; }
body.chemin-automne #chemin .niveau:not(.courant) circle.rond { fill: #d7a86a; stroke: #6b3f12; }
body.chemin-automne #chemin .niveau.fait:not(.courant) circle.rond { fill: #e8c08a; }
body.chemin-automne #chemin .niveau.ferme circle.rond { fill: #b58a57; }
/* le bandeau garde le nom lisible à côté des grands nombres et du « + » */
.bandeau .nom-boite { min-width: 76px; }
.bandeau .ressource { padding: 0 7px; gap: 3px; }
.bandeau .ressource .icone { height: 20px; }

/* la fidélité de Chrona */
.lien-fidelite { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: #9a4f14; font: inherit; font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.fidelite-tete { display: flex; align-items: center; gap: 12px; padding: 14px; }
.fidelite-tete > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.fidelite-tete b { font-size: 1.15rem; }
.fidelite-tete small { color: var(--encre-2); font-size: .85rem; }
.fidelite-tete small.suivant { color: #9a4f14; font-weight: 600; }
.frise-fidelite { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.frise-fidelite::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--or-nuit), rgba(179,154,90,.25)); }
.frise-fidelite li { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px 10px 0; background: var(--papier); border: 1px solid var(--or-fane-sombre); border-radius: 12px; box-shadow: var(--cadre); color: var(--encre); }
.frise-fidelite .mois { flex: none; position: relative; z-index: 1; width: 56px; margin-left: -1px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.frise-fidelite .mois b { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--papier-clair); border: 2px solid var(--or-fane-sombre); }
.frise-fidelite .mois small { margin-top: 2px; font-size: .66rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: .08em; }
.frise-fidelite .palier-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frise-fidelite .palier-texte b { font-size: .95rem; }
.frise-fidelite .palier-texte small { font-size: .78rem; color: var(--encre-2); }
.frise-fidelite li.atteint .mois b { background: radial-gradient(circle at 40% 35%, #f8cf7e, #e0892f 60%, #b8631c); color: #fff6ea; border-color: #f3d6a0; box-shadow: 0 0 10px rgba(243,179,92,.7); }
.frise-fidelite li.pris .mois b { background: var(--sauge); color: #fff; border-color: #cfe3c8; }
.frise-fidelite li.pris .palier-texte small { color: #3f7a36; font-weight: 700; }
.frise-fidelite li.avenir { opacity: .72; }
.fidelite-note { margin: 10px 2px; padding: 8px 12px; border-radius: 10px; background: rgba(21,18,32,.55); color: var(--encre-nuit-2); }
.test-mois { display: block; margin: 12px auto 0; background: rgba(184,65,58,.85); color: #fff3e6; border-color: #f3d6a0; }
.cosme-dos.fidele { filter: sepia(.7) saturate(2.2) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 10px rgba(230,193,74,.9)); animation: none; }
.retournable .dos.dos-fidele { filter: sepia(.7) saturate(2.2) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 10px rgba(230,193,74,.9)) !important; }

/* les boutons des cases, tous au pied de leur case (Mika, 24 sept. 2026 : « pas bien alignés ») */
.rangee-offres, .grille-eclats { align-items: stretch; }
.offre > .achat, .eclats-offre > .achat, .cosme > .achat, .cosme > .acquis { margin-top: auto; }
.offre > small, .cosme > small { margin-bottom: 6px; }

/* une carte à pleine illustration (jeton de la boutique) : l'image entière, comme les Légendaires, dans la couleur de son rang */
.carte.plein .portrait { left: 0; top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; object-position: center; }
.carte.plein .holo { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
.carte.plein::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, rgba(21,18,32,.55) 45%, rgba(21,18,32,.9)); }
.carte.plein .stats span { background: rgba(239,228,204,.88); }
.carte.plein .nom span { color: #f3e6c8; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.carte.plein .jauge { background: rgba(0,0,0,.45); }
.carte.plein { box-shadow: var(--ombre), 0 0 0 1.2cqw color-mix(in srgb, var(--couleur-rang) 70%, transparent) inset; }
/* l'autel de l'Invocation : le paquet en pleine largeur, la boutique en petit dessous (le prix du paquet était coupé) */
.autel-invocation .rangee { flex-wrap: wrap; gap: 8px; }
.autel-invocation #invoquer-6 { flex: 1 1 100%; order: -1; }
.autel-invocation #invocation-boutique { flex: 0 0 auto; margin: 0 auto; position: relative; z-index: 2; color: var(--encre); background: linear-gradient(var(--papier-clair), var(--papier-bas)); }
/* le liseré prismatique vit sur la face : retournée, la carte n'a plus de cadre (le dos a le sien) — il restait en rectangle */
body.lisere-prisme .retournable.verso .carte, body.lisere-prisme .pli.verso .carte { outline: none; animation: none; }
body.lisere-prisme .carte.rang-2 { outline-offset: 0; }

/* la ligne d'offre de l'écran de défaite : le texte à gauche, un bouton lisible à droite */
.fin-offre > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fin-offre > span b { color: var(--encre); font-size: .9rem; }
.fin-offre > span small { color: var(--encre-2); font-size: .78rem; }
.fin-offre > .icone { width: 26px; height: 26px; flex: none; }
.fin-offre .mini { flex: none; color: var(--encre); background: linear-gradient(var(--papier-clair), var(--papier-bas)); border-color: var(--or-fane-sombre); font-weight: 700; white-space: nowrap; }

/* --- audit des écrans du 25 sept. 2026 (Android en 360 à 412 px) --- */
/* l'abonnement : sous 440 px, le texte prend toute la largeur à côté du sceau et le bouton passe dessous
   (en 360 px le texte s'empilait en colonne d'un mot) ; chaque gain est une ligne de texte, l'icône en ligne */
.abonnement { flex-wrap: wrap; }
.abo-gains span { display: block; }
.abo-gains .icone { vertical-align: -2px; margin-right: 4px; }
@media (max-width: 440px) {
  .abonnement > .achat, .abonnement > .abo-cote, .abonnement > .bouton { flex: 1 1 100%; }
  .abonnement > .abo-cote { flex-direction: row; }
  .abonnement > .abo-cote > * { flex: 1; }
  .abonnement > .achat { flex-direction: row; justify-content: center; }
}
/* le « + » des éclats : 20 px se ratait au doigt ; une zone de toucher de 40 px autour du même rond */
.plus-eclats { width: 22px; height: 22px; }   /* le dessin reste petit (26 px coupait le nom en 360 px), la zone de toucher fait 38 px */
.plus-eclats::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
/* « Fidélité : mois 6 » : un lien de 20 px de haut, trop fin pour le doigt */
.lien-fidelite { padding: 8px 4px; min-height: 32px; }
/* le palier du Pass à prendre : il luit au lieu de grossir (Mika, 25 sept. 2026 : le battement le faisait déborder de la
   piste) ; la piste garde assez de marge pour que la lueur ne soit pas rognée */
.pass-palier button.pret { animation: luire-palier 1.6s ease-in-out infinite; }
@keyframes luire-palier {
  0%, 100% { box-shadow: 0 0 0 2px var(--ambre), 0 0 4px rgba(243,179,92,.35); filter: brightness(1); }
  50% { box-shadow: 0 0 0 2px #ffd48a, 0 0 12px 2px rgba(243,179,92,.85); filter: brightness(1.12); }
}
.pass-piste { padding-top: 10px; padding-bottom: 12px; }

/* ------------------------------------------------------------------ les dos de collection (27 sept. 2026, maquette dos.html) */
.dos-ecran { z-index: 26; }
.dos-ecran .feuillet { padding: 10px; }
.dos-img { position: relative; width: 78%; aspect-ratio: 5 / 7; border-radius: 5%; background: center / 100% 100% no-repeat; box-shadow: 0 6px 14px rgba(0,0,0,.45); overflow: hidden; }
.dos-offre .dos-img::after, .dos-voile .dos-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,246,220,.45) 50%, transparent 65%); background-size: 250% 100%; animation: dos-reflet 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes dos-reflet { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.dos-img.dos-tictac { filter: sepia(.5) hue-rotate(-20deg) saturate(1.4); }
.dos-img.dos-fidele { filter: sepia(.7) saturate(2.2) hue-rotate(-12deg) brightness(1.08); }
.dos-choix { display: flex; gap: 6px; margin-bottom: 10px; }
.dos-choix button { flex: 1; padding: 8px 4px; border-radius: 10px; border: 1px solid #b89a5e; background: linear-gradient(#fbf3e0, #efe1bf); font: inherit; font-size: .9rem; color: var(--encre); }
.dos-choix button.actif { background: linear-gradient(#ee9a3e, #c8701f); border-color: #f3d6a0; color: #fff6ea; }
.dos-emplacements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dos-emplacements .emplacement { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .7rem; color: var(--encre-2); text-align: center; }
.dos-emplacements .dos-img { width: 100%; box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.dos-emplacements .touchable .dos-img { outline: 1.5px dashed rgba(200,112,31,.7); outline-offset: 2px; }
.dos-emplacements .icone { width: 16px; height: 16px; }
.dos-note { margin: 8px 2px 0; font-size: .8rem; color: var(--encre-2); font-style: italic; line-height: 1.25; }
/* align-items : sans lui, les cartes s'étiraient à la hauteur de la rangée (Mika, 27 sept. 2026 : « trop étirées ») */
.dos-main { display: flex; justify-content: center; align-items: flex-end; margin-top: 14px; height: 118px; padding-top: 6px; }
.dos-main span { flex: none; width: 72px; height: auto; margin: 0 -9px; aspect-ratio: 5 / 7; border-radius: 4px; background: center / 100% 100%; box-shadow: 0 4px 10px rgba(0,0,0,.55); transform-origin: 50% 140%; }
.dos-main span.dos-tictac { filter: sepia(.5) hue-rotate(-20deg) saturate(1.4); }
.dos-main span.dos-fidele { filter: sepia(.7) saturate(2.2) hue-rotate(-12deg) brightness(1.08); }
.dos-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-offre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.dos-offre b { margin-top: 5px; font-size: .95rem; line-height: 1.1; }
.dos-offre small { font-size: .75rem; color: var(--encre-2); line-height: 1.15; min-height: 2.3em; }
.dos-offre .prix { margin-top: 3px; padding: 5px 14px; border-radius: 10px; border: 1px solid #b89a5e; background: linear-gradient(#fbf3e0, #efe1bf); font: 600 .92rem inherit; font-family: inherit; color: var(--encre); }
.dos-offre .prix.or, .dos-lot .prix.or { background: linear-gradient(#ee9a3e, #c8701f); border: 1px solid #f3d6a0; color: #fff6ea; padding: 5px 14px; border-radius: 10px; font: inherit; font-weight: 600; }
.dos-offre .prix.porte { background: linear-gradient(#d9ecc9, #b9d69e); border-color: #7fa25a; }
.dos-offre .prix.gagne { background: transparent; border-style: dashed; color: var(--encre-2); font-weight: 400; font-style: italic; }
.dos-gain { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dos-gain em { font-size: .72rem; color: var(--encre-2); }
.dos-gain .essayer { padding: 3px 10px; border-radius: 9px; border: 1px dashed #b89a5e; background: transparent; font: inherit; font-size: .75rem; color: var(--encre); }
.dos-gain .essayer:disabled { opacity: .55; }
.dos-lot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; border: 1px dashed #b89a5e; background: rgba(255,250,236,.55); }
.dos-lot .eventail { position: relative; width: 70px; height: 62px; flex: none; }
.dos-lot .eventail span { position: absolute; bottom: 0; left: 18px; width: 34px; aspect-ratio: 5 / 7; border-radius: 2px; background: center / 100% 100%; box-shadow: 0 2px 5px rgba(0,0,0,.5); transform-origin: 50% 100%; }
.dos-lot div { flex: 1; display: flex; flex-direction: column; }
.dos-lot small { color: var(--encre-2); font-size: .75rem; }
.dos-regle { margin: 14px 0 20px; padding: 10px 12px; border-radius: 12px; background: rgba(20,16,26,.82); border: 1px solid #8a6d3b; color: #efe4cc; font-size: .85rem; line-height: 1.35; }
.dos-regle > b, .dos-regle li b { color: #f3d6a0; }
.dos-regle ul { margin: 6px 0 0; padding-left: 18px; }
.dos-voile { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(12,10,16,.9); }
.dos-voile .dos-img.grand { width: 70vw; max-width: 340px; animation: dos-pivoter 6s ease-in-out infinite alternate; }
@keyframes dos-pivoter { from { transform: perspective(800px) rotateY(-9deg) rotateX(3deg); } to { transform: perspective(800px) rotateY(9deg) rotateX(-3deg); } }
.dos-voile > b { color: #efe4cc; font-size: 1.2rem; letter-spacing: .05em; }
.dos-voile > small { color: #d8c49a; font-style: italic; }
/* dans la collection de la boutique : la carte qui y mène */
.cosme.plus-de-dos { cursor: pointer; }
.eventail-dos { position: relative; height: 96px; width: 100%; }
.eventail-dos span { position: absolute; bottom: 4px; left: 50%; margin-left: -28px; width: 56px; aspect-ratio: 5 / 7; border-radius: 3px; background: center / 100% 100%; box-shadow: 0 3px 8px rgba(0,0,0,.5); transform-origin: 50% 110%; }
/* le dos en grand : la carte tient dans la hauteur (nom et bouton compris), le bouton garde sa taille — sur le S24 il
 * s'étirait sur toute la hauteur restante et la carte passait sous le bandeau (Mika, 28 sept. 2026) */
.dos-voile { padding: calc(var(--sur, 0px) + 16px) 16px calc(var(--sous, 0px) + 16px); box-sizing: border-box; gap: 10px; }
.dos-voile .dos-img.grand { flex: none; width: min(70vw, 340px, calc((100svh - 230px) * 5 / 7)); height: auto; }
.dos-voile > button { flex: none; width: auto; min-width: 160px; height: auto; padding: 10px 28px; }
.dos-voile, .dos-voile * { -moz-text-size-adjust: none; text-size-adjust: none; }
/* le Pass lisible (29 sept. 2026) : ce que chaque case donne, et comment on avance */
.pass-palier button small { font-size: .62rem; white-space: nowrap; }
.pass-regle { margin-top: 8px; padding: 10px 12px; font-size: .84rem; line-height: 1.35; color: var(--encre); }
.pass-regle > b { display: block; margin-bottom: 4px; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #7a5a2c; }
.pass-regle p { margin: 4px 0; }
.pass-regle ul { margin: 4px 0 6px; padding-left: 18px; }
.pass-regle li b { color: #9a4f14; }
.detail-pass { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.detail-pass .icone { width: 34px; height: 34px; }
.boutique h2 .aide { margin-left: 8px; }
#confirmer-contenu .pass-regle { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }