/* store.fistgames.fr : la mise en page du site. Aucune couleur ici : seulement les variables de la charte verre (public/charte/verre.css,
   générée depuis docs/design/charte.json). Reprise de la maquette v2 (docs/boutique/maquette). */
:root { color-scheme: dark; }
body { background: var(--v-voile); color: var(--v-texte); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 80; background: var(--v-voile); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.dedans { --gout: clamp(16px, 4vw, var(--v-marge)); }

.dedans { max-width: calc(1180 * var(--v-u)); margin: 0 auto; padding-left: max(var(--gout), env(safe-area-inset-left, 0px)); padding-right: max(var(--gout), env(safe-area-inset-right, 0px)); }

/* --- En-tête du site et de FistAdmin --- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--v-voile-calque); -webkit-backdrop-filter: blur(var(--v-flou)); backdrop-filter: blur(var(--v-flou));
  box-shadow: inset 0 calc(-1 * var(--v-lisere)) 0 var(--v-separateur); }
.entete .dedans, .entete .admin__dedans { display: grid; align-items: center; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "marque titre onglets actions";
  column-gap: var(--v-ecart); row-gap: calc(10 * var(--v-u-entre)); padding-block: calc(12 * var(--v-u-dedans)); }
.zone-marque { grid-area: marque; display: flex; }
.zone-marque .v-marque { width: calc(32 * var(--v-u)); height: calc(32 * var(--v-u)); }
.zone-titre { grid-area: titre; display: flex; align-items: center; gap: calc(10 * var(--v-u-entre)); min-width: 0; }
.zone-titre .v-titre { font-size: calc(19 * var(--v-u)); white-space: nowrap; }
.puce-titre { height: calc(20 * var(--v-u)); padding: 0 calc(8 * var(--v-u-dedans)); font: var(--v-poids-etiquette) var(--v-t-etiquette)/1 var(--v-police-etiquette); text-transform: uppercase; }
.zone-onglets { grid-area: onglets; justify-self: center; min-width: 0; max-width: 100%; display: flex; }
.zone-actions { grid-area: actions; display: flex; align-items: center; gap: calc(8 * var(--v-u-entre)); }
.bouton-panier { position: relative; }
/* Le nombre d'articles : une pastille crème (le rouge est gardé pour « une page attend ») */
.nb-panier { position: absolute; top: calc(-4 * var(--v-u)); right: calc(-4 * var(--v-u)); display: inline-grid; place-items: center; min-width: calc(18 * var(--v-u)); height: calc(18 * var(--v-u));
  padding: 0 calc(5 * var(--v-u)); border-radius: 999px; background: var(--v-bouton-principal-fond); color: var(--v-bouton-principal-texte); font: var(--v-poids-appui) var(--v-t-etiquette)/1 var(--v-police-appui); font-variant-numeric: tabular-nums; }
.moi { display: inline-flex; align-items: center; gap: calc(8 * var(--v-u-entre)); padding: 0 calc(12 * var(--v-u-dedans)) 0 calc(4 * var(--v-u)); }
.moi .v-avatar { width: calc(28 * var(--v-u)); height: calc(28 * var(--v-u)); }
.steam-court { display: none; }

/* --- La scène du site --- */
.scene { display: grid; gap: calc(28 * var(--v-u-entre)); padding-block: calc(24 * var(--v-u-dedans)) calc(48 * var(--v-u-dedans)); }
.grand-titre { font: var(--v-poids-appui) calc(30 * var(--v-u))/1.1 var(--v-police-appui); color: var(--v-texte-fort); text-wrap: balance; }
.tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: calc(8 * var(--v-u-entre)) var(--v-ecart); }
.tete > div { display: grid; gap: calc(6 * var(--v-u-entre)); }
.paragraphes { display: grid; gap: calc(8 * var(--v-u-entre)); max-width: 68ch; }
.paragraphes .v-texte { color: var(--v-texte-attenue); text-wrap: pretty; }
.carte-pile { display: grid; gap: calc(14 * var(--v-u-entre)); }
.boutons { display: flex; flex-wrap: wrap; gap: calc(8 * var(--v-u-entre)); }

/* === Les blocs === */
.bloc { position: relative; }
/* Bannière : le grand titre, le statut en direct, les boutons ; une image derrière, la mascotte à droite */
.b-banniere { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--v-ecart); min-height: calc(380 * var(--v-u)); padding: calc(36 * var(--v-u-dedans)); overflow: hidden; isolation: isolate; }
.b-banniere--compacte { min-height: 0; padding: calc(26 * var(--v-u-dedans)); align-items: center; }
.b-banniere__fond { position: absolute; inset: 0; z-index: -1; }
.b-banniere__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-banniere__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--v-voile-calque) 35%, transparent); }
.b-banniere__texte { display: grid; gap: calc(14 * var(--v-u-entre)); max-width: calc(560 * var(--v-u)); }
.b-banniere h1 { font: var(--v-poids-appui) calc(64 * var(--v-u))/0.95 var(--v-police-appui); color: var(--v-texte-fort); text-wrap: balance; }
.b-banniere--compacte h1 { font-size: calc(34 * var(--v-u)); line-height: 1.05; }
.b-banniere--centre { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.b-banniere--centre .b-banniere__texte { justify-items: center; }
.b-banniere--centre .boutons { justify-content: center; }
.b-banniere__mascotte { align-self: end; width: calc(300 * var(--v-u)); max-width: 100%; margin: 0 calc(-12 * var(--v-u)) calc(-36 * var(--v-u-dedans)) 0; }
.b-banniere--centre .b-banniere__mascotte { display: none; }
.statut { display: inline-flex; align-items: center; gap: calc(8 * var(--v-u-entre)); justify-self: start; }
.b-banniere--centre .statut { justify-self: center; }
.adresse { display: inline-flex; align-items: center; gap: calc(8 * var(--v-u-entre)); padding: calc(6 * var(--v-u-dedans)) calc(6 * var(--v-u-dedans)) calc(6 * var(--v-u-dedans)) calc(12 * var(--v-u-dedans)); border-radius: 999px; background: var(--v-puits); font: var(--v-poids-etiquette) var(--v-t-petit)/1 var(--v-police-etiquette); color: var(--v-texte-attenue); justify-self: start; max-width: 100%; }
.adresse code { font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.b-banniere--centre .adresse { justify-self: center; }
/* Infos : les chiffres du serveur sur une ligne */
.b-infos { display: grid; gap: calc(14 * var(--v-u-entre)); }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(140 * var(--v-u)), 1fr)); gap: calc(8 * var(--v-u-entre)); }
.info { display: grid; gap: calc(6 * var(--v-u-entre)); padding: calc(12 * var(--v-u-dedans)) calc(14 * var(--v-u-dedans)); border-radius: var(--v-rayon-case); background: var(--v-puits); }
.info .v-montant { font-size: calc(20 * var(--v-u)); }
/* Plugins : la tuile de chaque plugin fait maison */
.plugins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-ecart); }
.plugin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(4 * var(--v-u-entre)) calc(12 * var(--v-u-entre)); align-items: start; padding: calc(14 * var(--v-u-dedans)); }
.plugin .v-logo { grid-row: span 2; width: calc(40 * var(--v-u)); height: calc(40 * var(--v-u)); }
.plugin .v-petit { color: var(--v-texte-attenue); }
/* Texte et image */
.b-texte-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(28 * var(--v-u-entre)); }
.b-texte-image--droite > .media { order: 2; }
.b-texte-image .paragraphes { gap: calc(12 * var(--v-u-entre)); }
.media { border-radius: var(--v-rayon-carte); overflow: hidden; background: var(--v-puits); aspect-ratio: 4 / 3; max-width: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--vide { display: grid; place-items: center; color: var(--v-texte-faible); }
.sans-fond { padding: 0; background: none; border: 0; }
/* Compte à rebours du wipe */
.b-wipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ecart) calc(28 * var(--v-u-entre)); padding: calc(24 * var(--v-u-dedans)); }
.b-wipe .v-minuteur { font-size: calc(46 * var(--v-u)); }
.b-wipe__date { display: grid; gap: calc(6 * var(--v-u-entre)); }
/* Les grades */
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v-ecart); }
.grade { display: grid; grid-template-rows: auto 1fr auto; gap: calc(12 * var(--v-u-entre)); padding: calc(12 * var(--v-u-dedans)); }
.grade__image { position: relative; display: block; padding: 0; border: 0; border-radius: var(--v-rayon-case); overflow: hidden; background: var(--v-puits); cursor: pointer; aspect-ratio: 1; max-width: 100%; }
.grade__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--v-fondu); }
.grade__image:hover img { transform: scale(1.03); }
.grade__image .v-puce { position: absolute; top: calc(10 * var(--v-u)); left: calc(10 * var(--v-u)); background: var(--v-verre-sur-jeu); -webkit-backdrop-filter: blur(var(--v-flou)); backdrop-filter: blur(var(--v-flou)); }
.grade__corps { display: grid; align-content: start; gap: calc(6 * var(--v-u-entre)); padding-inline: calc(4 * var(--v-u-dedans)); }
.grade__nom { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--v-u-entre)); }
.grade__nom .v-nom { display: inline-flex; align-items: center; gap: calc(8 * var(--v-u-entre)); }
.grade__corps .v-petit { color: var(--v-texte-attenue); }
.grade__pied { display: flex; padding: 0 calc(4 * var(--v-u-dedans)) calc(4 * var(--v-u-dedans)); }
.grade__pied .v-bouton { flex: 1; }
.v-puce-couleur { width: calc(10 * var(--v-u)); height: calc(10 * var(--v-u)); flex: none; }
/* Discord */
.b-discord { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-ecart); padding: calc(22 * var(--v-u-dedans)); }
.b-discord > div { display: grid; gap: calc(6 * var(--v-u-entre)); max-width: 60ch; }
.b-discord .v-texte { color: var(--v-texte-attenue); }
/* Questions */
.questions { display: grid; }
.questions details { box-shadow: inset 0 calc(-1 * var(--v-lisere)) 0 var(--v-separateur); }
.questions details:last-child { box-shadow: none; }
.questions summary { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--v-u-entre)); min-height: var(--v-hauteur-ligne); padding: calc(8 * var(--v-u-dedans)) calc(4 * var(--v-u-dedans)); cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary .v-icone { transition: transform var(--v-fondu); color: var(--v-texte-attenue); }
.questions details[open] summary .v-icone { transform: rotate(90deg); }
.questions details > p { padding: 0 calc(4 * var(--v-u-dedans)) calc(14 * var(--v-u-dedans)); color: var(--v-texte-attenue); max-width: 70ch; }
/* Image seule */
.b-image { display: grid; gap: calc(8 * var(--v-u-entre)); }
.b-image .media { aspect-ratio: 21 / 9; }

/* --- La fiche d'un grade --- */
.fiche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--v-ecart); align-items: start; }
.galerie { display: grid; gap: calc(10 * var(--v-u-entre)); padding: calc(10 * var(--v-u-dedans)); }
.galerie__grande { border-radius: var(--v-rayon-case); overflow: hidden; background: var(--v-puits); aspect-ratio: 16 / 9; max-width: 100%; }
.galerie__grande img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galerie__miniatures { display: flex; flex-wrap: wrap; gap: calc(8 * var(--v-u-entre)); }
.miniature { width: calc(76 * var(--v-u)); aspect-ratio: 1; padding: 0; border: var(--v-lisere) solid transparent; border-radius: var(--v-rayon-case); overflow: hidden; background: var(--v-puits); cursor: pointer; transition: border-color var(--v-fondu); }
.miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniature[aria-pressed="true"] { border-color: var(--v-texte-fort); }
.achat { display: grid; gap: calc(14 * var(--v-u-entre)); padding: calc(20 * var(--v-u-dedans)); position: sticky; top: calc(84 * var(--v-u)); }
.achat__titre { display: flex; align-items: center; gap: calc(10 * var(--v-u-entre)); }
.achat__prix { font: var(--v-poids-appui) calc(40 * var(--v-u))/1 var(--v-police-appui); color: var(--v-texte-fort); font-variant-numeric: tabular-nums; }
.achat__duree { display: flex; align-items: center; gap: calc(10 * var(--v-u-entre)); padding: calc(10 * var(--v-u-dedans)) calc(12 * var(--v-u-dedans)); border-radius: var(--v-rayon-ligne); background: var(--v-puits); }
.achat__duree .v-icone { color: var(--v-texte-attenue); }
.recu { display: grid; gap: calc(8 * var(--v-u-entre)); }
.recu li { display: grid; grid-template-columns: auto 1fr; gap: calc(10 * var(--v-u-entre)); align-items: start; }
.recu .v-icone { color: var(--v-succes); margin-top: calc(2 * var(--v-u)); }
.achat .v-bouton { width: 100%; }
.centre { text-align: center; }

/* --- Mes achats, merci, annulé --- */
.achats { display: grid; gap: var(--v-ecart); grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
.vignette-ligne { width: var(--v-avatar); height: var(--v-avatar); border-radius: calc(8 * var(--v-u)); object-fit: cover; flex: none; }
.droite-pile { display: grid; justify-items: end; gap: calc(4 * var(--v-u-entre)); }
.retour { display: grid; justify-items: center; text-align: center; gap: calc(14 * var(--v-u-entre)); width: 100%; max-width: calc(520 * var(--v-u)); margin: calc(30 * var(--v-u-entre)) auto 0; padding: calc(30 * var(--v-u-dedans)) calc(24 * var(--v-u-dedans)); }
.retour .v-texte { color: var(--v-texte-attenue); text-wrap: pretty; }
.rond-ton { display: inline-grid; place-items: center; width: calc(64 * var(--v-u)); height: calc(64 * var(--v-u)); border-radius: 50%; }
.rond-ton .v-icone { width: calc(30 * var(--v-u)); height: calc(30 * var(--v-u)); }
.rond-ton--succes { background: color-mix(in srgb, var(--v-succes) 18%, transparent); color: var(--v-succes); }
.rond-ton--neutre { background: var(--v-secondaire); color: var(--v-texte-fort); }
.recap { width: 100%; text-align: left; }

/* --- Le pied : les liens légaux de PayNow sur chaque page --- */
.pied-page { box-shadow: inset 0 var(--v-lisere) 0 var(--v-separateur); }
.pied-page .dedans { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--v-u-entre)) var(--v-ecart); padding-block: calc(18 * var(--v-u-dedans)) calc(22 * var(--v-u-dedans) + env(safe-area-inset-bottom, 0px)); }
.pied-page p { display: flex; align-items: center; gap: calc(8 * var(--v-u-entre)); }
.pied-page .v-marque { width: calc(20 * var(--v-u)); height: calc(20 * var(--v-u)); }
.liens { display: flex; flex-wrap: wrap; gap: calc(4 * var(--v-u-entre)) calc(14 * var(--v-u-entre)); }
.liens a { color: var(--v-texte-attenue); text-decoration: none; font: var(--v-poids-texte) var(--v-t-petit)/1.6 var(--v-police-texte); }
.liens a:hover { color: var(--v-texte-fort); text-decoration: underline; }

@keyframes fondu { from { opacity: 0; } }

/* --- Étroit --- */
@media (max-width: 1000px) {
  .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche, .achats { grid-template-columns: minmax(0, 1fr); }
  .achat { position: static; }
  .b-banniere__mascotte { width: calc(220 * var(--v-u)); }
}
@media (max-width: 720px) {
  .entete .dedans { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marque titre actions" "onglets onglets onglets"; }
  .zone-onglets { justify-self: stretch; }
  .zone-onglets .v-onglets { width: 100%; }
  .zone-onglets .v-onglet { flex: 1; justify-content: center; }
  .steam-long, .moi__nom { display: none; }
  .steam-court { display: inline; }
  .moi { padding: 0 calc(4 * var(--v-u)); }
  .b-banniere { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: calc(22 * var(--v-u-dedans)); }
  .b-banniere h1 { font-size: calc(44 * var(--v-u)); }
  .b-banniere__mascotte { display: none; }
  .b-banniere__fond::after { background: var(--v-voile-calque); }
  .plugins { grid-template-columns: minmax(0, 1fr); gap: calc(8 * var(--v-u-entre)); }
  .b-texte-image { grid-template-columns: minmax(0, 1fr); gap: var(--v-ecart); }
  .b-texte-image--droite > .media { order: 0; }
  .grades { grid-template-columns: minmax(0, 1fr); }
  .grade { grid-template-columns: calc(108 * var(--v-u)) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; }
  .grade__image { grid-row: span 2; }
  .grade__image .v-puce { display: none; }
  .grade__corps, .grade__pied { padding: 0; }
  .tiroir { top: auto; left: 0; width: 100%; max-height: 88%; border-radius: var(--v-rayon-carte) var(--v-rayon-carte) 0 0; border-bottom: 0; border-right: var(--v-lisere) solid var(--v-verre-lisere); }
  .pied-page .dedans { justify-content: flex-start; }
  .grand-titre { font-size: calc(26 * var(--v-u)); }
}

/* --- Ajouts du vrai site --- */
a.v-bouton, a.v-onglet, .zone-marque { text-decoration: none; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1; width: 100%; }
.b-texte-image--verre, .b-texte--verre { padding: calc(22 * var(--v-u-dedans)); }
.b-wipe__compte { justify-items: end; text-align: right; }
.vide { display: grid; justify-items: start; gap: calc(10 * var(--v-u-entre)); padding: calc(18 * var(--v-u-dedans)); color: var(--v-texte-attenue); }
.alerte { padding: calc(12 * var(--v-u-dedans)) calc(14 * var(--v-u-dedans)); color: var(--v-texte-fort); box-shadow: inset 0 0 0 var(--v-lisere) var(--v-bouton-danger-discret-lisere); }
.achat form { display: grid; }
.description { display: grid; gap: calc(8 * var(--v-u-entre)); padding-top: calc(14 * var(--v-u-dedans)); box-shadow: inset 0 var(--v-lisere) 0 var(--v-separateur); }
.description h3 { font: var(--v-poids-appui) calc(18 * var(--v-u))/1.2 var(--v-police-appui); color: var(--v-texte-fort); margin-top: calc(6 * var(--v-u-entre)); }
.description h4 { font: var(--v-poids-etiquette) var(--v-t-etiquette)/1.3 var(--v-police-etiquette); text-transform: uppercase; letter-spacing: .04em; color: var(--v-texte-attenue); margin-top: calc(6 * var(--v-u-entre)); }
.description ul { display: grid; gap: calc(4 * var(--v-u-entre)); }
.description li { position: relative; padding-left: calc(16 * var(--v-u)); font: var(--v-poids-texte) var(--v-t-texte)/1.5 var(--v-police-texte); color: var(--v-texte); }
.description li::before { content: ""; position: absolute; left: calc(4 * var(--v-u)); top: .65em; width: calc(5 * var(--v-u)); height: calc(5 * var(--v-u)); border-radius: 50%; background: var(--v-texte-attenue); }
.description p { font: var(--v-poids-texte) var(--v-t-texte)/1.55 var(--v-police-texte); color: var(--v-texte-attenue); }
.retour .boutons { justify-content: center; }
.texte-long { display: grid; gap: calc(10 * var(--v-u-entre)); padding: calc(26 * var(--v-u-dedans)); max-width: calc(820 * var(--v-u)); }
.texte-long .v-titre { margin-top: calc(10 * var(--v-u-entre)); }
.texte-long .v-texte { color: var(--v-texte-attenue); max-width: 72ch; }
.texte-long a { color: var(--v-texte-fort); }
img.v-avatar { object-fit: cover; padding: 0; }
.copie-ok { color: var(--v-succes); }