/* ==================================================================
   Thème Pokéfrance
   Rupture volontaire avec la mise en forme héritée de Cobblemoon :
   angles nets au lieu des grands arrondis, bordures franches au lieu
   des filets translucides, ombres portées dures au lieu des halos,
   fond quadrillé au lieu du ciel étoilé, et un filet tricolore comme
   motif récurrent. Cette feuille est chargée après style.css.
   ================================================================== */

:root {
  --pf-radius: 3px;
  --pf-border: 2px solid rgba(245, 197, 66, .26);
  --pf-border-strong: 2px solid var(--cm-gold);
  --pf-hard: 5px 5px 0 rgba(0, 0, 0, .55);
  --pf-hard-sm: 3px 3px 0 rgba(0, 0, 0, .5);
  --pf-bleu: #2b4fa8;
  --pf-rouge: #e63946;
}

/* --- fond : quadrillage discret, plus de dégradés cosmiques --- */
body,
.cm-site,
.cm-story,
.cm-main {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px),
    var(--cm-night);
}

.cm-hero-transition,
.cm-art-moon {
  display: none;
}

/* --- filet tricolore, motif signature --- */
.pf-tricolore {
  display: block;
  width: 84px;
  height: 5px;
  background: linear-gradient(90deg,
    var(--pf-bleu) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--pf-rouge) 66.66% 100%);
}

/* --- en-tête : barre pleine largeur, plus de pilule flottante --- */
.cm-header {
  position: sticky;
  top: 0;
  padding: 0;
  border-bottom: 2px solid rgba(245, 197, 66, .3);
  background: rgba(13, 10, 30, .96);
  backdrop-filter: blur(6px);
}

.cm-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.cm-desktop-nav a {
  border-radius: 0;
  border-bottom: 3px solid transparent;
  padding: 20px 14px;
  background: none !important;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cm-desktop-nav a:hover {
  border-bottom-color: rgba(245, 197, 66, .5);
  color: var(--cm-white);
}

.cm-desktop-nav a.active {
  border-bottom-color: var(--cm-gold);
  color: var(--cm-gold);
}

.cm-store-link,
.cart-details > .cart,
.cm-menu-toggle {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  box-shadow: none;
}

.cm-store-link {
  background: linear-gradient(135deg, var(--cm-gold), var(--cm-amber));
  color: var(--cm-night) !important;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- boutons : rectangulaires, ombre dure, effet d'enfoncement --- */
.pf-btn,
.cm-button,
.cm-site .custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--pf-radius);
  font-family: var(--cm-body);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.pf-btn-primary,
.cm-button-primary,
.cm-site .custom-button {
  border-color: #ffe9b0;
  background: linear-gradient(135deg, var(--cm-gold), var(--cm-amber));
  box-shadow: var(--pf-hard);
  color: var(--cm-night) !important;
}

.pf-btn-primary:hover,
.cm-button-primary:hover,
.cm-site .custom-button:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--pf-hard-sm);
}

.pf-btn-ghost,
.cm-button-secondary {
  border-color: rgba(245, 197, 66, .45);
  background: transparent;
  box-shadow: var(--pf-hard);
  color: var(--cm-white) !important;
}

.pf-btn-ghost:hover,
.cm-button-secondary:hover {
  border-color: var(--cm-gold);
  background: rgba(245, 197, 66, .1);
  transform: translate(2px, 2px);
  box-shadow: var(--pf-hard-sm);
}

/* --- hero en deux colonnes --- */
.pf-hero {
  padding: 132px 0 76px;
  border-bottom: 2px solid rgba(245, 197, 66, .18);
  background:
    radial-gradient(circle at 82% 18%, rgba(245, 138, 61, .16), transparent 46%),
    radial-gradient(circle at 12% 84%, rgba(43, 79, 168, .2), transparent 52%);
}

.pf-hero-grid {
  display: grid;
  align-items: center;
  gap: 54px;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
}

@media screen and (max-width: 900px) {
  .pf-hero {
    padding: 116px 0 56px;
  }

  .pf-hero-grid {
    gap: 34px;
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-eyebrow {
  margin: 0 0 20px;
  color: var(--cm-gold);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pf-hero-logo {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 0 24px;
}

.pf-hero-lede {
  max-width: 460px;
  margin: 0 0 30px;
  color: var(--cm-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.pf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --- fiche serveur --- */
.pf-server-card {
  position: relative;
  padding: 26px 26px 30px;
  border: var(--pf-border-strong);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-server-head {
  margin: 0 0 18px;
  color: var(--cm-gold);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pf-facts {
  margin: 0 0 22px;
}

.pf-fact {
  padding: 11px 0;
  border-top: 1px solid rgba(245, 197, 66, .16);
}

.pf-fact:first-child {
  border-top: 0;
  padding-top: 0;
}

.pf-fact dt {
  margin: 0 0 3px;
  color: var(--cm-muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pf-fact dd {
  margin: 0;
  color: var(--cm-white);
  font-size: .95rem;
  font-weight: 700;
}

.pf-fact code {
  font-size: .95rem;
}

.pf-online {
  color: var(--cm-gold);
}

/* --- section en trois cartes égales --- */
.pf-features {
  padding: 84px 0 90px;
}

.pf-section-head {
  margin: 0 0 40px;
}

.pf-section-head h2 {
  margin: 18px 0 0;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.pf-feature-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.pf-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 24px 26px;
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-feature-art {
  display: grid;
  height: 196px;
  margin: 0 -24px 20px;
  border-bottom: 2px solid rgba(245, 197, 66, .2);
  background: linear-gradient(160deg, rgba(245, 197, 66, .14), rgba(43, 79, 168, .18));
  overflow: hidden;
  place-items: center;
}

.pf-feature-art img {
  width: auto;
  max-width: 88%;
  height: 158px;
  object-fit: contain;
}

.pf-feature-num {
  color: var(--cm-gold);
  font-family: var(--cm-heading);
  font-size: .82rem;
  letter-spacing: .14em;
}

.pf-feature h3 {
  margin: 8px 0 10px;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: 1.18rem;
  text-transform: uppercase;
}

.pf-feature p {
  flex: 1;
  margin: 0 0 18px;
  color: var(--cm-muted);
  font-size: .89rem;
  line-height: 1.65;
}

.pf-link {
  align-self: flex-start;
  border-bottom: 2px solid var(--cm-gold);
  padding-bottom: 3px;
  color: var(--cm-gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.pf-link:hover {
  border-bottom-color: var(--cm-white);
  color: var(--cm-white);
}

/* --- pied de page, entièrement refait --- */
.pf-footer {
  padding: 0 0 34px;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg,
    var(--pf-bleu) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--pf-rouge) 66.66% 100%) 1;
  background: #0a0817;
}

.pf-footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 46px 0 44px;
  padding: 26px 30px;
  border: var(--pf-border-strong);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-footer-cta .pf-eyebrow {
  margin-bottom: 8px;
}

.pf-footer-ip {
  margin: 0;
}

.pf-footer-ip code {
  padding: 6px 14px;
  color: var(--cm-white);
  font-size: 1.18rem;
  font-weight: 700;
}

.pf-footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pf-footer-cols {
  display: grid;
  gap: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(245, 197, 66, .16);
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 760px) {
  .pf-footer-cols {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-footer-cta {
    padding: 22px;
  }
}

.pf-footer-brand img {
  display: block;
  width: 168px;
  height: auto;
  margin-bottom: 16px;
}

.pf-footer-brand p {
  max-width: 340px;
  margin: 0;
  color: var(--cm-muted);
  font-size: .85rem;
  line-height: 1.65;
}

.pf-footer-col h2 {
  margin: 0 0 14px;
  color: var(--cm-gold);
  font-family: var(--cm-body);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-footer-col a {
  display: block;
  margin-bottom: 9px;
  color: var(--cm-muted);
  font-size: .86rem;
  text-decoration: none;
}

.pf-footer-col a:hover {
  color: var(--cm-gold);
}

.pf-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  color: #8f88a6;
  font-size: .76rem;
}

/* Le logo Discord est une tuile carrée opaque, pas un personnage détouré. */
.pf-art-tile {
  width: 134px !important;
  max-width: none !important;
  height: 134px !important;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: var(--pf-radius);
}

/* --- cartes et panneaux des autres pages --- */
.cm-platform-card,
.cm-manual-card,
.cm-connect-panel,
.custom-card,
.pf-wiki-nav,
.pf-card,
.pf-table,
.cm-experience-card {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.cm-platform-card:hover,
.cm-manual-card:hover,
.pf-card:hover {
  border-color: var(--cm-gold);
  transform: translate(2px, 2px);
  box-shadow: var(--pf-hard-sm);
}

.cm-section-heading h2,
.title-container h1,
.pf-wiki-head h1 {
  text-transform: uppercase;
}

.cm-section-heading::before {
  display: block;
  width: 84px;
  height: 5px;
  margin: 0 0 18px;
  background: linear-gradient(90deg,
    var(--pf-bleu) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--pf-rouge) 66.66% 100%);
  content: "";
}

/* Le titre de page avait déjà un soulignement : on le passe en tricolore
   plutôt que d'ajouter un second filet au-dessus. */
.cm-site .title-container h1::after {
  width: 84px;
  height: 5px;
  background: linear-gradient(90deg,
    var(--pf-bleu) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--pf-rouge) 66.66% 100%);
}

/* --- champs de formulaire --- */
.custom-input,
.custom-input-group input {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: rgba(0, 0, 0, .3);
  color: var(--cm-white);
}

.custom-input:focus {
  border-color: var(--cm-gold);
  outline: none;
}

/* --- wiki : aligné sur le nouveau langage --- */
.pf-wiki-head {
  border-bottom: 2px solid rgba(245, 197, 66, .26);
  background: radial-gradient(circle at 12% 0%, rgba(43, 79, 168, .24), transparent 55%);
}

.pf-note {
  border-radius: 0 var(--pf-radius) var(--pf-radius) 0;
}

/* --- ajustements de finition --- */
/* Le logo remplissait toute la hauteur de la barre : on l'aère. */
.cm-desktop-nav a {
  padding-top: 25px;
  padding-bottom: 25px;
}

.cm-brand img {
  width: 116px !important;
}

@media screen and (max-width: 680px) {
  .cm-brand img {
    width: 104px !important;
  }
}

/* Le passage en majuscules avait fait tenir ce libellé sur deux lignes. */
.cm-footer-shop .cm-button {
  min-width: 200px;
  white-space: nowrap;
}

/* --- titres : même traitement sur toutes les pages --- */
.cm-section-heading h1,
.cm-section-heading h2,
.cm-manual-intro h2,
.cm-connect-panel h2,
.title-container h1,
.card-title {
  text-transform: uppercase;
}

.card-title {
  color: var(--cm-gold);
  font-family: var(--cm-body);
  font-size: .78rem;
  letter-spacing: .12em;
}

.cm-manual-intro::before {
  display: block;
  grid-column: 1 / -1;   /* le conteneur est une grille : sans ça le titre passait à droite */
  width: 84px;
  height: 5px;
  margin: 0 0 18px;
  background: linear-gradient(90deg,
    var(--pf-bleu) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--pf-rouge) 66.66% 100%);
  content: "";
}

/* --- menu mobile et panier --- */
.cm-mobile-panel,
.details-dropdown {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.cm-mobile-panel a {
  border-radius: var(--pf-radius);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- page Jouer : la carte Mac porte les deux architectures --- */
.pf-platform-multi {
  cursor: default;
}

.pf-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pf-choice a {
  padding: 7px 13px;
  border: 2px solid rgba(245, 197, 66, .4);
  border-radius: var(--pf-radius);
  color: var(--cm-gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .15s ease;
}

.pf-choice a:hover {
  background: rgba(245, 197, 66, .15);
  color: var(--cm-white);
}

/* ==================================================================
   Wiki — mise en page revue
   La première version était trop tassée : colonne de texte étroite,
   sections collées, cartes qui se cassaient en 3 + 1.
   ================================================================== */
.pf-wiki-head {
  padding: 62px 0 46px;
}

.pf-breadcrumb {
  display: flex;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--cm-muted);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pf-breadcrumb a {
  color: var(--cm-gold);
  text-decoration: none;
}

.pf-breadcrumb a:hover {
  text-decoration: underline;
}

.pf-wiki-head p {
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.75;
}

.pf-wiki-layout {
  gap: 60px;
  padding: 54px 0 110px;
  grid-template-columns: 272px minmax(0, 1fr);
}

.pf-wiki-nav {
  top: 104px;
  padding: 22px;
}

.pf-wiki-nav-title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 197, 66, .18);
  color: var(--cm-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-wiki-nav a {
  padding: 11px 14px;
  font-size: .88rem;
}

/* --- article : plus large et plus aéré --- */
.pf-article {
  max-width: 860px;
}

.pf-article h2 {
  margin: 58px 0 18px;
  padding-top: 26px;
  font-size: 1.55rem;
  text-transform: uppercase;
}

.pf-article h3 {
  margin: 34px 0 12px;
  font-size: 1.06rem;
}

.pf-article p,
.pf-article li {
  font-size: .96rem;
  line-height: 1.85;
}

.pf-article p {
  margin: 0 0 18px;
}

.pf-article ul,
.pf-article ol {
  margin-bottom: 24px;
}

.pf-article li {
  margin-bottom: 10px;
}

.pf-steps li {
  margin-bottom: 18px;
  padding-left: 54px;
}

.pf-steps li::before {
  top: 0;
  width: 36px;
  height: 36px;
  font-size: .88rem;
}

.pf-note {
  margin-bottom: 26px;
  padding: 18px 22px;
}

.pf-table th,
.pf-table td {
  padding: 14px 18px;
}

/* --- sommaire du wiki : deux colonnes de cartes + panneau latéral --- */
.pf-wiki-hub {
  display: grid;
  gap: 44px;
  padding: 54px 0 110px;
  align-items: start;
  grid-template-columns: minmax(0, 1.75fr) minmax(258px, 1fr);
}

.pf-cards {
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-card {
  display: flex;
  height: 100%;
  padding: 26px;
  flex-direction: column;
}

.pf-card-num {
  color: var(--cm-gold);
  font-family: var(--cm-heading);
  font-size: .8rem;
  letter-spacing: .14em;
}

.pf-card h2 {
  margin: 10px 0 12px;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: 1.22rem;
  text-transform: uppercase;
}

.pf-card p {
  flex: 1;
  margin: 0 0 20px;
  color: var(--cm-muted);
  font-size: .9rem;
  line-height: 1.7;
}

.pf-card-go {
  align-self: flex-start;
  border-bottom: 2px solid var(--cm-gold);
  padding-bottom: 3px;
  color: var(--cm-gold);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pf-wiki-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pf-aside-block {
  padding: 22px;
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-aside-title {
  margin: 0 0 14px;
  color: var(--cm-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-aside-ip {
  margin: 0 0 10px;
}

.pf-aside-ip code {
  padding: 6px 12px;
  color: var(--cm-white);
  font-size: 1rem;
  font-weight: 700;
}

.pf-aside-note {
  margin: 0;
  color: var(--cm-muted);
  font-size: .82rem;
  line-height: 1.6;
}

.pf-aside-list {
  margin: 0 0 12px;
}

.pf-aside-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(245, 197, 66, .14);
}

.pf-aside-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.pf-aside-list dt {
  color: var(--cm-muted);
  font-size: .82rem;
}

.pf-aside-list dd {
  margin: 0;
  color: var(--cm-white);
  font-size: .82rem;
  font-weight: 700;
}

@media screen and (max-width: 1040px) {
  .pf-wiki-hub {
    gap: 34px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 960px) {
  .pf-wiki-layout {
    gap: 30px;
    padding: 36px 0 80px;
  }
}

@media screen and (max-width: 620px) {
  .pf-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-article h2 {
    margin-top: 44px;
  }
}

/* ==================================================================
   Intégration Azuriom
   Azuriom rend ses propres vues — boutique, votes, connexion, profil —
   avec les composants Bootstrap 5. Ce bloc les habille aux couleurs du
   thème, pour qu'elles ne détonnent pas avec les pages du site.
   ================================================================== */

/* --- mise en page des pages internes --- */
.pf-page {
  padding: 54px 0 100px;
}

.pf-page-simple {
  padding: 54px 0 110px;
}

.pf-page-simple .pf-article {
  max-width: 860px;
}

.pf-user-menu {
  padding: 10px;
}

.pf-user-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--pf-radius);
  color: var(--cm-muted);
  font-size: .84rem;
  text-decoration: none;
}

.pf-user-menu a:hover {
  background: rgba(245, 197, 66, .1);
  color: var(--cm-white);
}

.pf-btn-sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: .74rem;
}

/* --- composants Bootstrap 5 utilisés par Azuriom --- */
.card {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
  color: var(--cm-white);
}

.card-title,
.card-header {
  color: var(--cm-gold);
  font-family: var(--cm-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.card-header,
.card-footer {
  border-color: rgba(245, 197, 66, .18);
  background: rgba(0, 0, 0, .2);
}

.btn {
  border-radius: var(--pf-radius);
  font-family: var(--cm-body);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.btn-primary,
.btn-success {
  border: 2px solid #ffe9b0;
  background: linear-gradient(135deg, var(--cm-gold), var(--cm-amber));
  box-shadow: var(--pf-hard-sm);
  color: var(--cm-night);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover {
  background: linear-gradient(135deg, var(--cm-amber), var(--cm-gold));
  color: var(--cm-night);
}

.btn-secondary,
.btn-outline-light,
.btn-outline-primary {
  border: 2px solid rgba(245, 197, 66, .45);
  background: transparent;
  color: var(--cm-white);
}

.btn-secondary:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover {
  border-color: var(--cm-gold);
  background: rgba(245, 197, 66, .12);
  color: var(--cm-white);
}

.btn-danger {
  border: 2px solid transparent;
  background: var(--cm-rouge);
}

.form-control,
.form-select {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: rgba(0, 0, 0, .3);
  color: var(--cm-white);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cm-gold);
  background: rgba(0, 0, 0, .35);
  box-shadow: none;
  color: var(--cm-white);
}

.form-label {
  color: var(--cm-muted);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.table {
  --bs-table-color: var(--cm-muted);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--cm-line);
}

.table > thead {
  color: var(--cm-gold);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alert {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  color: var(--cm-white);
}

.alert-success { border-left: 3px solid #34d399 }
.alert-danger  { border-left: 3px solid var(--cm-rouge) }
.alert-warning { border-left: 3px solid var(--cm-gold) }
.alert-info    { border-left: 3px solid var(--cm-azur) }

.badge {
  border-radius: var(--pf-radius);
  font-family: var(--cm-body);
  letter-spacing: .06em;
}

.dropdown-menu {
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.dropdown-item {
  color: var(--cm-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(245, 197, 66, .1);
  color: var(--cm-white);
}

.page-link {
  border-color: var(--cm-line);
  background: var(--cm-panel);
  color: var(--cm-muted);
}

.page-item.active .page-link {
  border-color: var(--cm-gold);
  background: var(--cm-gold);
  color: var(--cm-night);
}

.progress {
  background: rgba(0, 0, 0, .35);
}

.progress-bar {
  background: linear-gradient(90deg, var(--cm-gold), var(--cm-amber));
}

a {
  color: var(--cm-azur);
}

a:hover {
  color: var(--cm-gold);
}

/* les liens de nos composants gardent leur propre couleur */
.cm-header a,
.pf-footer a,
.pf-card,
.pf-feature a,
.pf-btn {
  color: inherit;
}

/* ==================================================================
   Boutique et votes
   Vues du plugin surchargées : la structure et les accroches JavaScript
   restent celles d'Azuriom, seule la présentation change.
   ================================================================== */
.pf-page-head {
  margin: 0 0 34px;
}

.pf-page-head h1 {
  margin: 18px 0 0;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.pf-btn-block {
  display: flex;
  width: 100%;
}

/* --- boutique --- */
.pf-shop-layout {
  display: grid;
  gap: 40px;
  align-items: start;
  grid-template-columns: 280px minmax(0, 1fr);
}

@media screen and (max-width: 960px) {
  .pf-shop-layout {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-shop-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pf-shop-nav {
  padding: 22px;
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-shop-nav a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--pf-radius);
  color: var(--cm-muted);
  font-size: .88rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.pf-shop-nav a:hover {
  background: rgba(245, 197, 66, .09);
  color: var(--cm-white);
}

.pf-shop-nav a.is-current {
  background: rgba(245, 197, 66, .14);
  color: var(--cm-white);
  font-weight: 700;
}

.pf-shop-nav-sub {
  padding-left: 30px !important;
  font-size: .82rem !important;
}

.pf-shop-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pf-shop-user-head img {
  border-radius: var(--pf-radius);
}

.pf-shop-user-name {
  margin: 0;
  color: var(--cm-white);
  font-size: .92rem;
  font-weight: 700;
}

.pf-shop-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-shop-actions .pf-btn {
  width: 100%;
}

.pf-shop-recent {
  padding-top: 10px;
  border-top: 1px solid rgba(245, 197, 66, .14);
  margin-bottom: 0;
}

.pf-package-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.pf-package {
  display: flex;
  flex-direction: column;
  padding: 0 20px 22px;
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
  transition: transform .15s ease, border-color .15s ease;
}

.pf-package:hover {
  border-color: var(--cm-gold);
  transform: translate(2px, 2px);
  box-shadow: var(--pf-hard-sm);
}

.pf-package-art {
  display: grid;
  height: 160px;
  margin: 0 -20px 18px;
  border-bottom: 2px solid rgba(245, 197, 66, .2);
  background: linear-gradient(160deg, rgba(245, 197, 66, .14), rgba(43, 79, 168, .18));
  overflow: hidden;
  place-items: center;
}

.pf-package-art img {
  max-width: 78%;
  height: 122px;
  object-fit: contain;
}

.pf-package h3 {
  margin: 0 0 8px;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: 1.02rem;
  text-transform: uppercase;
}

.pf-package-price {
  flex: 1;
  margin: 0 0 16px;
  color: var(--cm-muted);
  font-size: .9rem;
}

.pf-package-price strong {
  color: var(--cm-gold);
  font-size: 1.1rem;
}

.pf-package-price del {
  margin-right: 6px;
  font-size: .82rem;
  opacity: .7;
}

/* --- votes --- */
.pf-vote-card {
  position: relative;
  margin-bottom: 26px;
  padding: 30px;
  border: var(--pf-border-strong);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
  text-align: center;
}

.pf-vote-form {
  max-width: 380px;
  margin: 0 auto;
  text-align: left;
}

.pf-vote-form .pf-btn {
  width: 100%;
}

.pf-vote-sites {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.pf-vote-block {
  margin-bottom: 26px;
  padding: 24px;
  border: var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--cm-panel);
  box-shadow: var(--pf-hard);
}

.pf-vote-title {
  margin: 0 0 18px;
  color: var(--cm-white);
  font-family: var(--cm-heading);
  font-size: 1.14rem;
  text-transform: uppercase;
}

.pf-vote-block .pf-table {
  margin-bottom: 0;
}

.pf-vote-block .pf-aside-note {
  margin-top: 14px;
}

/* La page Jouer ne compte plus que trois cartes depuis la fusion des deux Mac :
   la grille en gardait quatre, d'où une colonne vide à droite. */
.cm-platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 960px) {
  .cm-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 680px) {
  .cm-platform-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}