@import url("/css/vitrine-maintenance-v1.css");

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2
   Objectif : garder la DA V1, corriger l'alignement.
   Serveur concerné : vitrine 10.80.0.21
   ========================================================= */

/* Largeur globale plus propre */
.shell,
.shell-wide {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 46px auto !important;
}

/* Header : plus propre, moins étiré */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  min-height: 92px !important;
  padding: 18px 22px !important;
}

.brandWrap {
  flex: 0 0 auto !important;
  min-width: 280px !important;
}

.brandName {
  white-space: nowrap !important;
}

.topnav {
  flex: 1 1 auto !important;
  max-width: 430px !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.topActions,
.rightActions {
  flex: 0 0 auto !important;
  min-width: 260px !important;
}

/* Boutons header : hauteur stable */
.topActions .linkBtn,
.rightActions .linkBtn,
.topActions .compactBtn,
.rightActions .compactBtn {
  min-width: 150px !important;
  white-space: nowrap !important;
}

/* Pages principales : rythme vertical plus carré */
.landingMain,
.offersMain {
  gap: 24px !important;
}

/* Hero : meilleure lecture, moins "bloc posé au hasard" */
.hero,
.heroWide,
.compactHero {
  padding: clamp(34px, 4vw, 54px) !important;
}

.heroInner {
  max-width: 100% !important;
}

body.store-home .heroInner {
  max-width: 800px !important;
}

.hero h1,
.heroWide h1,
.compactHero h1 {
  max-width: 850px !important;
  margin-bottom: 20px !important;
}

.hero p,
.heroWide p,
.compactHero p {
  max-width: 720px !important;
}

/* Hero avec visuel à droite */
.heroSplit {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 42px !important;
  align-items: center !important;
}

.heroSplit > div:first-child {
  min-width: 0 !important;
}

.heroGamePreview,
.posterMini,
.gameHeroVisual {
  width: 100% !important;
  min-height: 250px !important;
  align-self: stretch !important;
}

/* Bandeau commercial : alignement plus net */
.salesBanner {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.salesBannerMain {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.salesBannerMain h2 {
  max-width: 760px !important;
  margin-top: 0 !important;
}

.salesBannerMain p {
  max-width: 760px !important;
}

.salesBannerAside,
.promoSpotlight {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 180px !important;
}

/* Titres de section */
.sectionHeadingRow,
.catalogHeading,
.offerHeadingRow {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 22px !important;
}

.sectionHeadingRow > div,
.catalogHeading > div,
.offerHeadingRow > div {
  min-width: 0 !important;
  max-width: 820px !important;
}

.sectionHeadingRow h2,
.catalogHeading h2,
.offerHeadingRow h2 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.sectionIntro {
  max-width: 760px !important;
}

/* Grilles plus régulières */
.gamesGrid,
.catalogGrid,
.offersGrid {
  align-items: stretch !important;
}

.gamesGrid,
.catalogGrid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

.offersGrid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* Cartes jeux : hauteur cohérente */
.gameCard,
.posterCard,
.catalogCard {
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Cartes offres : même hauteur et boutons en bas */
.offerCard,
.refinedOfferCard,
.salesOfferCard {
  min-height: 430px !important;
  display: flex !important;
  flex-direction: column !important;
}

.offerCard .offerTopRow,
.offerCard .offerMainRow,
.refinedOfferCard .offerTopRow,
.refinedOfferCard .offerMainRow {
  flex: 1 1 auto !important;
}

.offerCard .linkBtn,
.refinedOfferCard .linkBtn,
.salesOfferCard .linkBtn {
  margin-top: auto !important;
}

/* Évite les blocs trop collés */
.catalogSection,
.offersStage,
.salesBanner,
.statsStrip {
  margin-top: 0 !important;
}

/* Stats accueil : cartes alignées */
.statsStrip {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.miniStatCard {
  min-height: 110px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* Page fiche jeu : bloc plus stable */
.gameContent,
.gameDetailsGrid {
  display: grid !important;
  gap: 24px !important;
}

.gameDetailsGrid {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
}

.gameDetailPanel,
.gameInfoCard {
  min-width: 0 !important;
}

/* Résumés / panneaux à droite */
.summaryPanel,
.paymentSummary,
.checkoutSummary {
  align-self: start !important;
}

/* Formulaires : alignement propre */
.formGrid,
.configGrid,
.checkoutGrid,
.paymentGrid {
  display: grid !important;
  gap: 18px !important;
}

input,
select,
textarea {
  min-height: 48px !important;
}

label,
.formLabel,
.summaryLabel {
  margin-bottom: 8px !important;
}

/* Empêche les textes de casser les cartes */
.card,
.cardSurface,
.gameCard,
.offerCard,
.catalogCard,
.summaryPanel,
.salesBanner {
  min-width: 0 !important;
}

.card *,
.cardSurface *,
.gameCard *,
.offerCard *,
.catalogCard *,
.summaryPanel *,
.salesBanner * {
  overflow-wrap: anywhere;
}

/* Responsive tablette */
@media (max-width: 1080px) {
  .topbar {
    flex-wrap: wrap !important;
  }

  .brandWrap {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .topnav {
    flex: 1 1 auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  .topActions,
  .rightActions {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .heroSplit,
  .salesBanner,
  .gameDetailsGrid {
    grid-template-columns: 1fr !important;
  }

  .heroGamePreview,
  .posterMini,
  .gameHeroVisual {
    min-height: 220px !important;
  }
}

/* Responsive mobile */
@media (max-width: 700px) {
  .shell,
  .shell-wide {
    width: min(100% - 24px, 1180px) !important;
    margin: 22px auto !important;
  }

  .topbar {
    min-height: unset !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  .brandWrap {
    gap: 12px !important;
  }

  .brandName {
    font-size: 1.35rem !important;
  }

  .topnav {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .topnav a,
  .navLink {
    white-space: nowrap !important;
  }

  .topActions,
  .rightActions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .topActions .linkBtn,
  .rightActions .linkBtn,
  .topActions .compactBtn,
  .rightActions .compactBtn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero,
  .heroWide,
  .compactHero {
    padding: 26px 22px !important;
    border-radius: 24px !important;
  }

  .hero h1,
  .heroWide h1,
  .compactHero h1 {
    font-size: clamp(2.25rem, 13vw, 3.4rem) !important;
    letter-spacing: -0.06em !important;
  }

  .sectionHeadingRow,
  .catalogHeading,
  .offerHeadingRow {
    display: block !important;
  }

  .gameCard,
  .posterCard,
  .catalogCard {
    min-height: 250px !important;
  }

  .offerCard,
  .refinedOfferCard,
  .salesOfferCard {
    min-height: unset !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.1
   Correctif boutons header + CTA
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Groupe de boutons header : plus premium et plus propre */
.topActions,
.rightActions {
  gap: 12px !important;
  padding: 6px !important;
  border: 1px solid rgba(46, 233, 191, 0.08) !important;
  border-radius: 18px !important;
  background: rgba(3, 10, 15, 0.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Boutons header : plus fins, moins brutaux */
.topActions .linkBtn,
.rightActions .linkBtn,
.topActions .compactBtn,
.rightActions .compactBtn {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

/* Bouton secondaire du header */
.topActions .linkBtn.secondary,
.rightActions .linkBtn.secondary,
.topActions .compactBtn.secondary,
.rightActions .compactBtn.secondary {
  color: rgba(231, 240, 248, 0.88) !important;
  background: rgba(8, 16, 23, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.topActions .linkBtn.secondary:hover,
.rightActions .linkBtn.secondary:hover,
.topActions .compactBtn.secondary:hover,
.rightActions .compactBtn.secondary:hover {
  color: #f4fbff !important;
  background: rgba(12, 24, 30, 0.88) !important;
  border-color: rgba(46, 233, 191, 0.20) !important;
  box-shadow: 0 0 24px rgba(46, 233, 191, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* Bouton principal du header */
.topActions .linkBtn:not(.secondary),
.rightActions .linkBtn:not(.secondary),
.topActions .compactBtn:not(.secondary),
.rightActions .compactBtn:not(.secondary) {
  color: #03110f !important;
  background: linear-gradient(180deg, #44f0c7 0%, #1fd0aa 100%) !important;
  border: 1px solid rgba(68, 240, 199, 0.38) !important;
  box-shadow:
    0 10px 24px rgba(31, 208, 170, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.topActions .linkBtn:not(.secondary):hover,
.rightActions .linkBtn:not(.secondary):hover,
.topActions .compactBtn:not(.secondary):hover,
.rightActions .compactBtn:not(.secondary):hover {
  background: linear-gradient(180deg, #55f4ce 0%, #26d9b1 100%) !important;
  box-shadow:
    0 14px 28px rgba(31, 208, 170, 0.18),
    0 0 28px rgba(46, 233, 191, 0.10) !important;
  transform: translateY(-1px) !important;
}

/* CTA généraux : moins lourds */
.linkBtn,
button.linkBtn,
.compactBtn,
.heroActions a,
button,
.btn {
  border-radius: 14px !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* CTA primaire global : plus premium */
.linkBtn:not(.secondary),
button.linkBtn:not(.secondary),
.compactBtn:not(.secondary),
.heroActions a:not(.secondary),
button:not(.secondary),
.btn:not(.secondary) {
  color: #03110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border: 1px solid rgba(72, 239, 201, 0.34) !important;
  box-shadow:
    0 12px 28px rgba(28, 201, 164, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.linkBtn:not(.secondary):hover,
button.linkBtn:not(.secondary):hover,
.compactBtn:not(.secondary):hover,
.heroActions a:not(.secondary):hover,
button:not(.secondary):hover,
.btn:not(.secondary):hover {
  background: linear-gradient(180deg, #59f3d1 0%, #20d7af 100%) !important;
  box-shadow:
    0 14px 32px rgba(28, 201, 164, 0.18),
    0 0 30px rgba(46, 233, 191, 0.10) !important;
}

/* CTA secondaires globaux : plus sobres */
.linkBtn.secondary,
.btn.secondary,
button.secondary,
.compactBtn.secondary,
.heroActions a.secondary {
  color: rgba(234, 243, 249, 0.90) !important;
  background: rgba(7, 16, 23, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.linkBtn.secondary:hover,
.btn.secondary:hover,
button.secondary:hover,
.compactBtn.secondary:hover,
.heroActions a.secondary:hover {
  background: rgba(10, 21, 28, 0.92) !important;
  border-color: rgba(46, 233, 191, 0.18) !important;
  box-shadow: 0 0 20px rgba(46, 233, 191, 0.06) !important;
}

/* Zone d'actions du hero : mieux intégrée */
.heroActions,
.salesBannerActions,
.actionRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

/* Boutons du hero : plus propres */
.heroActions .linkBtn,
.salesBannerActions .linkBtn,
.actionRow .linkBtn,
.heroActions .compactBtn,
.salesBannerActions .compactBtn,
.actionRow .compactBtn {
  min-width: 180px !important;
  justify-content: center !important;
}

/* Si deux CTA côte à côte : secondaire discret, primaire propre */
.heroActions .linkBtn.secondary,
.salesBannerActions .linkBtn.secondary,
.actionRow .linkBtn.secondary {
  background: rgba(5, 14, 20, 0.86) !important;
}

.heroActions .linkBtn:not(.secondary),
.salesBannerActions .linkBtn:not(.secondary),
.actionRow .linkBtn:not(.secondary) {
  background: linear-gradient(180deg, #46efc7 0%, #20cfa9 100%) !important;
}

/* Home : rend les CTA plus haut de gamme si utilisés directement dans le hero */
body.store-home .hero .linkBtn,
body.store-home .heroWide .linkBtn,
body.store-home .compactHero .linkBtn {
  min-width: 190px !important;
}

/* Boutons type "Créer mon serveur" : évite l'effet pavé trop gros */
body.store-home .hero .linkBtn,
body.store-offers .salesBanner .linkBtn,
body.store-game .gameHeroPanel .linkBtn {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Mobile : boutons propres, pas cassés */
@media (max-width: 700px) {
  .topActions,
  .rightActions {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .heroActions,
  .salesBannerActions,
  .actionRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .heroActions .linkBtn,
  .salesBannerActions .linkBtn,
  .actionRow .linkBtn,
  .heroActions .compactBtn,
  .salesBannerActions .compactBtn,
  .actionRow .compactBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.2
   Fond image yggdrasil.png
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Fond principal avec image */
body.store-home,
body.store-offers,
body.store-game {
  background:
    linear-gradient(135deg, rgba(2, 8, 10, 0.90) 0%, rgba(3, 14, 17, 0.86) 42%, rgba(2, 8, 10, 0.92) 100%),
    radial-gradient(circle at 18% 14%, rgba(20, 126, 102, 0.18), transparent 34%),
    radial-gradient(circle at 84% 52%, rgba(16, 185, 129, 0.10), transparent 32%),
    url("/assets/yggdrasil.png") center center / cover no-repeat fixed !important;
}

/* Overlay sombre pour que le texte reste lisible */
body.store-home::before,
body.store-offers::before,
body.store-game::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(1, 7, 10, 0.74), rgba(1, 7, 10, 0.82)),
    linear-gradient(145deg, transparent 0 28%, rgba(46, 233, 191, 0.030) 28.2% 28.45%, transparent 28.7%),
    linear-gradient(145deg, transparent 0 52%, rgba(46, 233, 191, 0.024) 52.1% 52.32%, transparent 52.6%);
  opacity: 1;
}

/* On garde la grille technique, un peu plus discrète */
body.store-home::after,
body.store-offers::after,
body.store-game::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 233, 191, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 233, 191, 0.020) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.45), transparent 72%);
  opacity: 0.22;
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.3
   Fond image forcé via calque fixe
   Serveur : vitrine 10.80.0.21
   ========================================================= */

html,
body.store-home,
body.store-offers,
body.store-game {
  background: #02090b !important;
}

/* Image de fond forcée */
body.store-home::before,
body.store-offers::before,
body.store-game::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    url("/assets/yggdrasil.png") center center / cover no-repeat fixed !important;
  opacity: 0.42 !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.72) !important;
}

/* Overlay + ambiance technique au-dessus de l'image */
body.store-home::after,
body.store-offers::after,
body.store-game::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(1, 7, 10, 0.58) 0%, rgba(3, 16, 18, 0.48) 44%, rgba(1, 7, 10, 0.68) 100%),
    radial-gradient(circle at 18% 14%, rgba(46, 233, 191, 0.16), transparent 34%),
    radial-gradient(circle at 84% 52%, rgba(16, 185, 129, 0.10), transparent 32%),
    linear-gradient(rgba(46, 233, 191, 0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 233, 191, 0.016) 1px, transparent 1px) !important;
  background-size:
    auto,
    auto,
    auto,
    72px 72px,
    72px 72px !important;
  opacity: 1 !important;
}

/* Le contenu reste au-dessus du fond */
.shell,
.shell-wide,
.topbar,
.landingMain,
.offersMain {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.4
   Bloc État de la plateforme dans le hero
   Serveur : vitrine 10.80.0.21
   ========================================================= */

body.store-home .heroInner.heroStatusLayout {
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 370px !important;
  gap: 42px !important;
  align-items: center !important;
}

.heroCopy {
  min-width: 0 !important;
}

.platformStatusPanel {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 22px;
  border: 1px solid rgba(46, 233, 191, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 233, 191, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(4, 17, 22, 0.82), rgba(2, 9, 13, 0.86));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.platformStatusPanel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(46, 233, 191, 0.08) 48.2% 48.55%, transparent 48.8%),
    radial-gradient(circle at center, rgba(46, 233, 191, 0.14), transparent 36%);
  opacity: 0.68;
  pointer-events: none;
}

.platformStatusHeader,
.platformStatusList,
.platformStatusFooter {
  position: relative;
  z-index: 1;
}

.platformStatusHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.platformStatusEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #dffcf4;
  background: rgba(46, 233, 191, 0.10);
  border: 1px solid rgba(46, 233, 191, 0.18);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platformStatusEyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2ee9bf;
  box-shadow: 0 0 16px rgba(46, 233, 191, 0.82);
}

.platformStatusHeader h2 {
  margin: 0;
  color: #f3f8ff;
  font-size: 1.4rem;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.platformStatusPulse {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  border: 1px solid rgba(46, 233, 191, 0.22);
  background:
    radial-gradient(circle at center, rgba(46, 233, 191, 0.72) 0 14%, transparent 16%),
    rgba(4, 17, 22, 0.82);
  box-shadow:
    0 0 28px rgba(46, 233, 191, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.platformStatusList {
  display: grid;
  gap: 10px;
}

.platformStatusRow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(2, 9, 13, 0.62);
}

.platformDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #718596;
  box-shadow: 0 0 16px rgba(113, 133, 150, 0.40);
}

.platformLabel {
  color: rgba(234, 243, 249, 0.88);
  font-size: 0.92rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platformState {
  min-width: 58px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}

.platformStatusRow.is-up .platformDot {
  background: #2ee9bf;
  box-shadow: 0 0 16px rgba(46, 233, 191, 0.78);
}

.platformStatusRow.is-up .platformState {
  color: #02110f;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%);
}

.platformStatusRow.is-down {
  border-color: rgba(255, 107, 122, 0.22);
  background: rgba(255, 107, 122, 0.08);
}

.platformStatusRow.is-down .platformDot {
  background: #ff6b7a;
  box-shadow: 0 0 16px rgba(255, 107, 122, 0.68);
}

.platformStatusRow.is-down .platformState {
  color: #ffe8eb;
  background: rgba(255, 107, 122, 0.18);
  border: 1px solid rgba(255, 107, 122, 0.25);
}

.platformStatusRow.is-loading .platformDot {
  animation: platformPulse 1.4s ease-in-out infinite;
}

.platformStatusFooter {
  margin-top: 14px;
  color: rgba(159, 176, 192, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
}

@keyframes platformPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 1080px) {
  body.store-home .heroInner.heroStatusLayout {
    grid-template-columns: 1fr !important;
  }

  .platformStatusPanel {
    min-height: unset;
  }
}

@media (max-width: 700px) {
  .platformStatusPanel {
    padding: 18px;
    border-radius: 22px;
  }

  .platformStatusHeader {
    display: block;
  }

  .platformStatusPulse {
    margin-top: 14px;
  }

  .platformStatusRow {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .platformState {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.5
   Page status publique + état PARTIEL
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Le menu a maintenant 4 liens */
.topnav {
  max-width: 570px !important;
}

/* État PARTIEL dans le bloc accueil */
.platformStatusRow.is-partial {
  border-color: rgba(255, 211, 106, 0.24);
  background: rgba(255, 211, 106, 0.08);
}

.platformStatusRow.is-partial .platformDot {
  background: #ffd36a;
  box-shadow: 0 0 16px rgba(255, 211, 106, 0.70);
}

.platformStatusRow.is-partial .platformState {
  color: #211504;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 100%);
}

/* Page status */
.statusMain {
  display: grid;
  gap: 24px;
}

.statusHeroInner {
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 36px !important;
  align-items: center !important;
}

.statusOverallCard {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 170px;
  padding: 22px;
  border: 1px solid rgba(46, 233, 191, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 233, 191, 0.13), transparent 45%),
    rgba(3, 12, 17, 0.76);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.statusOverallDot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: #718596;
  box-shadow: 0 0 22px rgba(113, 133, 150, 0.42);
}

.statusOverallCard.is-up .statusOverallDot {
  background: #2ee9bf;
  box-shadow: 0 0 28px rgba(46, 233, 191, 0.82);
}

.statusOverallCard.is-partial .statusOverallDot {
  background: #ffd36a;
  box-shadow: 0 0 28px rgba(255, 211, 106, 0.78);
}

.statusOverallCard.is-down .statusOverallDot {
  background: #ff6b7a;
  box-shadow: 0 0 28px rgba(255, 107, 122, 0.72);
}

.statusOverallLabel {
  color: rgba(159, 176, 192, 0.88);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#statusOverallText {
  display: block;
  color: #f3f8ff;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

#statusCheckedAt {
  margin: 10px 0 0;
  color: rgba(159, 176, 192, 0.84);
  font-size: 0.92rem;
}

.statusSection {
  padding: clamp(22px, 3vw, 34px) !important;
}

.statusServiceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.statusServiceCard {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 22px;
  border: 1px solid rgba(46, 233, 191, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(6, 18, 25, 0.86), rgba(3, 10, 15, 0.82));
  box-shadow: 0 18px 62px rgba(0, 0, 0, 0.30);
}

.statusServiceCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 0%, rgba(46, 233, 191, 0.12), transparent 38%),
    linear-gradient(145deg, transparent 0 54%, rgba(46, 233, 191, 0.045) 54.2% 54.5%, transparent 54.8%);
}

.statusServiceCard.is-partial {
  border-color: rgba(255, 211, 106, 0.26);
}

.statusServiceCard.is-down {
  border-color: rgba(255, 107, 122, 0.28);
}

.statusServiceHeader,
.statusChecksList {
  position: relative;
  z-index: 1;
}

.statusServiceHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.statusServiceType {
  color: rgba(159, 176, 192, 0.86);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.statusServiceHeader h3 {
  margin: 0;
  color: #f3f8ff;
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.statusChecksList {
  display: grid;
  gap: 10px;
}

.statusCheckRow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(2, 9, 13, 0.62);
}

.statusCheckRow.is-up .platformDot {
  background: #2ee9bf;
  box-shadow: 0 0 16px rgba(46, 233, 191, 0.78);
}

.statusCheckRow.is-partial .platformDot {
  background: #ffd36a;
  box-shadow: 0 0 16px rgba(255, 211, 106, 0.70);
}

.statusCheckRow.is-down {
  border-color: rgba(255, 107, 122, 0.22);
  background: rgba(255, 107, 122, 0.08);
}

.statusCheckRow.is-down .platformDot {
  background: #ff6b7a;
  box-shadow: 0 0 16px rgba(255, 107, 122, 0.68);
}

.statusCheckLabel {
  color: rgba(234, 243, 249, 0.88);
  font-size: 0.92rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusLoadingCard {
  padding: 24px;
  border: 1px solid rgba(46, 233, 191, 0.16);
  border-radius: 22px;
  color: rgba(234, 243, 249, 0.86);
  background: rgba(3, 12, 17, 0.72);
  font-weight: 800;
}

.statusLoadingCard.is-down {
  border-color: rgba(255, 107, 122, 0.26);
  background: rgba(255, 107, 122, 0.08);
}

@media (max-width: 1080px) {
  .statusHeroInner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .statusServiceHeader {
    display: block;
  }

  .statusServiceHeader .platformState {
    display: inline-flex;
    margin-top: 12px;
  }

  .statusCheckRow {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .statusCheckRow .platformState {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V2.6
   Correction visuelle page Status
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Page status : structure générale */
body.status-page .statusMain {
  display: grid !important;
  gap: 24px !important;
}

/* Hero status : vrai bloc premium en deux colonnes */
body.status-page .statusHero {
  padding: clamp(34px, 4vw, 56px) !important;
}

body.status-page .statusHeroInner {
  max-width: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: center !important;
  gap: 42px !important;
}

body.status-page .statusHeroInner > div:first-child {
  min-width: 0 !important;
}

body.status-page .statusHero h1 {
  max-width: 820px !important;
  margin: 0 0 20px !important;
}

body.status-page .statusHero p {
  max-width: 680px !important;
}

/* Carte statut global */
body.status-page .statusOverallCard {
  position: relative !important;
  overflow: hidden !important;
  min-height: 210px !important;
  padding: 26px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(46, 233, 191, 0.18) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 233, 191, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(4, 17, 22, 0.86), rgba(2, 9, 13, 0.90)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.status-page .statusOverallCard::before {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(46, 233, 191, 0.08) 48.2% 48.55%, transparent 48.8%),
    radial-gradient(circle at center, rgba(46, 233, 191, 0.12), transparent 38%) !important;
  opacity: 0.8 !important;
}

body.status-page .statusOverallCard > * {
  position: relative !important;
  z-index: 1 !important;
}

body.status-page .statusOverallDot {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 999px !important;
  background: #718596 !important;
  box-shadow: 0 0 24px rgba(113, 133, 150, 0.42) !important;
}

body.status-page .statusOverallCard.is-up .statusOverallDot {
  background: #2ee9bf !important;
  box-shadow: 0 0 30px rgba(46, 233, 191, 0.82) !important;
}

body.status-page .statusOverallCard.is-partial .statusOverallDot {
  background: #ffd36a !important;
  box-shadow: 0 0 30px rgba(255, 211, 106, 0.78) !important;
}

body.status-page .statusOverallCard.is-down .statusOverallDot {
  background: #ff6b7a !important;
  box-shadow: 0 0 30px rgba(255, 107, 122, 0.72) !important;
}

body.status-page .statusOverallLabel {
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.88) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

body.status-page #statusOverallText {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-width: 96px !important;
  justify-content: center !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: #02110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
}

body.status-page .statusOverallCard.is-partial #statusOverallText {
  color: #211504 !important;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 100%) !important;
}

body.status-page .statusOverallCard.is-down #statusOverallText {
  color: #ffe8eb !important;
  background: rgba(255, 107, 122, 0.18) !important;
  border: 1px solid rgba(255, 107, 122, 0.25) !important;
}

body.status-page #statusCheckedAt {
  margin: 12px 0 0 !important;
  color: rgba(159, 176, 192, 0.84) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

/* Section services principaux */
body.status-page .statusSection {
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 30px !important;
}

body.status-page .statusSection .sectionHeadingRow {
  margin-bottom: 26px !important;
}

/* Grille des cartes status */
body.status-page .statusServiceGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Carte service */
body.status-page .statusServiceCard {
  position: relative !important;
  overflow: hidden !important;
  min-height: 230px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.88), rgba(3, 10, 15, 0.84)) !important;
  box-shadow:
    0 18px 62px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.status-page .statusServiceCard::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(145deg, transparent 0 54%, rgba(46, 233, 191, 0.045) 54.2% 54.5%, transparent 54.8%) !important;
}

body.status-page .statusServiceCard.is-partial {
  border-color: rgba(255, 211, 106, 0.28) !important;
}

body.status-page .statusServiceCard.is-down {
  border-color: rgba(255, 107, 122, 0.30) !important;
}

/* Header carte service */
body.status-page .statusServiceHeader {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

body.status-page .statusServiceType {
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.82) !important;
  font-size: 0.70rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.status-page .statusServiceHeader h3 {
  margin: 0 !important;
  color: #f3f8ff !important;
  font-size: 1.42rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

/* Liste des checks dans chaque service */
body.status-page .statusChecksList {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 10px !important;
  margin-top: auto !important;
}

body.status-page .statusCheckRow {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(2, 9, 13, 0.62) !important;
}

body.status-page .statusCheckLabel {
  color: rgba(234, 243, 249, 0.88) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Dots */
body.status-page .platformDot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #718596 !important;
  box-shadow: 0 0 16px rgba(113, 133, 150, 0.40) !important;
}

body.status-page .statusCheckRow.is-up .platformDot,
body.status-page .statusServiceCard.is-up .platformDot {
  background: #2ee9bf !important;
  box-shadow: 0 0 16px rgba(46, 233, 191, 0.78) !important;
}

body.status-page .statusCheckRow.is-partial .platformDot,
body.status-page .statusServiceCard.is-partial .platformDot {
  background: #ffd36a !important;
  box-shadow: 0 0 16px rgba(255, 211, 106, 0.70) !important;
}

body.status-page .statusCheckRow.is-down {
  border-color: rgba(255, 107, 122, 0.22) !important;
  background: rgba(255, 107, 122, 0.08) !important;
}

body.status-page .statusCheckRow.is-down .platformDot,
body.status-page .statusServiceCard.is-down .platformDot {
  background: #ff6b7a !important;
  box-shadow: 0 0 16px rgba(255, 107, 122, 0.68) !important;
}

/* Badges UP / PARTIEL / DOWN */
body.status-page .platformState {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 76px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  color: #02110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

body.status-page .is-partial > .platformState,
body.status-page .statusServiceCard.is-partial .statusServiceHeader > .platformState {
  color: #211504 !important;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 100%) !important;
}

body.status-page .is-down > .platformState,
body.status-page .statusServiceCard.is-down .statusServiceHeader > .platformState {
  color: #ffe8eb !important;
  background: rgba(255, 107, 122, 0.18) !important;
  border: 1px solid rgba(255, 107, 122, 0.25) !important;
}

/* Message loading */
body.status-page .statusLoadingCard {
  padding: 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  color: rgba(234, 243, 249, 0.86) !important;
  background: rgba(3, 12, 17, 0.72) !important;
  font-weight: 800 !important;
}

body.status-page .statusLoadingCard.is-down {
  border-color: rgba(255, 107, 122, 0.26) !important;
  background: rgba(255, 107, 122, 0.08) !important;
}

/* Responsive */
@media (max-width: 1080px) {
  body.status-page .statusHeroInner {
    grid-template-columns: 1fr !important;
  }

  body.status-page .statusOverallCard {
    min-height: 150px !important;
  }
}

@media (max-width: 700px) {
  body.status-page .statusHero {
    padding: 26px 22px !important;
  }

  body.status-page .statusServiceGrid {
    grid-template-columns: 1fr !important;
  }

  body.status-page .statusServiceHeader {
    display: block !important;
  }

  body.status-page .statusServiceHeader .platformState {
    margin-top: 12px !important;
  }

  body.status-page .statusCheckRow {
    grid-template-columns: 12px minmax(0, 1fr) !important;
  }

  body.status-page .statusCheckRow .platformState {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V3
   Checkout / paiement public
   Serveur : vitrine 10.80.0.21
   Pages : payment.html / payment-success.html
   ========================================================= */

/* Fond checkout dans la même DA */
html,
body.checkoutBody {
  min-height: 100% !important;
  background: #02090b !important;
}

body.checkoutBody {
  min-height: 100vh !important;
  color: #f3f8ff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(135deg, rgba(2, 8, 10, 0.90) 0%, rgba(3, 14, 17, 0.84) 42%, rgba(2, 8, 10, 0.94) 100%),
    url("/assets/yggdrasil.png") center center / cover no-repeat fixed !important;
}

body.checkoutBody::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(1, 7, 10, 0.68) 0%, rgba(3, 16, 18, 0.55) 44%, rgba(1, 7, 10, 0.74) 100%),
    radial-gradient(circle at 18% 14%, rgba(46, 233, 191, 0.15), transparent 34%),
    radial-gradient(circle at 84% 52%, rgba(16, 185, 129, 0.10), transparent 32%),
    linear-gradient(rgba(46, 233, 191, 0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 233, 191, 0.016) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 72px 72px, 72px 72px !important;
}

/* Page checkout */
body.checkoutBody .checkoutPage,
body.checkoutBody .page {
  position: relative !important;
  z-index: 2 !important;
  width: min(1120px, calc(100% - 48px)) !important;
  margin: 46px auto !important;
  padding: 0 !important;
}

/* Grosse carte principale */
body.checkoutBody .checkoutCard {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(26px, 3.4vw, 42px) !important;
  border-radius: 32px !important;
  border: 1px solid rgba(46, 233, 191, 0.18) !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(46, 233, 191, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.92), rgba(3, 10, 15, 0.88)) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(22px) !important;
}

body.checkoutBody .checkoutCard::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(145deg, transparent 0 54%, rgba(46, 233, 191, 0.045) 54.2% 54.5%, transparent 54.8%),
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.10), transparent 38%) !important;
}

body.checkoutBody .checkoutCard > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Header paiement */
body.checkoutBody .checkoutHeader {
  max-width: 780px !important;
  margin-bottom: 28px !important;
}

body.checkoutBody .checkoutEyebrow,
body.checkoutBody .checkoutHeader .checkoutEyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  margin-bottom: 14px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.10) !important;
  border: 1px solid rgba(46, 233, 191, 0.22) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.checkoutBody .checkoutEyebrow::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #2ee9bf !important;
  box-shadow: 0 0 16px rgba(46, 233, 191, 0.82) !important;
}

body.checkoutBody h1 {
  margin: 0 0 14px !important;
  color: #f3f8ff !important;
  font-size: clamp(2.8rem, 5.8vw, 5rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.075em !important;
  font-weight: 950 !important;
}

body.checkoutBody #paymentIntro,
body.checkoutBody .checkoutHeader .muted {
  color: #9fb0c0 !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}

/* Grilles */
body.checkoutBody .checkoutGrid {
  display: grid !important;
  gap: 20px !important;
}

body.checkoutBody .checkoutGridTop {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
  align-items: stretch !important;
  margin-bottom: 20px !important;
}

/* Panneaux */
body.checkoutBody .checkoutPanel,
body.checkoutBody .summaryBox,
body.checkoutBody .priceBox,
body.checkoutBody .checkoutPriceBox {
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(6, 18, 25, 0.88), rgba(3, 10, 15, 0.84)) !important;
  box-shadow:
    0 18px 62px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(18px) !important;
}

body.checkoutBody .checkoutPanel,
body.checkoutBody .summaryBox {
  padding: 22px !important;
}

body.checkoutBody .checkoutSummaryPanel {
  min-height: 310px !important;
}

body.checkoutBody .checkoutAccountPanel,
body.checkoutBody .checkoutPromoPanel,
body.checkoutBody .checkoutPanelWide {
  margin-top: 20px !important;
}

/* Prix */
body.checkoutBody .checkoutPriceBox,
body.checkoutBody .priceBox {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 310px !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 233, 191, 0.18), transparent 45%),
    linear-gradient(180deg, rgba(5, 20, 24, 0.92), rgba(2, 9, 13, 0.88)) !important;
}

body.checkoutBody .checkoutPriceBox::before {
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(46, 233, 191, 0.09) 48.2% 48.55%, transparent 48.8%) !important;
}

body.checkoutBody .checkoutPriceBox > * {
  position: relative !important;
  z-index: 1 !important;
}

body.checkoutBody .priceMain,
body.checkoutBody #priceValue {
  color: #f3f8ff !important;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem) !important;
  line-height: 0.96 !important;
  font-weight: 950 !important;
  letter-spacing: -0.07em !important;
}

body.checkoutBody .priceSub,
body.checkoutBody #priceDescription {
  margin-top: 14px !important;
  color: #9fb0c0 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* Titres des panneaux */
body.checkoutBody h2,
body.checkoutBody h3 {
  margin: 0 0 16px !important;
  color: #f3f8ff !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}

body.checkoutBody h2 {
  font-size: 1.45rem !important;
}

body.checkoutBody h3 {
  font-size: 1.28rem !important;
}

/* Lignes de récap */
body.checkoutBody .summaryLine,
body.checkoutBody #summaryContent > div,
body.checkoutBody #userContent > div,
body.checkoutBody #configContent > div,
body.checkoutBody #paymentContent > div {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.065) !important;
  color: rgba(234, 243, 249, 0.88) !important;
  line-height: 1.45 !important;
}

body.checkoutBody .summaryLine:last-child,
body.checkoutBody #summaryContent > div:last-child,
body.checkoutBody #userContent > div:last-child,
body.checkoutBody #configContent > div:last-child,
body.checkoutBody #paymentContent > div:last-child {
  border-bottom: 0 !important;
}

body.checkoutBody .summaryLine strong,
body.checkoutBody #summaryContent strong,
body.checkoutBody #userContent strong,
body.checkoutBody #configContent strong,
body.checkoutBody #paymentContent strong {
  color: rgba(159, 176, 192, 0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* Promo */
body.checkoutBody .promoInlineRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

body.checkoutBody .promoCodeInput,
body.checkoutBody input,
body.checkoutBody select,
body.checkoutBody textarea {
  min-height: 48px !important;
  color: #f3f8ff !important;
  border: 1px solid rgba(204, 225, 239, 0.11) !important;
  border-radius: 16px !important;
  background: rgba(2, 9, 13, 0.76) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.checkoutBody input:focus,
body.checkoutBody select:focus,
body.checkoutBody textarea:focus {
  border-color: rgba(46, 233, 191, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(46, 233, 191, 0.08) !important;
}

body.checkoutBody #promoHelper,
body.checkoutBody .muted {
  color: #9fb0c0 !important;
}

/* Statuts */
body.checkoutBody .status {
  margin-top: 14px !important;
  padding: 13px 15px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(4, 15, 20, 0.72) !important;
  color: #dffcf4 !important;
  font-weight: 800 !important;
}

body.checkoutBody .status.error,
body.checkoutBody .statusError,
body.checkoutBody .status.statusError {
  border-color: rgba(255, 107, 122, 0.28) !important;
  background: rgba(255, 107, 122, 0.10) !important;
  color: #ffd6dc !important;
}

body.checkoutBody .status.success,
body.checkoutBody .statusSuccess,
body.checkoutBody .status.statusSuccess {
  border-color: rgba(46, 233, 191, 0.25) !important;
  background: rgba(46, 233, 191, 0.09) !important;
  color: #dffcf4 !important;
}

body.checkoutBody .statusPending,
body.checkoutBody .checkoutBanner {
  border-color: rgba(255, 211, 106, 0.28) !important;
  background: rgba(255, 211, 106, 0.10) !important;
  color: #ffe6a4 !important;
}

/* Actions */
body.checkoutBody .checkoutActions,
body.checkoutBody .actionsRow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  border: 1px solid rgba(46, 233, 191, 0.08) !important;
  border-radius: 20px !important;
  background: rgba(3, 10, 15, 0.44) !important;
}

body.checkoutBody .checkoutActions .linkBtn,
body.checkoutBody .checkoutActions button,
body.checkoutBody .actionsRow .linkBtn,
body.checkoutBody .actionsRow button {
  min-width: 170px !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 15px !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

/* Bouton principal paiement */
body.checkoutBody #payBtn,
body.checkoutBody #continueBtn,
body.checkoutBody .checkoutActions button:not(.secondary) {
  color: #03110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border: 1px solid rgba(72, 239, 201, 0.34) !important;
  box-shadow:
    0 12px 28px rgba(28, 201, 164, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Boutons secondaires */
body.checkoutBody .linkBtn.secondary,
body.checkoutBody button.secondary,
body.checkoutBody .checkoutActions .secondary {
  color: rgba(234, 243, 249, 0.90) !important;
  background: rgba(7, 16, 23, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Note de sécurité */
body.checkoutBody .infoNote {
  margin-top: 18px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  color: rgba(159, 176, 192, 0.92) !important;
  border: 1px solid rgba(46, 233, 191, 0.13) !important;
  background: rgba(2, 9, 13, 0.56) !important;
  font-weight: 700 !important;
}

/* Paiement confirmé */
body.checkoutBody .checkoutCard > h1:first-child {
  margin-bottom: 20px !important;
}

body.checkoutBody .hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 980px) {
  body.checkoutBody .checkoutPage,
  body.checkoutBody .page {
    width: min(100% - 28px, 1120px) !important;
    margin: 24px auto !important;
  }

  body.checkoutBody .checkoutGridTop {
    grid-template-columns: 1fr !important;
  }

  body.checkoutBody .checkoutPriceBox,
  body.checkoutBody .priceBox {
    min-height: 220px !important;
  }

  body.checkoutBody .checkoutActions,
  body.checkoutBody .actionsRow {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.checkoutBody .checkoutCard {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  body.checkoutBody h1 {
    font-size: clamp(2.3rem, 13vw, 3.3rem) !important;
  }

  body.checkoutBody .summaryLine,
  body.checkoutBody #summaryContent > div,
  body.checkoutBody #userContent > div,
  body.checkoutBody #configContent > div,
  body.checkoutBody #paymentContent > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body.checkoutBody .promoInlineRow {
    grid-template-columns: 1fr !important;
  }

  body.checkoutBody .checkoutActions,
  body.checkoutBody .actionsRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.checkoutBody .checkoutActions .linkBtn,
  body.checkoutBody .checkoutActions button,
  body.checkoutBody .actionsRow .linkBtn,
  body.checkoutBody .actionsRow button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V4.0
   Harmonisation page offers-config / configuration serveur
   Serveur : 10.80.0.21
   ========================================================= */

/* Page de config publique */
body.configPage,
body.offersConfigPage {
  background:
    linear-gradient(135deg, rgba(2, 8, 10, 0.90) 0%, rgba(3, 14, 17, 0.84) 42%, rgba(2, 8, 10, 0.94) 100%),
    url("/assets/yggdrasil.png") center center / cover no-repeat fixed !important;
}

/* Conteneur général */
body.configPage .storeShell,
body.offersConfigPage .storeShell,
body.configPage .configPageWrap,
body.offersConfigPage .configPageWrap {
  width: min(1200px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
}

/* =========================
   HERO
   ========================= */

body.configPage .configHero,
body.offersConfigPage .configHero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) 290px !important;
  gap: 28px !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 48px 56px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(46, 233, 191, 0.15), transparent 32%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.90), rgba(3, 10, 15, 0.86)) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.configPage .configHeroContent,
body.offersConfigPage .configHeroContent {
  max-width: 760px !important;
}

body.configPage .configHero h1,
body.offersConfigPage .configHero h1 {
  margin: 0 0 20px !important;
  font-size: clamp(3.4rem, 6vw, 6rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.08em !important;
  font-weight: 950 !important;
}

body.configPage .configHero p,
body.offersConfigPage .configHero p {
  max-width: 720px !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
  color: #9fb0c0 !important;
}

body.configPage .configHeroVisual,
body.offersConfigPage .configHeroVisual {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 100% !important;
  border-radius: 26px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.configPage .configHeroMiniCard,
body.offersConfigPage .configHeroMiniCard {
  width: 100% !important;
  padding: 24px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(5, 16, 22, 0.90), rgba(3, 10, 15, 0.86)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.configPage .configHeroMiniBadge,
body.offersConfigPage .configHeroMiniBadge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.10) !important;
  border: 1px solid rgba(46, 233, 191, 0.22) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.configPage .configHeroMiniCard h3,
body.offersConfigPage .configHeroMiniCard h3 {
  margin: 0 0 16px !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #f3f8ff !important;
}

body.configPage .configHeroMiniList,
body.offersConfigPage .configHeroMiniList {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 12px !important;
}

body.configPage .configHeroMiniList li,
body.offersConfigPage .configHeroMiniList li {
  position: relative !important;
  padding-left: 18px !important;
  color: rgba(234, 243, 249, 0.88) !important;
  line-height: 1.5 !important;
}

body.configPage .configHeroMiniList li::before,
body.offersConfigPage .configHeroMiniList li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #2ee9bf !important;
  box-shadow: 0 0 14px rgba(46,233,191,0.72) !important;
}

body.configPage .configHeroMiniFoot,
body.offersConfigPage .configHeroMiniFoot {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #9fb0c0 !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
}

/* =========================
   BLOC PARCOURS
   ========================= */

body.configPage .configIntroPanel,
body.offersConfigPage .configIntroPanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 24px !important;
  align-items: stretch !important;
  min-height: auto !important;
  padding: 34px 38px !important;
  border-radius: 30px !important;
}

body.configPage .configIntroPanel .sideNote,
body.offersConfigPage .configIntroPanel .sideNote {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: auto !important;
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background: rgba(3, 10, 15, 0.56) !important;
}

body.configPage .configIntroPanel h2,
body.offersConfigPage .configIntroPanel h2 {
  margin-bottom: 14px !important;
  font-size: clamp(2.3rem, 4.2vw, 4.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em !important;
}

body.configPage .configIntroPanel p,
body.offersConfigPage .configIntroPanel p {
  font-size: 1.04rem !important;
  line-height: 1.7 !important;
  color: #9fb0c0 !important;
}

/* =========================
   LAYOUT PRINCIPAL
   ========================= */

body.configPage .configMainGrid,
body.offersConfigPage .configMainGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

/* colonne droite sticky léger */
body.configPage .configSidebar,
body.offersConfigPage .configSidebar {
  display: grid !important;
  gap: 18px !important;
  position: sticky !important;
  top: 26px !important;
}

/* cartes globales */
body.configPage .configSectionCard,
body.offersConfigPage .configSectionCard,
body.configPage .configSidebarCard,
body.offersConfigPage .configSidebarCard,
body.configPage .configSummaryCard,
body.offersConfigPage .configSummaryCard {
  border-radius: 26px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(6, 18, 25, 0.90), rgba(3, 10, 15, 0.86)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.024) !important;
}

/* header de section */
body.configPage .sectionHeader,
body.offersConfigPage .sectionHeader,
body.configPage .configSidebarHeader,
body.offersConfigPage .configSidebarHeader {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}

body.configPage .stepBadge,
body.offersConfigPage .stepBadge {
  min-width: 112px !important;
  justify-content: center !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.configPage .sectionHeader h2,
body.offersConfigPage .sectionHeader h2,
body.configPage .configSidebarHeader h3,
body.offersConfigPage .configSidebarHeader h3 {
  margin: 0 !important;
  font-size: 2rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

/* =========================
   CARTES PACKS
   ========================= */

body.configPage .offerCardsGrid,
body.offersConfigPage .offerCardsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.configPage .offerCard,
body.offersConfigPage .offerCard {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  gap: 18px !important;
  padding: 24px !important;
  min-height: 100% !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(5, 16, 22, 0.92), rgba(3, 10, 15, 0.88)) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body.configPage .offerCard:hover,
body.offersConfigPage .offerCard:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(46, 233, 191, 0.26) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(46, 233, 191, 0.06) inset !important;
}

body.configPage .offerCard.selected,
body.offersConfigPage .offerCard.selected {
  border-color: rgba(46, 233, 191, 0.42) !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(46, 233, 191, 0.10) inset !important;
}

body.configPage .offerCardTop,
body.offersConfigPage .offerCardTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.configPage .offerCardTitleWrap,
body.offersConfigPage .offerCardTitleWrap {
  display: grid !important;
  gap: 8px !important;
}

body.configPage .offerCardTitle,
body.offersConfigPage .offerCardTitle {
  margin: 0 !important;
  font-size: 1.8rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  font-weight: 900 !important;
  color: #f3f8ff !important;
}

body.configPage .offerCardDesc,
body.offersConfigPage .offerCardDesc {
  color: #9fb0c0 !important;
  line-height: 1.55 !important;
}

body.configPage .offerPrice,
body.offersConfigPage .offerPrice {
  text-align: right !important;
  min-width: 120px !important;
}

body.configPage .offerPriceMain,
body.offersConfigPage .offerPriceMain {
  display: block !important;
  font-size: clamp(2.7rem, 4vw, 4.1rem) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.07em !important;
  color: #f3f8ff !important;
}

body.configPage .offerPriceSub,
body.offersConfigPage .offerPriceSub {
  display: block !important;
  margin-top: 8px !important;
  color: #9fb0c0 !important;
  font-size: 0.94rem !important;
}

/* badges pack */
body.configPage .offerPill,
body.offersConfigPage .offerPill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.10) !important;
  border: 1px solid rgba(46, 233, 191, 0.20) !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* mini specs */
body.configPage .offerSpecs,
body.offersConfigPage .offerSpecs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.configPage .offerSpec,
body.offersConfigPage .offerSpec {
  padding: 14px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.035) !important;
}

body.configPage .offerSpecLabel,
body.offersConfigPage .offerSpecLabel {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159,176,192,0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

body.configPage .offerSpecValue,
body.offersConfigPage .offerSpecValue {
  display: block !important;
  color: #f3f8ff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

/* liste avantages */
body.configPage .offerFeatures,
body.offersConfigPage .offerFeatures {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.configPage .offerFeatures li,
body.offersConfigPage .offerFeatures li {
  position: relative !important;
  padding-left: 18px !important;
  color: rgba(234,243,249,0.90) !important;
  line-height: 1.45 !important;
}

body.configPage .offerFeatures li::before,
body.offersConfigPage .offerFeatures li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #77f5d8 !important;
  font-weight: 950 !important;
}

/* =========================
   SIDEBAR DROITE
   ========================= */

body.configPage .configSidebarCard,
body.offersConfigPage .configSidebarCard,
body.configPage .configSummaryCard,
body.offersConfigPage .configSummaryCard {
  padding: 22px !important;
}

body.configPage .configSidebarCard .fieldRow,
body.offersConfigPage .configSidebarCard .fieldRow,
body.configPage .configSummaryCard .fieldRow,
body.offersConfigPage .configSummaryCard .fieldRow {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}

body.configPage .configSidebarCard .fieldRow:last-child,
body.offersConfigPage .configSidebarCard .fieldRow:last-child,
body.configPage .configSummaryCard .fieldRow:last-child,
body.offersConfigPage .configSummaryCard .fieldRow:last-child {
  border-bottom: 0 !important;
}

body.configPage .fieldLabel,
body.offersConfigPage .fieldLabel {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159,176,192,0.90) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.configPage .fieldValue,
body.offersConfigPage .fieldValue {
  display: block !important;
  color: #f3f8ff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

/* selects */
body.configPage select,
body.offersConfigPage select {
  min-height: 50px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46,233,191,0.12) !important;
  background:
    linear-gradient(180deg, rgba(155, 126, 255, 0.95), rgba(255, 153, 122, 0.95)) !important;
  color: #111827 !important;
  font-weight: 900 !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

body.configPage .helpNote,
body.offersConfigPage .helpNote {
  margin-top: 12px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background: rgba(2, 9, 13, 0.45) !important;
  color: #9fb0c0 !important;
  line-height: 1.55 !important;
}

/* prix récap */
body.configPage .summaryPrice,
body.offersConfigPage .summaryPrice {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: rgba(101, 136, 194, 0.18) !important;
  border: 1px solid rgba(101, 136, 194, 0.24) !important;
  color: #d7e7ff !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
}

/* CTA bas si présent */
body.configPage .configBottomActions,
body.offersConfigPage .configBottomActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

body.configPage .configBottomActions .linkBtn,
body.configPage .configBottomActions button,
body.offersConfigPage .configBottomActions .linkBtn,
body.offersConfigPage .configBottomActions button {
  min-height: 48px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1180px) {
  body.configPage .configMainGrid,
  body.offersConfigPage .configMainGrid {
    grid-template-columns: 1fr !important;
  }

  body.configPage .configSidebar,
  body.offersConfigPage .configSidebar {
    position: static !important;
  }
}

@media (max-width: 980px) {
  body.configPage .configHero,
  body.offersConfigPage .configHero,
  body.configPage .configIntroPanel,
  body.offersConfigPage .configIntroPanel {
    grid-template-columns: 1fr !important;
  }

  body.configPage .offerCardsGrid,
  body.offersConfigPage .offerCardsGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  body.configPage .configHero,
  body.offersConfigPage .configHero {
    padding: 30px 22px !important;
  }

  body.configPage .configIntroPanel,
  body.offersConfigPage .configIntroPanel {
    padding: 24px 22px !important;
  }

  body.configPage .offerCardTop,
  body.offersConfigPage .offerCardTop {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.configPage .offerPrice,
  body.offersConfigPage .offerPrice {
    text-align: left !important;
  }

  body.configPage .offerSpecs,
  body.offersConfigPage .offerSpecs {
    grid-template-columns: 1fr !important;
  }

  body.configPage .sectionHeader,
  body.offersConfigPage .sectionHeader,
  body.configPage .configSidebarHeader,
  body.offersConfigPage .configSidebarHeader {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.configPage .sectionHeader h2,
  body.offersConfigPage .sectionHeader h2,
  body.configPage .configSidebarHeader h3,
  body.offersConfigPage .configSidebarHeader h3 {
    font-size: 1.55rem !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V4.1
   Harmonisation réelle offers-config.html
   Cible les vraies classes de la page.
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Page offers-config : largeur et rythme */
body.store-offers .offersMain {
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  gap: 28px !important;
}

/* Hero offers-config : moins vide, plus équilibré */
body.store-offers .hero.heroWide.compactHero {
  padding: clamp(34px, 4.2vw, 54px) !important;
  min-height: auto !important;
}

body.store-offers .hero.heroWide.compactHero .heroSplit {
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 42px !important;
  align-items: center !important;
}

body.store-offers .hero.heroWide.compactHero .heroInner {
  max-width: none !important;
}

body.store-offers .hero.heroWide.compactHero h1 {
  max-width: 760px !important;
  margin-bottom: 20px !important;
  font-size: clamp(3.2rem, 5.6vw, 5.6rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.075em !important;
}

body.store-offers .hero.heroWide.compactHero p {
  max-width: 660px !important;
}

/* Le carré vide devient une mini-card utile */
body.store-offers .heroGamePreview {
  min-height: 270px !important;
  padding: 18px !important;
  border-radius: 26px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 233, 191, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(4, 17, 22, 0.86), rgba(2, 9, 13, 0.88)) !important;
  border: 1px solid rgba(46, 233, 191, 0.18) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.store-offers .heroGamePreview::before {
  display: none !important;
}

body.store-offers .configHeroMiniCard {
  width: 100% !important;
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background: rgba(2, 9, 13, 0.58) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body.store-offers .configHeroMiniBadge {
  width: fit-content !important;
  margin-bottom: 14px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.10) !important;
  border: 1px solid rgba(46, 233, 191, 0.22) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.store-offers .configHeroMiniCard h3 {
  margin: 0 0 14px !important;
  color: #f3f8ff !important;
  font-size: 1.35rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}

body.store-offers .configHeroMiniList {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

body.store-offers .configHeroMiniList li {
  position: relative !important;
  padding-left: 18px !important;
  color: rgba(234, 243, 249, 0.88) !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

body.store-offers .configHeroMiniList li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.62em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #2ee9bf !important;
  box-shadow: 0 0 14px rgba(46, 233, 191, 0.72) !important;
}

body.store-offers .configHeroMiniFoot {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: #9fb0c0 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
}

/* Bandeau parcours : plus compact */
body.store-offers .salesBanner {
  padding: 28px 32px !important;
  min-height: auto !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 24px !important;
}

body.store-offers .salesBanner h2 {
  max-width: 760px !important;
  font-size: clamp(2rem, 3.6vw, 3.4rem) !important;
  line-height: 1.02 !important;
}

body.store-offers .salesBanner p {
  max-width: 760px !important;
  font-size: 1rem !important;
}

body.store-offers .salesBannerAside {
  min-height: 170px !important;
  padding: 22px !important;
}

/* Layout principal config */
body.store-offers .offersLayoutRefined {
  display: grid !important;
  grid-template-columns: minmax(0, 1.48fr) minmax(330px, 0.82fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

/* Colonne droite */
body.store-offers .configColumnSticky {
  position: sticky !important;
  top: 24px !important;
  display: grid !important;
  gap: 18px !important;
}

/* Section offres */
body.store-offers .offersStageRefined {
  padding: 28px !important;
  border-radius: 30px !important;
}

body.store-offers .offersStageRefined .sectionHeadingRow {
  align-items: flex-start !important;
  margin-bottom: 24px !important;
}

body.store-offers .offersStageRefined .sectionHeadingRow h2 {
  max-width: 760px !important;
  font-size: clamp(2.1rem, 3.4vw, 3.4rem) !important;
  line-height: 1.02 !important;
}

body.store-offers .offersStageRefined .sectionIntro {
  max-width: 720px !important;
}

/* Grille offres : plus régulière */
body.store-offers .offersGridRefined {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Cartes offres */
body.store-offers .refinedOfferCard,
body.store-offers .salesOfferCard {
  min-height: 410px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.15) !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(46, 233, 191, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(5, 16, 22, 0.92), rgba(3, 10, 15, 0.88)) !important;
}

body.store-offers .refinedOfferCard.active,
body.store-offers .refinedOfferCard.offerCardRecommended {
  border-color: rgba(46, 233, 191, 0.42) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,0.34),
    0 0 0 1px rgba(46,233,191,0.08) inset !important;
}

body.store-offers .offerTopRow {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body.store-offers .offerBadge {
  margin: 0 !important;
  max-width: 130px !important;
  padding: 9px 12px !important;
  white-space: normal !important;
  line-height: 1.05 !important;
}

body.store-offers .offerTarget {
  color: #9fb0c0 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

body.store-offers .offerMainRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  margin-bottom: 20px !important;
}

body.store-offers .offerTitle {
  color: #f3f8ff !important;
  font-size: 1.25rem !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}

body.store-offers .offerDesc {
  margin-top: 10px !important;
  color: #9fb0c0 !important;
  line-height: 1.52 !important;
}

body.store-offers .offerPriceBlock {
  min-width: 108px !important;
  text-align: right !important;
}

body.store-offers .offerPrice {
  font-size: clamp(2.4rem, 3.2vw, 3.5rem) !important;
  line-height: 0.90 !important;
  letter-spacing: -0.07em !important;
}

body.store-offers .offerPriceSub {
  margin-top: 8px !important;
  color: #9fb0c0 !important;
  font-size: 0.85rem !important;
}

/* Specs RAM/CPU/SSD */
body.store-offers .refinedMetaGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 4px 0 20px !important;
}

body.store-offers .refinedMetaGrid > div,
body.store-offers .offerMetaGrid > div {
  min-width: 0 !important;
  padding: 12px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  background: rgba(255,255,255,0.035) !important;
  overflow: hidden !important;
}

body.store-offers .refinedMetaGrid span,
body.store-offers .offerMetaGrid span {
  display: block !important;
  color: rgba(159,176,192,0.90) !important;
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body.store-offers .refinedMetaGrid strong,
body.store-offers .offerMetaGrid strong {
  display: block !important;
  margin-top: 6px !important;
  color: #f3f8ff !important;
  font-size: 0.98rem !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

/* Avantages */
body.store-offers .offerBenefitsList {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

body.store-offers .offerBenefitsList li {
  position: relative !important;
  padding-left: 18px !important;
  color: rgba(234,243,249,0.88) !important;
  line-height: 1.42 !important;
}

body.store-offers .offerBenefitsList li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #77f5d8 !important;
  font-weight: 950 !important;
}

body.store-offers .offerFooterNote {
  margin-top: auto !important;
  color: #9fb0c0 !important;
  line-height: 1.45 !important;
}

/* Colonne droite : panneau étape 2 */
body.store-offers .configPanelStack {
  padding: 20px !important;
  border-radius: 28px !important;
}

body.store-offers .summaryBoxPremium {
  padding: 20px !important;
  border-radius: 24px !important;
}

body.store-offers .summaryCardHeader {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(2,9,13,0.45) !important;
}

body.store-offers .summaryCardHeader .sectionStep {
  margin: 0 !important;
  min-width: 88px !important;
  justify-content: center !important;
  text-align: center !important;
}

body.store-offers .summaryCardHeader h2,
body.store-offers .summaryCardHeader h3 {
  margin: 0 !important;
  color: #f3f8ff !important;
  font-size: 1.35rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

/* Grid config launcher/version */
body.store-offers .refinedConfigGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 18px 0 !important;
}

body.store-offers .configGrid label {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159,176,192,0.92) !important;
  font-weight: 900 !important;
}

body.store-offers .configGrid select {
  width: 100% !important;
  min-height: 50px !important;
}

/* Récap */
body.store-offers .summaryHeroRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}

body.store-offers .summaryLabel {
  color: rgba(159,176,192,0.92) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.store-offers .summaryOfferName {
  margin-top: 6px !important;
  color: #f3f8ff !important;
  font-size: 1.25rem !important;
  font-weight: 950 !important;
}

body.store-offers .summaryPriceBadge {
  min-width: 100px !important;
  padding: 11px 14px !important;
  border-radius: 16px !important;
  background: rgba(101,136,194,0.18) !important;
  border: 1px solid rgba(101,136,194,0.24) !important;
  color: #d7e7ff !important;
  font-weight: 950 !important;
  text-align: center !important;
}

body.store-offers .summaryList {
  display: grid !important;
}

body.store-offers .summaryLine {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  color: rgba(234,243,249,0.88) !important;
  line-height: 1.45 !important;
}

body.store-offers .summaryLine:last-child {
  border-bottom: 0 !important;
}

body.store-offers .summaryLine strong {
  color: rgba(234,243,249,0.90) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Boutons en bas colonne droite */
body.store-offers .configActions,
body.store-offers .summaryActions,
body.store-offers .checkoutActions,
body.store-offers .actionRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

body.store-offers .configColumnSticky .linkBtn,
body.store-offers .configColumnSticky button {
  min-height: 46px !important;
  border-radius: 15px !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.store-offers .offersLayoutRefined {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .configColumnSticky {
    position: static !important;
  }
}

@media (max-width: 980px) {
  body.store-offers .hero.heroWide.compactHero .heroSplit {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .salesBanner {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .offersGridRefined {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  body.store-offers .hero.heroWide.compactHero {
    padding: 28px 22px !important;
  }

  body.store-offers .hero.heroWide.compactHero h1 {
    font-size: clamp(2.5rem, 13vw, 3.7rem) !important;
  }

  body.store-offers .offerMainRow {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .offerPriceBlock {
    text-align: left !important;
  }

  body.store-offers .refinedMetaGrid {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .refinedConfigGrid {
    grid-template-columns: 1fr !important;
  }

  body.store-offers .summaryLine {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V4.2
   Suppression des dégradés rose/orange sur les pages config
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Selects Launcher / Version : fini le rose-orange */
body.store-offers .configColumnSticky select,
body.store-offers .refinedConfigGrid select,
body.store-offers .configGrid select,
body.store-offers select {
  min-height: 52px !important;
  padding: 0 44px 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 233, 191, 0.24) !important;
  color: #f3f8ff !important;
  background:
    linear-gradient(180deg, rgba(8, 24, 29, 0.96), rgba(3, 12, 17, 0.96)) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body.store-offers .configColumnSticky select:hover,
body.store-offers .refinedConfigGrid select:hover,
body.store-offers .configGrid select:hover,
body.store-offers select:hover {
  border-color: rgba(46, 233, 191, 0.38) !important;
  background:
    linear-gradient(180deg, rgba(10, 32, 36, 0.98), rgba(4, 16, 21, 0.98)) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(46, 233, 191, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.store-offers .configColumnSticky select:focus,
body.store-offers .refinedConfigGrid select:focus,
body.store-offers .configGrid select:focus,
body.store-offers select:focus {
  outline: none !important;
  border-color: rgba(46, 233, 191, 0.52) !important;
  box-shadow:
    0 0 0 4px rgba(46, 233, 191, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.22) !important;
}

/* Options du select */
body.store-offers select option {
  color: #f3f8ff !important;
  background: #061217 !important;
}

/* Bouton principal config : remplace le violet/orange par turquoise */
body.store-offers .configColumnSticky button:not(.secondary),
body.store-offers .configColumnSticky .linkBtn:not(.secondary),
body.store-offers .configActions button:not(.secondary),
body.store-offers .summaryActions button:not(.secondary),
body.store-offers .checkoutActions button:not(.secondary),
body.store-offers .actionRow button:not(.secondary),
body.store-offers .actionRow .linkBtn:not(.secondary) {
  color: #02110f !important;
  background:
    linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border: 1px solid rgba(72, 239, 201, 0.34) !important;
  box-shadow:
    0 12px 28px rgba(28, 201, 164, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body.store-offers .configColumnSticky button:not(.secondary):hover,
body.store-offers .configColumnSticky .linkBtn:not(.secondary):hover,
body.store-offers .configActions button:not(.secondary):hover,
body.store-offers .summaryActions button:not(.secondary):hover,
body.store-offers .checkoutActions button:not(.secondary):hover,
body.store-offers .actionRow button:not(.secondary):hover,
body.store-offers .actionRow .linkBtn:not(.secondary):hover {
  background:
    linear-gradient(180deg, #59f3d1 0%, #20d7af 100%) !important;
  border-color: rgba(89, 243, 209, 0.45) !important;
  box-shadow:
    0 16px 34px rgba(28, 201, 164, 0.20),
    0 0 28px rgba(46, 233, 191, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Bouton Retour : plus sobre et mieux intégré */
body.store-offers .configColumnSticky .linkBtn.secondary,
body.store-offers .configColumnSticky button.secondary,
body.store-offers .configActions .secondary,
body.store-offers .summaryActions .secondary,
body.store-offers .checkoutActions .secondary,
body.store-offers .actionRow .secondary {
  color: rgba(234, 243, 249, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(8, 18, 25, 0.92), rgba(4, 12, 17, 0.92)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body.store-offers .configColumnSticky .linkBtn.secondary:hover,
body.store-offers .configColumnSticky button.secondary:hover,
body.store-offers .configActions .secondary:hover,
body.store-offers .summaryActions .secondary:hover,
body.store-offers .checkoutActions .secondary:hover,
body.store-offers .actionRow .secondary:hover {
  background:
    linear-gradient(180deg, rgba(11, 27, 32, 0.96), rgba(5, 16, 21, 0.96)) !important;
  border-color: rgba(46, 233, 191, 0.22) !important;
  box-shadow:
    0 0 24px rgba(46, 233, 191, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Sécurité : neutralise les anciens gradients violets/oranges dans la colonne config */
body.store-offers .configColumnSticky [style*="linear-gradient"],
body.store-offers .refinedConfigGrid [style*="linear-gradient"] {
  background:
    linear-gradient(180deg, rgba(8, 24, 29, 0.96), rgba(3, 12, 17, 0.96)) !important;
}

/* Bouton continuer : largeur propre */
body.store-offers .configColumnSticky .actionRow,
body.store-offers .configColumnSticky .configActions,
body.store-offers .configColumnSticky .summaryActions,
body.store-offers .configColumnSticky .checkoutActions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

body.store-offers .configColumnSticky .actionRow button,
body.store-offers .configColumnSticky .actionRow .linkBtn,
body.store-offers .configColumnSticky .configActions button,
body.store-offers .configColumnSticky .configActions .linkBtn,
body.store-offers .configColumnSticky .summaryActions button,
body.store-offers .configColumnSticky .summaryActions .linkBtn,
body.store-offers .configColumnSticky .checkoutActions button,
body.store-offers .configColumnSticky .checkoutActions .linkBtn {
  min-height: 48px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
}

/* Mobile */
@media (max-width: 700px) {
  body.store-offers .configColumnSticky .actionRow,
  body.store-offers .configColumnSticky .configActions,
  body.store-offers .configColumnSticky .summaryActions,
  body.store-offers .configColumnSticky .checkoutActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.store-offers .configColumnSticky .actionRow button,
  body.store-offers .configColumnSticky .actionRow .linkBtn,
  body.store-offers .configColumnSticky .configActions button,
  body.store-offers .configColumnSticky .configActions .linkBtn,
  body.store-offers .configColumnSticky .summaryActions button,
  body.store-offers .configColumnSticky .summaryActions .linkBtn,
  body.store-offers .configColumnSticky .checkoutActions button,
  body.store-offers .configColumnSticky .checkoutActions .linkBtn {
    width: 100% !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA V4.3
   Force état normal vert/cyan sur selects et boutons config
   Serveur : vitrine 10.80.0.21
   ========================================================= */

/* Selects config : état normal forcé, sans violet/orange */
body.store-offers .configColumnSticky select,
body.store-offers .configColumnSticky .refinedConfigGrid select,
body.store-offers .configColumnSticky .configGrid select,
body.store-offers .offersMain .configColumnSticky select,
body.store-offers .offersMain .refinedConfigGrid select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  color: #f3f8ff !important;
  background-color: #061217 !important;
  background-image:
    linear-gradient(180deg, rgba(10, 34, 36, 0.98), rgba(3, 13, 17, 0.98)) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  border: 1px solid rgba(46, 233, 191, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(46, 233, 191, 0.035) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  text-shadow: none !important;
}

/* Chevron blanc propre pour les selects */
body.store-offers .configColumnSticky select,
body.store-offers .offersMain .refinedConfigGrid select {
  background-image:
    linear-gradient(180deg, rgba(10, 34, 36, 0.98), rgba(3, 13, 17, 0.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23eaf3f9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position:
    center,
    calc(100% - 16px) center !important;
  background-size:
    100% 100%,
    14px 14px !important;
  background-repeat: no-repeat !important;
}

/* Selects : hover/focus dans la même DA */
body.store-offers .configColumnSticky select:hover,
body.store-offers .configColumnSticky .refinedConfigGrid select:hover,
body.store-offers .configColumnSticky .configGrid select:hover,
body.store-offers .offersMain .configColumnSticky select:hover,
body.store-offers .offersMain .refinedConfigGrid select:hover,
body.store-offers .configColumnSticky select:focus,
body.store-offers .configColumnSticky .refinedConfigGrid select:focus,
body.store-offers .configColumnSticky .configGrid select:focus,
body.store-offers .offersMain .configColumnSticky select:focus,
body.store-offers .offersMain .refinedConfigGrid select:focus {
  color: #f3f8ff !important;
  background-color: #071b1d !important;
  background-image:
    linear-gradient(180deg, rgba(13, 46, 45, 1), rgba(5, 18, 22, 1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23eaf3f9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  border-color: rgba(46, 233, 191, 0.52) !important;
  box-shadow:
    0 0 0 4px rgba(46, 233, 191, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(46, 233, 191, 0.08) !important;
}

/* Boutons principaux config : état normal forcé en vert/cyan */
body.store-offers .configColumnSticky button:not(.secondary),
body.store-offers .configColumnSticky .linkBtn:not(.secondary),
body.store-offers .configColumnSticky .compactBtn:not(.secondary),
body.store-offers .configColumnSticky .actionRow button:not(.secondary),
body.store-offers .configColumnSticky .actionRow .linkBtn:not(.secondary),
body.store-offers .configColumnSticky .configActions button:not(.secondary),
body.store-offers .configColumnSticky .summaryActions button:not(.secondary),
body.store-offers .configColumnSticky .checkoutActions button:not(.secondary),
body.store-offers .offersMain .configColumnSticky button:not(.secondary),
body.store-offers .offersMain .configColumnSticky .linkBtn:not(.secondary) {
  color: #02110f !important;
  background-color: #1cc9a4 !important;
  background-image:
    linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border: 1px solid rgba(72, 239, 201, 0.36) !important;
  box-shadow:
    0 12px 28px rgba(28, 201, 164, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-shadow: none !important;
}

/* Boutons principaux config : hover/focus cohérent */
body.store-offers .configColumnSticky button:not(.secondary):hover,
body.store-offers .configColumnSticky .linkBtn:not(.secondary):hover,
body.store-offers .configColumnSticky .compactBtn:not(.secondary):hover,
body.store-offers .configColumnSticky .actionRow button:not(.secondary):hover,
body.store-offers .configColumnSticky .actionRow .linkBtn:not(.secondary):hover,
body.store-offers .configColumnSticky .configActions button:not(.secondary):hover,
body.store-offers .configColumnSticky .summaryActions button:not(.secondary):hover,
body.store-offers .configColumnSticky .checkoutActions button:not(.secondary):hover,
body.store-offers .configColumnSticky button:not(.secondary):focus,
body.store-offers .configColumnSticky .linkBtn:not(.secondary):focus {
  color: #02110f !important;
  background-color: #20d7af !important;
  background-image:
    linear-gradient(180deg, #59f3d1 0%, #20d7af 100%) !important;
  border-color: rgba(89, 243, 209, 0.48) !important;
  box-shadow:
    0 16px 34px rgba(28, 201, 164, 0.20),
    0 0 28px rgba(46, 233, 191, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Sécurité anti ancien gradient violet/orange sur config */
body.store-offers .configColumnSticky select[style],
body.store-offers .configColumnSticky button[style],
body.store-offers .configColumnSticky .linkBtn[style] {
  background-color: #061217 !important;
}

body.store-offers .configColumnSticky button:not(.secondary)[style],
body.store-offers .configColumnSticky .linkBtn:not(.secondary)[style] {
  background-color: #1cc9a4 !important;
  background-image: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA Changelog V1
   Page changelog publique
   Serveur : vitrine 10.80.0.21
   ========================================================= */

body.changelog-neo-page .changelogNeoMain {
  display: grid !important;
  gap: 24px !important;
}

body.changelog-neo-page .changelogNeoHero {
  padding: clamp(34px, 4vw, 56px) !important;
}

body.changelog-neo-page .changelogNeoHeroInner {
  max-width: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 42px !important;
  align-items: center !important;
}

body.changelog-neo-page .changelogNeoHeroCopy {
  min-width: 0 !important;
}

body.changelog-neo-page .changelogNeoHero h1 {
  max-width: 820px !important;
  margin: 0 0 20px !important;
  font-size: clamp(3.2rem, 6vw, 5.7rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.075em !important;
}

body.changelog-neo-page .changelogNeoHero p {
  max-width: 700px !important;
  color: #9fb0c0 !important;
  line-height: 1.75 !important;
}

body.changelog-neo-page .changelogNeoStats {
  display: grid !important;
  gap: 12px !important;
}

body.changelog-neo-page .changelogNeoStatCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(46, 233, 191, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(4, 17, 22, 0.86), rgba(2, 9, 13, 0.88)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.changelog-neo-page .changelogNeoStatCard span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogNeoStatCard strong {
  display: block !important;
  color: #f3f8ff !important;
  font-size: 1.45rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

body.changelog-neo-page .changelogNeoSpotlight,
body.changelog-neo-page .changelogNeoTimeline {
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 30px !important;
}

body.changelog-neo-page .topStatusBanner {
  margin-bottom: 18px !important;
  padding: 13px 15px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(46, 233, 191, 0.08) !important;
  color: #dffcf4 !important;
  font-weight: 850 !important;
}

body.changelog-neo-page .topStatusBanner.is-error {
  border-color: rgba(255, 107, 122, 0.28) !important;
  background: rgba(255, 107, 122, 0.10) !important;
  color: #ffd6dc !important;
}

body.changelog-neo-page .changelogFeaturedCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 24px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.88), rgba(3, 10, 15, 0.84)) !important;
  box-shadow:
    0 18px 62px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.changelog-neo-page .changelogFeaturedTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  gap: 22px !important;
  align-items: start !important;
  margin-bottom: 20px !important;
}

body.changelog-neo-page .changelogFeaturedTop h3,
body.changelog-neo-page .changelogTimelineTop h3 {
  margin: 12px 0 0 !important;
  color: #f3f8ff !important;
  font-size: clamp(1.55rem, 2.5vw, 2.2rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

body.changelog-neo-page .changelogFeaturedTop p {
  margin: 10px 0 0 !important;
  color: #9fb0c0 !important;
  font-weight: 700 !important;
}

body.changelog-neo-page .changelogFeaturedMini {
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(2, 9, 13, 0.52) !important;
}

body.changelog-neo-page .changelogFeaturedMini span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogFeaturedMini strong {
  color: #dffcf4 !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
}

body.changelog-neo-page .changelogChipRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.changelog-neo-page .changelogChip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 0.70rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(46, 233, 191, 0.18) !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.09) !important;
}

body.changelog-neo-page .changelogChip.version {
  color: #02110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border-color: rgba(72, 239, 201, 0.34) !important;
}

body.changelog-neo-page .changelogChip.muted {
  color: rgba(234, 243, 249, 0.84) !important;
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.09) !important;
}

body.changelog-neo-page .changelogEntryContent {
  white-space: pre-wrap !important;
  color: rgba(234, 243, 249, 0.88) !important;
  line-height: 1.72 !important;
  font-size: 1rem !important;
}

body.changelog-neo-page .changelogTimelineList {
  display: grid !important;
  gap: 18px !important;
}

body.changelog-neo-page .changelogTimelineEntry {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.changelog-neo-page .changelogTimelineRail {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
}

body.changelog-neo-page .changelogTimelineRail::before {
  content: "" !important;
  position: absolute !important;
  top: 28px !important;
  bottom: -28px !important;
  width: 1px !important;
  background: rgba(46, 233, 191, 0.16) !important;
}

body.changelog-neo-page .changelogTimelineRail span {
  width: 13px !important;
  height: 13px !important;
  margin-top: 22px !important;
  border-radius: 999px !important;
  background: #2ee9bf !important;
  box-shadow: 0 0 18px rgba(46, 233, 191, 0.78) !important;
}

body.changelog-neo-page .changelogTimelineCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.86), rgba(3, 10, 15, 0.82)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.changelog-neo-page .changelogTimelineTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 160px !important;
  gap: 18px !important;
  align-items: start !important;
  margin-bottom: 18px !important;
}

body.changelog-neo-page .changelogDateBlock {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(2,9,13,0.52) !important;
  text-align: right !important;
}

body.changelog-neo-page .changelogDateBlock span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogDateBlock strong {
  color: #f3f8ff !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
}

body.changelog-neo-page .changelogEmptyState,
body.changelog-neo-page .changelogLoadingCard {
  padding: 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(3, 12, 17, 0.72) !important;
  color: rgba(234, 243, 249, 0.86) !important;
  font-weight: 850 !important;
}

@media (max-width: 1080px) {
  body.changelog-neo-page .changelogNeoHeroInner,
  body.changelog-neo-page .changelogFeaturedTop,
  body.changelog-neo-page .changelogTimelineTop {
    grid-template-columns: 1fr !important;
  }

  body.changelog-neo-page .changelogDateBlock {
    text-align: left !important;
  }
}

@media (max-width: 700px) {
  body.changelog-neo-page .changelogNeoHero {
    padding: 26px 22px !important;
  }

  body.changelog-neo-page .changelogNeoHero h1 {
    font-size: clamp(2.5rem, 13vw, 3.7rem) !important;
  }

  body.changelog-neo-page .changelogTimelineEntry {
    grid-template-columns: 1fr !important;
  }

  body.changelog-neo-page .changelogTimelineRail {
    display: none !important;
  }
}

/* =========================================================
   Yggdrasil Hosting — Vitrine DA Changelog V1
   Page changelog publique
   Serveur : vitrine 10.80.0.21
   ========================================================= */

body.changelog-neo-page .changelogNeoMain {
  display: grid !important;
  gap: 24px !important;
}

body.changelog-neo-page .changelogNeoHero {
  padding: clamp(34px, 4vw, 56px) !important;
}

body.changelog-neo-page .changelogNeoHeroInner {
  max-width: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 42px !important;
  align-items: center !important;
}

body.changelog-neo-page .changelogNeoHeroCopy {
  min-width: 0 !important;
}

body.changelog-neo-page .changelogNeoHero h1 {
  max-width: 820px !important;
  margin: 0 0 20px !important;
  font-size: clamp(3.2rem, 6vw, 5.7rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.075em !important;
}

body.changelog-neo-page .changelogNeoHero p {
  max-width: 700px !important;
  color: #9fb0c0 !important;
  line-height: 1.75 !important;
}

body.changelog-neo-page .changelogNeoStats {
  display: grid !important;
  gap: 12px !important;
}

body.changelog-neo-page .changelogNeoStatCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(46, 233, 191, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(4, 17, 22, 0.86), rgba(2, 9, 13, 0.88)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.changelog-neo-page .changelogNeoStatCard span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogNeoStatCard strong {
  display: block !important;
  color: #f3f8ff !important;
  font-size: 1.45rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

body.changelog-neo-page .changelogNeoSpotlight,
body.changelog-neo-page .changelogNeoTimeline {
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 30px !important;
}

body.changelog-neo-page .topStatusBanner {
  margin-bottom: 18px !important;
  padding: 13px 15px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(46, 233, 191, 0.08) !important;
  color: #dffcf4 !important;
  font-weight: 850 !important;
}

body.changelog-neo-page .topStatusBanner.is-error {
  border-color: rgba(255, 107, 122, 0.28) !important;
  background: rgba(255, 107, 122, 0.10) !important;
  color: #ffd6dc !important;
}

body.changelog-neo-page .changelogFeaturedCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 24px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.88), rgba(3, 10, 15, 0.84)) !important;
  box-shadow:
    0 18px 62px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.changelog-neo-page .changelogFeaturedTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 170px !important;
  gap: 22px !important;
  align-items: start !important;
  margin-bottom: 20px !important;
}

body.changelog-neo-page .changelogFeaturedTop h3,
body.changelog-neo-page .changelogTimelineTop h3 {
  margin: 12px 0 0 !important;
  color: #f3f8ff !important;
  font-size: clamp(1.55rem, 2.5vw, 2.2rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

body.changelog-neo-page .changelogFeaturedTop p {
  margin: 10px 0 0 !important;
  color: #9fb0c0 !important;
  font-weight: 700 !important;
}

body.changelog-neo-page .changelogFeaturedMini {
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(2, 9, 13, 0.52) !important;
}

body.changelog-neo-page .changelogFeaturedMini span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogFeaturedMini strong {
  color: #dffcf4 !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
}

body.changelog-neo-page .changelogChipRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.changelog-neo-page .changelogChip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 0.70rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(46, 233, 191, 0.18) !important;
  color: #dffcf4 !important;
  background: rgba(46, 233, 191, 0.09) !important;
}

body.changelog-neo-page .changelogChip.version {
  color: #02110f !important;
  background: linear-gradient(180deg, #48efc9 0%, #1cc9a4 100%) !important;
  border-color: rgba(72, 239, 201, 0.34) !important;
}

body.changelog-neo-page .changelogChip.muted {
  color: rgba(234, 243, 249, 0.84) !important;
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.09) !important;
}

body.changelog-neo-page .changelogEntryContent {
  white-space: pre-wrap !important;
  color: rgba(234, 243, 249, 0.88) !important;
  line-height: 1.72 !important;
  font-size: 1rem !important;
}

body.changelog-neo-page .changelogTimelineList {
  display: grid !important;
  gap: 18px !important;
}

body.changelog-neo-page .changelogTimelineEntry {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.changelog-neo-page .changelogTimelineRail {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
}

body.changelog-neo-page .changelogTimelineRail::before {
  content: "" !important;
  position: absolute !important;
  top: 28px !important;
  bottom: -28px !important;
  width: 1px !important;
  background: rgba(46, 233, 191, 0.16) !important;
}

body.changelog-neo-page .changelogTimelineRail span {
  width: 13px !important;
  height: 13px !important;
  margin-top: 22px !important;
  border-radius: 999px !important;
  background: #2ee9bf !important;
  box-shadow: 0 0 18px rgba(46, 233, 191, 0.78) !important;
}

body.changelog-neo-page .changelogTimelineCard {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(46, 233, 191, 0.14) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(46, 233, 191, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(6, 18, 25, 0.86), rgba(3, 10, 15, 0.82)) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.changelog-neo-page .changelogTimelineTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 160px !important;
  gap: 18px !important;
  align-items: start !important;
  margin-bottom: 18px !important;
}

body.changelog-neo-page .changelogDateBlock {
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(2,9,13,0.52) !important;
  text-align: right !important;
}

body.changelog-neo-page .changelogDateBlock span {
  display: block !important;
  margin-bottom: 8px !important;
  color: rgba(159, 176, 192, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.changelog-neo-page .changelogDateBlock strong {
  color: #f3f8ff !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
}

body.changelog-neo-page .changelogEmptyState,
body.changelog-neo-page .changelogLoadingCard {
  padding: 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(46, 233, 191, 0.16) !important;
  background: rgba(3, 12, 17, 0.72) !important;
  color: rgba(234, 243, 249, 0.86) !important;
  font-weight: 850 !important;
}

@media (max-width: 1080px) {
  body.changelog-neo-page .changelogNeoHeroInner,
  body.changelog-neo-page .changelogFeaturedTop,
  body.changelog-neo-page .changelogTimelineTop {
    grid-template-columns: 1fr !important;
  }

  body.changelog-neo-page .changelogDateBlock {
    text-align: left !important;
  }
}

@media (max-width: 700px) {
  body.changelog-neo-page .changelogNeoHero {
    padding: 26px 22px !important;
  }

  body.changelog-neo-page .changelogNeoHero h1 {
    font-size: clamp(2.5rem, 13vw, 3.7rem) !important;
  }

  body.changelog-neo-page .changelogTimelineEntry {
    grid-template-columns: 1fr !important;
  }

  body.changelog-neo-page .changelogTimelineRail {
    display: none !important;
  }
}