/* =========================================================================
   Habillage commun — le style de /docs appliqué à toutes les pages.
   Chargé après store.css : il ne crée pas de nouvelles classes pour les
   pages existantes, il redessine leurs composants (bandes, cartes, étapes,
   liens, articles) en panneaux, comme la documentation.
   Les éléments remplis par les scripts (boutique, vote) gardent leurs
   classes : seul leur contenant change.
   ========================================================================= */

/* --- Les bandes deviennent des panneaux --- */
.wrap { max-width: 1160px; }
.wrap.narrow { max-width: 980px; }
.wrap > .band {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 30px 32px;
  margin: 28px 0;
  backdrop-filter: blur(10px);
}
.wrap > .band:last-child { border-bottom: 1px solid var(--edge); }
.wrap > .band:first-child { margin-top: 34px; }

/* Titres de section : un badge étoilé devant, comme les badges de /docs. */
.band .head { margin-bottom: 20px; }
.band .head h2,
.band .section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--title);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--crystal);
}
.band .head h2::before,
.band .section-title::before {
  content: '✦';
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--star);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(109, 92, 240, 0.38), rgba(140, 205, 255, 0.14));
  border: 1px solid var(--edge-hi);
}
.band .section-title { margin-bottom: 18px; }
.band .head .sub { margin: 8px 0 0 58px; color: var(--faint); font-size: 14px; }

/* --- Cartes --- */
.band .card.pad,
.band .link-card {
  background: rgba(8, 11, 40, 0.65);
  border: 1px solid var(--edge);
  border-radius: 16px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.band .card.pad:hover,
.band .link-card:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.band .card.pad .ico { font-size: 28px; }
.band .cards { gap: 14px; }

/* --- Étapes : une grille de cartes numérotées --- */
.band .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.band .step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(8, 11, 40, 0.65);
  border: 1px solid var(--edge);
}
.band .step code { background: rgba(255, 217, 122, 0.08); padding: 1px 6px; border-radius: 6px; }
.band .step em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: #ff9ab4; }

/* --- Encarts --- */
.callout { border-left-width: 1px; border: 1px solid rgba(140, 205, 255, 0.22); border-radius: 14px; }
.callout.warn { border-color: rgba(255, 122, 156, 0.3); }
.callout.note { border-color: rgba(255, 217, 122, 0.3); }

/* --- Articles de texte (règlement, CGU, confidentialité, manuel) --- */
.wrap.narrow > article:not(.card),
.doc section {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 28px 32px !important;
  margin: 22px 0;
  backdrop-filter: blur(10px);
}
.wrap.narrow > article:not(.card) h2 { border-bottom: 0 !important; padding-bottom: 0 !important; }
.card.pad.legal { border-radius: 22px; }
.toc { border-radius: 18px; }
.pact { border-color: var(--edge-hi); }

/* --- Boutique : colonne de catégories, accueil, paliers --- */
.shell .side nav.card { border-radius: 18px; border-color: var(--edge); background: var(--panel); }
.shell .menu > a.on { background: linear-gradient(140deg, rgba(109, 92, 240, 0.38), rgba(140, 205, 255, 0.14)); border: 1px solid var(--edge-hi); color: var(--crystal); }
.shell main { display: flex; flex-direction: column; gap: 24px; }
.shell main > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* L'accueil : un bandeau dégradé, puis les trois rubriques en cartes. */
.shell .welcome {
  border-radius: 22px;
  border: 1px solid var(--edge-hi);
  background: linear-gradient(150deg, rgba(109, 92, 240, 0.26), rgba(8, 11, 40, 0.75) 55%);
  box-shadow: 0 20px 60px rgba(40, 30, 140, 0.3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.shell .welcome .over,
.shell .welcome h1 { grid-column: 1 / -1; }
.shell .welcome h1 { margin-bottom: 6px; }
.shell .welcome section {
  margin: 0 !important;
  padding: 18px;
  border-radius: 16px;
  background: rgba(8, 11, 40, 0.65);
  border: 1px solid var(--edge);
}
.shell .welcome section h3 { color: var(--star); }
.shell .welcome p { font-size: 13.5px; line-height: 1.6; }

/* Titre « Gemmes » : le même badge que les sections du site. */
.shell .section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--title);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--crystal);
}
.shell .section-title::before {
  content: '💎';
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 20px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(109, 92, 240, 0.38), rgba(140, 205, 255, 0.14));
  border: 1px solid var(--edge-hi);
}

/* Avertissement de vente : un encart doré. */
.shell .buy-notice { border-radius: 14px; background: rgba(255, 217, 122, 0.07); border: 1px solid rgba(255, 217, 122, 0.3); }

/* Paliers de gemmes et carte de maintenance. */
.shell .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.shell .pack { border-radius: 18px; }
.shell .grid > .card.pad { grid-column: 1 / -1; border-radius: 16px; background: rgba(255, 154, 180, 0.08); border: 1px solid rgba(255, 154, 180, 0.3); }
.shell .goal { border-radius: 22px; border-color: var(--edge-hi); }
/* Un bloc masqué (objectif sans données) reste masqué, quel que soit son display. */
.shell [hidden] { display: none !important; }

/* --- Pastille « en développement » --- */
.state.dev { background: rgba(255, 154, 180, 0.12); color: #ff9ab4; border: 1px solid rgba(255, 154, 180, 0.4); }

@media (max-width: 760px) {
  .wrap > .band,
  .wrap.narrow > article:not(.card),
  .doc section { padding: 22px 18px !important; border-radius: 18px; }
  .band .head .sub { margin-left: 0; }
}