:root,
[data-bs-theme=light] {
  --mod-primary-text: #212227;
  --mod-primary-bg: #e7e7e7;
  --bs-primary-rgb: 239, 183, 2;
  --bs-link-color-rgb: #EFB702;
  --bs-primary: #EFB702;
  --bs-primary-text-emphasis: #212227;
  --bs-body-bg: #f7f7f7;
  --bs-primary-bg-subtle: #f7f7f7;
  --bs-heading-color:#212227;
  --bs-danger: #ff5956;
  --bs-border-color-translucent: #DDDDDD;
}
:root .btn:hover,
[data-bs-theme=light] .btn:hover {
  --bs-btn-hover-color: #212227;
  --bs-btn-hover-bg: #d6a502;
  --bs-btn-hover-border-color: #EFB702;
}
:root .card,
[data-bs-theme=light] .card {
  --bs-card-bg: #DDDDDD ;
}
:root .nav-link,
[data-bs-theme=light] .nav-link {
  --bs-nav-link-color: #212227;
  --bs-nav-link-hover-color: #EFB702;
}

[data-bs-theme=dark] {
  --mod-primary-text: #DDDDDD;
  --mod-primary-bg: #212227;
  --bs-primary-rgb: 239, 183, 2;
  --bs-link-color-rgb: #EFB702;
  --bs-primary-text-emphasis: #DDDDDD;
  --bs-body-bg: #2E2E34;
  --bs-primary-bg-subtle: #2E2E34;
  --bs-heading-color:#DDDDDD;
  --bs-danger: #ff5956;
  --bs-border-color-translucent: #212227;
}
[data-bs-theme=dark] .btn:hover {
  --bs-btn-hover-color: #212227;
  --bs-btn-hover-bg: #d6a502;
  --bs-btn-hover-border-color: #EFB702;
}
[data-bs-theme=dark] .btn-primary {
  --bs-primary-color-contrast: #212227;
}
[data-bs-theme=dark] .card {
  --bs-card-bg: #212227 ;
}
[data-bs-theme=dark] .nav-link {
  --bs-nav-link-color: #DDDDDD;
  --bs-nav-link-hover-color: #EFB702;
}

/* BASE CSS
 * --------------------------------------- */
body {
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  font-family: "Rubik", sans-serif;
}

body ::selection {
  background: var(--bs-primary);
  color: var(--mod-primary-bg);
}

header {
  margin-bottom: 100px;
}

header li {
  list-style: none;
}

h1 {
  position: relative;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: var(--bs-primary);
  text-transform: uppercase;
  margin-bottom: 80px;
}
h1:after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: table;
  width: 40px;
  height: 5px;
  border-radius: 2px;
  background-color: var(--bs-primary-text-emphasis);
  content: "";
}

::-webkit-scrollbar {
  width: 7px; /* for vertical scrollbars */
  height: 7px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: var(--mod-primary-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  height: 30px;
}

/* Conteneur du loader */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(29, 29, 29, 0.89); /* Fond très discret */
  display: flex;
  flex-direction: column; /* Empile les éléments verticalement */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

/* Animation du loader */
.loader {
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  border-top: 3px solid #FFD700; /* Jaune doré */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px; /* Espacement entre le loader et le texte */
}

/* Texte de bienvenue */
.loader-text {
  font-size: 18px;
  font-weight: bold;
  color: #FFD700; /* Jaune doré */
  font-family: Arial, sans-serif;
  text-align: center;
}

/* Animation de rotation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Cacher le loader après chargement */
.loader-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ==============================
   Table
=============================== */
.table {
  overflow: auto;
}

table,
.table {
  width: 100%;
  min-width: auto;
  text-align: start;
  margin: 0;
  border-spacing: 0;
  padding: 5px;
  background-color: var(--bs-primary);
  border-collapse: collapse;
  color: #DDDDDD;
  border-radius: 0;
  border: none;
  font-weight: bold;
}
table thead,
.table thead {
  color: #212227;
  text-transform: uppercase;
}
table thead th,
.table thead th {
  width: 20%;
  padding: 16px;
  text-align: start;
  border-bottom: none !important;
  font-weight: bold;
  color: #212227 !important;
  background-color: #EFB702 !important;
}
table tbody,
.table tbody {
  background-color: #212227;
}
table tbody td,
.table tbody td {
  padding: 10px;
}

.breadcrumb {
  background-color: #212227;
}

.header-nav {
  position: relative;
  z-index: 40;
  height: 100vh;
  background-position: center;
  background-size: cover;
}
.header-nav:after {
  background-color: var(--bs-primary-bg-subtle);
  position: absolute;
  z-index: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  display: table;
  clear: both;
}
.header-nav .navigation {
  position: relative;
  z-index: 100;
  height: 78px;
  line-height: 78px;
  /* box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15); */
}
.navbar-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 120px;
  z-index: 101;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}
.navbar-logo:hover {
  transform: translateX(-50%) scale(1.05);
}

.header-nav-left {
  float: left;
  display: flex;
}
.header-nav-left .active:after {
  position: absolute;
  top: 0;
  width: 110%;
  left: -5%;
  height: 5px;
  background-color: var(--bs-primary);
  content: "";
}
.header-nav-left .nav-link {
  padding: 0;
  color: var(--bs-primary-text-emphasis);
}
.header-nav-left .nav-link:focus {
  color: #a37d01;
}
.header-nav-left .dropdown-menu {
  z-index: 999;
  line-height: initial;
  background-color: var(--bs-primary-bg-subtle);
}
.header-nav-left .dropdown {
  margin-left: 15px;
  font-size: 18px;
  transition: color 0.3s ease-in-out;
  color: var(--bs-primary-text-emphasis);
  text-transform: uppercase;
}
.header-nav-left .dropdown .active {
  color: var(--bs-primary) !important;
  border-left: 3px solid var(--bs-primary);
}
.header-nav-left .dropdown .active:after {
  display: none !important;
}
.header-nav-left .dropdown a:hover, .header-nav-left .dropdown:hover {
  color: var(--bs-primary);
}
.header-nav-left .dropdown .dropdown-item {
  color: var(--bs-primary-text-emphasis);
  background-color: transparent !important;
}
.header-nav-left .dropdown .dropdown-item .active {
  background-color: transparent !important;
  color: var(--bs-primary) !important;
}
.header-nav-left .dropdown .dropdown-item .active:after {
  display: none !important;
}
.header-nav-left .dropdown .dropdown-toggle::after {
  border-top: 0.3em solid var(--bs-primary);
}
.header-nav-left .item {
  position: relative;
}
.header-nav-left .item a {
  font-size: 18px;
  text-transform: uppercase;
  color: var(--bs-primary-text-emphasis);
}
.header-nav-left .item a:after {
  position: absolute;
  top: 0;
  width: 110%;
  left: -5%;
  height: 5px;
  background-color: var(--bs-primary);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease-in-out;
}
.header-nav-left .item a:hover:after {
  transform: none;
}
.header-nav-left .item:not(:first-child) {
  margin-left: 15px;
}
.header-nav-right {
  float: right;
  position: relative;
  display: flex;
}
.header-nav-right .nav-link {
  padding: 0;
}
.header-nav-right .dropdown-menu {
  z-index: 999;
  line-height: initial;
  background-color: var(--bs-primary-bg-subtle);
}
.header-nav-right .item {
  margin-left: 15px;
  font-size: 18px;
  text-transform: uppercase;
  transition: color 0.3s ease-in-out;
  color: var(--bs-primary-text-emphasis);
}
.header-nav-right .item a {
  color: var(--bs-primary-text-emphasis);
}
.header-nav-right .item a:hover, .header-nav-right .item:hover {
  color: var(--bs-primary);
  background-color: transparent;
}
.header-nav-right .item .dropdown-toggle::after {
  border-top: 0.3em solid var(--bs-primary);
}
.header-nav .header-content {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: calc(100vh - 78px);
}
@media screen and (max-width: 1200px) {
  .header-nav .header-content {
    height: 100vh;
  }
}
@media screen and (max-width: 848px) {
  .header-nav .header-content {
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
}
.header-nav .header-content:after {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100vw;
  height: 900px;
  content: "";
  display: table;
  clear: both;
  background-image: url(../img/header_shape.svg);
  background-position: center;
  background-position-y: 0px;
  background-size: cover;
  pointer-events: none;
}
.header-nav .header-content .background-brand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.header-nav .header-content .background-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowZoom 30s infinite alternate;
}
.header-nav .header-content .background-brand:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
}
/* Button and link animations */
.btn, 
.nav-link,
.dropdown-item {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

html {
  scroll-behavior: smooth;
}
.shop-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: scaleY(0.9);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes slowZoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1.0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Footer modifications */
.footer .about {
  text-align: center;
}

.shop-button {
  display: inline-block;
  padding: 12px 30px;
  background: var(--bs-primary);
  color: var(--mod-primary-text);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: 20px;
  transition: all 0.3s ease;
}
.header-nav .header-content .description {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  z-index: 2;
  animation: fadeInUp 0.8s ease-out;
}

.header-nav .header-content .description img {
  height: auto;
  max-width: 52.5rem;
  object-fit: contain;
  transition: transform 0.4s ease;
  transform: scale(1.06);
}
.header-nav .header-content .description img:hover {
  transform: scale(1.09);
}
[data-bs-theme="light"] .hero-box {
  background: rgba(255, 255, 255, 0.1); /* Fond transparent blanc */
}
[data-bs-theme="dark"] .hero-box {
  background: rgba(0, 0, 0, 0.1); /* Fond transparent noir */
}

.hero-boxes {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center; /* Changé de space-between à center */
  align-items: center;
  padding: 0 5rem;
  z-index: 3;
  gap: 40rem; /* Espace entre les boxes */
}

.hero-box {
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  color: var(--bs-primary-text-emphasis);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex: 1;
  max-width: 300px;
}

.copy-notification {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.copy-notification.show {
  opacity: 1;
}

.hero-box:hover {
  transform: translateY(-5px);
  border-color: var(--bs-primary);
}

.hero-box i {
  font-size: 2.5rem;
  color: var(--bs-primary);
  margin-bottom: 1rem;
}

.hero-box .text {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.hero-box .subtext {
  font-size: 0.9rem;
  opacity: 0.8;
}

.description {
  flex: 2;
  text-align: center;
}
.header-nav .header-content .description h1 {
  color: var(--bs-primary);
  font-weight: bold;
  font-size: 35px;
  margin-bottom: 40px;
}
.header-nav .header-content .description p {
  font-weight: bold;
  text-align: center;
  max-width: 535px;
  font-size: 23px;
  color: var(--bs-primary-text-emphasis);
}
@media screen and (max-width: 848px) {
  .header-nav .header-content .description p {
    font-size: 17px;
  }
}

/* Animation existante à conserver */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.small-header {
  position: relative;
  z-index: 40;
  height: 70vh;
  background-position: center;
  background-size: cover;
}
.small-header:after {
  background-color: var(--mod-primary-bg);
  position: absolute;
  z-index: 0;
  top: 0;
  width: 100vw;
  height: 70vh;
  content: "";
  display: table;
  clear: both;
}
.small-header .navigation {
  position: relative;
  z-index: 100;
  height: 78px;
  line-height: 78px;
}
#notificationsDropdown::after {
  display: none;
}
.small-header .header-content {
  height: calc(70vh - 78px);
}
.small-header .header-content .background-brand img {
  width: 100%;
  height: calc(70vh - 78px);
  background-size: cover;
  object-fit: cover;
}
@media screen and (max-width: 1100px) {
  .small-header .header-content {
    height: 70vh;
  }
  .small-header .header-content .background-brand img {
    height: 70vh;
  }
}


.header-mobile-nav {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  background-color: transparent;
  height: 60px;
  width: 100%;
}
/* Menu mobile : voir « Menu mobile » plus bas (panneau sous la barre, lignes tactiles, accordéons) */

a {
  text-decoration: none;
}

.footer {
  position: relative;
  margin-top: 480px;
}
.footer .top-footer {
  background-color: var(--mod-primary-bg);
  padding: 65px 10px;
}
.footer .top-footer:after {
  position: absolute;
  z-index: -1;
  top: -400px;
  left: 0;
  width: 100vw;
  height: 400px;
  content: "";
  display: table;
  clear: both;
  background-image: url(../img/footer_shape.svg);
  background-position: center;
  background-position-y: 0px;
  background-size: cover;
}
.footer .top-footer-content {
  position: relative;
}
.footer .top-footer .footer-title {
  position: relative;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.footer .top-footer .footer-title:after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: table;
  width: 25px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--bs-primary-text-emphasis);
  content: "";
}
.footer .top-footer .about p {
  color: var(--bs-primary-text-emphasis);
  text-align: justify;
}
.footer .top-footer .socials {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  margin-top: 25px;
  text-align: center;
}
@media screen and (max-width: 885px) {
  .footer .top-footer .socials {
    margin-top: 40px;
    margin-bottom: 40px;
    float: right;
  }
}
.footer .top-footer .socials .social-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.footer .top-footer .socials .social-links i {
  font-size: 35px;
  color: var(--bs-primary);
  transition: all 0.3s ease-in-out;
}
.footer .top-footer .socials .social-links a {
  display: inline-block;
  margin-top: 5px;
  margin-left: 7px;
  margin-right: 7px;
  transition: all 0.3s ease-in-out;
  font-size: 14px;
  font-weight: bold;
}
.footer .top-footer .socials .social-links a:hover {
  transform: translate3d(0, -5px, 0);
}
.footer .top-footer .links a {
  text-align: center;
  display: block;
  margin-bottom: 5px;
  color: var(--bs-primary);
  transition: letter-spacing 0.3s ease-in-out;
}
.footer .top-footer .links a:hover {
  letter-spacing: 1px;
}
.footer .copyright {
  background-color: var(--bs-primary);
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: var(--mod-primary-bg);
}
.footer .copyright p {
  font-size: 16px;
}
.footer .copyright span {
  color: #383a43;
  font-weight: bold;
}
.footer .copyright a[href="https://azuriom.com"] {
  color: #383a43;
  font-weight: bold;
}
.footer .copyright .mention {
  color: var(--mod-primary-bg);
  font-size: 10px;
}

@media screen and (max-width: 1200px) {
  .header-nav .navigation {
    display: none;
  }
  .header-mobile-nav {
    display: block;
  }
  .hero-box {
    display: none !important;
  }
  
  .hero-boxes {
    padding: 0 1rem;
    gap: 0;
  }
  
  .hero-boxes .description {
    display: block; /* Garde le logo visible */
  }
  
  .navbar-logo {
    display: block !important;
    position: relative !important;
    height: auto !important;
    width: 80% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    filter: none !important;
    animation: fadeInDown 0.8s ease-out;
  }
  
  .header-nav .header-content .description {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .header-nav .header-content .description img {
    max-width: 90vw;
    transform: none;
  }
}
textarea {
  background-color: var(--bs-primary-bg-subtle) !important;
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary-text-emphasis) !important;
  outline: 0 !important;
}
textarea:focus {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border-color: var(--bs-primary) !important;
}

input {
  background-color: var(--bs-primary-bg-subtle) !important;
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary-text-emphasis) !important;
  outline: 0 !important;
}
input:focus {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border-color: var(--bs-primary) !important;
}

select {
  background-color: var(--bs-primary-bg-subtle) !important;
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary-text-emphasis) !important;
  outline: 0 !important;
}
select:focus {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis) !important;
  border-color: var(--bs-primary) !important;
}

.badge-success, .badge-primary, .badge-secondary, .badge-warning, .badge-info, .badge-danger,
.btn-success, .btn-primary, .btn-secondary, .btn-warning, .btn-info, .btn-danger {
  font-weight: bold;
}

.btn-danger {
  background-color: #ff5956;
  color: var(--bs-primary-text-emphasis);
}
.btn-danger:hover {
  background-color: #ff403d;
  color: var(--bs-primary-text-emphasis);
}

.page-container-content img {
  height: 275px;
  object-fit: cover;
}

.shop-sidebar {
  background-color: rgba(33, 34, 39, 0.4);
  border: 3px solid #212227;
  padding: 25px 10px;
}
.shop-sidebar .login {
  color: #EFB702;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.shop-sidebar .top-user-info {
  text-align: center;
}
.shop-sidebar .top-user-info img {
  width: 70px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.shop-sidebar .top-user-info h3 {
  font-weight: bold;
  font-size: 22px;
}
.shop-sidebar .top-user-info p {
  font-size: 18px;
}
.shop-sidebar .top-user-info i {
  font-size: 16px;
  color: #F4DF4C;
}
.shop-sidebar .top-user-info a {
  color: #EFB702;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
  font-size: 20px;
}
.shop-sidebar .categories a {
  background-color: rgba(33, 34, 39, 0.8);
  padding: 10px 25px;
  font-size: 18px;
  text-transform: uppercase;
  color: #EFB702;
  border-radius: 0px;
  border: none;
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.shop-sidebar .categories a:hover {
  color: #212227;
  background-color: #EFB702;
}
.shop-sidebar .categories .category {
  background-color: rgba(33, 34, 39, 0.8);
  padding: 10px 25px;
  font-size: 18px;
  text-transform: uppercase;
  color: #EFB702;
  border-radius: 0px;
  border: none;
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.shop-sidebar .categories .category:hover {
  color: #212227;
  background-color: #EFB702;
}
.shop-sidebar .categories .sub-category {
  margin-left: 10px !important;
  background-color: rgba(33, 34, 39, 0.8);
  padding: 10px 25px;
  font-size: 18px;
  text-transform: uppercase;
  color: #EFB702;
  border-radius: 0px;
  border: none;
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  border-left: 4px solid #EFB702;
}
.shop-sidebar .categories .sub-category:hover {
  color: #212227;
  background-color: #EFB702;
}
.shop-sidebar .categories .active {
  color: #212227;
  background-color: #EFB702;
}

#shop .card {
  border-radius: 5px;
  border: 3px solid #EFB702;
  text-align: center;
  background-color: transparent;
}
#shop .card .card-body {
  background-color: transparent;
}
#shop .card img {
  width: 80%;
  height: auto;
  margin: 10%;
}
#shop .card h4 {
  margin-bottom: 5px;
}
#shop .card h5 {
  margin-bottom: 10px;
}
#shop .card .btn {
  padding: 10px 25px;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 0px;
  border: none;
  margin: 5px 0;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

[data-bs-theme=light] .header-nav .header-content:after {
  background-image: url(../img/header_shape_light.svg);
}
[data-bs-theme=light] .footer .top-footer:after {
  background-image: url(../img/footer_shape_light.svg);
}

/*# sourceMappingURL=style.css.map */

/* ==========================================================================
   Refonte 2026 : bandeau d'accueil, boutons, preuve sociale, bouton Discord
   ========================================================================== */
.sh-hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 1rem 9rem;
  text-align: center;
}
.sh-hero-logo {
  width: min(380px, 60vw);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
  animation: fadeInUp .8s ease-out;
}
.sh-hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.sh-hero-subtitle {
  max-width: 38rem;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.sh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}
.sh-btn-ip,
.sh-btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: .75rem 1.75rem;
  border: 0;
  border-radius: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sh-btn-ip {
  flex-direction: column;
  gap: .1rem;
  min-width: 16rem;
  background: var(--bs-primary);
  color: #212227;
  box-shadow: 0 10px 30px rgba(239, 183, 2, .35);
  cursor: pointer;
}
.sh-btn-ip:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(239, 183, 2, .5); }
.sh-btn-ip.copied { background: #3ccf6e; box-shadow: 0 10px 30px rgba(60, 207, 110, .4); }
.sh-btn-ip-address { font-size: 1.35rem; letter-spacing: .02em; }
.sh-btn-ip-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.sh-btn-discord {
  gap: .6rem;
  background: #5865F2;
  color: #fff !important;
  font-size: 1.1rem;
  box-shadow: 0 10px 30px rgba(88, 101, 242, .35);
}
.sh-btn-discord:hover { background: #4752c4; transform: translateY(-2px); }
.sh-btn-ip:focus-visible,
.sh-btn-discord:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sh-hero-help {
  margin: 0;
  padding: .5rem 1rem;
  border-radius: .6rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .95rem;
}
.sh-hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.5rem;
  margin: .5rem 0 0;
  padding: .6rem 1.4rem;
  list-style: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .95rem;
}
.sh-hero-proof i { margin-right: .4rem; color: var(--bs-primary); }
.sh-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: #3ccf6e;
  vertical-align: middle;
  animation: sh-pulse 2s infinite;
}
@keyframes sh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(60, 207, 110, .6); }
  70% { box-shadow: 0 0 0 .5rem rgba(60, 207, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 207, 110, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-dot, .sh-hero-logo { animation: none; }
}
@media screen and (max-width: 848px) {
  .sh-hero { gap: .75rem; padding: 4.5rem 1rem 6rem; }
  .sh-hero-logo { width: min(220px, 55vw); }
  .sh-hero-actions { flex-direction: column; width: 100%; max-width: 22rem; }
  .sh-btn-ip, .sh-btn-discord { width: 100%; min-width: 0; }
  .sh-hero-proof { border-radius: 1rem; font-size: .85rem; }
}
.header-nav-right .item.sh-nav-discord a {
  padding: .35rem .85rem;
  border-radius: .6rem;
  background: #5865F2;
  color: #fff;
}
.header-nav-right .item.sh-nav-discord a:hover { background: #4752c4; color: #fff; }

/* Section Discord de l'accueil : chiffres en direct et ce qu'on y gagne */
.discord-section .discord-stats { margin-top: .75rem; color: rgba(255, 255, 255, .85); }
.discord-section .discord-stats strong { color: #fff; }
.discord-section .discord-perks {
  display: grid;
  gap: .6rem;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.discord-section .discord-perks li { display: flex; gap: .6rem; align-items: baseline; }
.discord-section .discord-perks i { color: #5865F2; }

/* Page de vote : surimpression pendant la vérification (règles de la vue officielle, perdues par la surcharge) */
#vote-card .spinner-parent { display: none; }
#vote-card.voting .spinner-parent {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: inherit;
  background: rgba(20, 20, 24, .88);
}
.sh-vote-checking { max-width: 26rem; margin: 0; color: #fff; text-align: center; }

/* Page de vote : progression, bouton « site suivant », écran final */
.sh-vote-flow { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.sh-vote-flow [hidden] { display: none !important; }
.sh-vote-me { margin: 0; text-align: center; }
.sh-vote-me a { margin-left: .6rem; font-size: .85rem; }
.sh-vote-progress { width: 100%; max-width: 30rem; text-align: center; }
.sh-vote-progress .progress { height: .6rem; margin-top: .4rem; background: rgba(255, 255, 255, .12); }
.sh-vote-progress .progress-bar { width: 0; background: var(--bs-primary); transition: width .4s ease; }
.sh-vote-next {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 2rem;
  border-radius: .9rem;
  background: var(--bs-primary);
  color: #212227;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(239, 183, 2, .3);
}
.sh-vote-next:hover { background: #d6a502; color: #212227; }
.vote-site-card.sh-next { outline: 2px solid var(--bs-primary); outline-offset: 4px; border-radius: 1rem; }
.sh-vote-all-done {
  max-width: 34rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(60, 207, 110, .5);
  border-radius: .9rem;
  background: rgba(60, 207, 110, .12);
  text-align: center;
}
.sh-vote-all-done i { margin-right: .4rem; color: #3ccf6e; }
.sh-vote-hint { max-width: 34rem; margin: 0; font-size: .9rem; text-align: center; opacity: .75; }

/* Pages intérieures (vote, boutique, profil…) : bandeau compact, le contenu est visible sans défiler */
.small-header,
.small-header:after { height: 378px; }
.small-header .header-content { height: 300px; }
.small-header .header-content:after { display: none; }
.small-header .header-content .description { top: 50%; }
.small-header .header-content .description img { max-width: 15rem; transform: none; }
.small-header .header-content .description img:hover { transform: scale(1.03); }
.small-header .hero-boxes { gap: 18rem; }
.small-header .hero-box { padding: 1.25rem 1.5rem; }
.small-header .hero-box i { margin-bottom: .5rem; font-size: 2rem; }
.small-header .go-to-button { display: none; }
@media screen and (max-width: 1200px) {
  .small-header .header-content { height: 300px; }
}
@media screen and (max-width: 848px) {
  .small-header,
  .small-header:after { height: 240px; }
  .small-header .header-content { top: 0; height: 240px; transform: none; }
  .small-header .hero-boxes .hero-box { display: none; }
  .small-header .header-content .description img { max-width: 11rem; }
}

/* Boutique : packs de tokens (le pack d'abord, le moyen de paiement ensuite) */
.sh-offers-grid { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 1rem 0 2rem; }
.sh-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 2rem 1.25rem 1.25rem;
  border: 2px solid rgba(239, 183, 2, .35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
  text-align: center;
}
.sh-offer.is-popular { border-color: var(--bs-primary); box-shadow: 0 10px 30px rgba(239, 183, 2, .18); }
.sh-offer.is-enough { border-color: #3ccf6e; box-shadow: 0 10px 30px rgba(60, 207, 110, .2); }
.sh-offer-ribbon {
  position: absolute;
  top: -.8rem;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: #212227;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}
.sh-ribbon-value { background: #fff; }
.sh-ribbon-enough { background: #3ccf6e; }
.sh-offer-amount { color: #fff; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.sh-offer-amount small { font-size: .9rem; font-weight: 400; opacity: .8; }
.sh-offer-bonus { min-height: 1.4em; color: #3ccf6e; font-size: .9rem; font-weight: 600; }
.sh-offer-price { margin-bottom: .5rem; color: var(--bs-primary); font-size: 1.2rem; font-weight: 700; }
.sh-offer-pay { display: grid; gap: .5rem; width: 100%; margin-top: auto; }
.sh-offer-pay form { margin: 0; }
.sh-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 600;
}
.sh-pay-btn:hover { border-color: var(--bs-primary); background: var(--bs-primary); color: #212227; }
.sh-offers-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .05);
}
.sh-offers-alt img { max-height: 36px; }
.sh-offers-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.sh-offers-trust i { margin-right: .4rem; color: var(--bs-primary); }
.sh-offers-legal { opacity: .7; }
.sh-offers-missing { max-width: 46rem; margin: 0 auto 1.5rem; }

/* Boutique : badges, tokens manquants, achat immédiat, connexion, article à finaliser */
.shop-package { position: relative; }
.sh-package-badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem; }
.sh-badge { padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.sh-badge-popular { background: var(--bs-primary); color: #212227; }
.sh-badge-saving { background: #3ccf6e; color: #10301b; }
.sh-missing,
.sh-guest { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.sh-buy-now { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.sh-buy-now-confirm { text-align: right; }
.sh-buy-now [hidden],
.sh-pending[hidden] { display: none !important; }
.sh-login-hint { margin-bottom: 1rem; opacity: .9; }
.sh-pending { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border: 1px solid #3ccf6e; background: rgba(60, 207, 110, .12); }
.sh-pending .btn-close { margin-left: auto; }

/* ==========================================================================
   Refonte v2 (28/10) : logo, bulle « IP copiée », toasts, bandeau des pages intérieures, accueil
   ========================================================================== */

/* Logo de l'accueil : apparition sur place (l'ancien fadeInUp contenait translate(-50%, …)) et survol vivant.
   « backwards » : une fois l'animation finie, la transformation au survol reprend la main. */
/* Mouvement seul, sans fondu : un fondu depuis l'opacité 0 retarde le LCP (le logo) de toute sa durée. */
.sh-hero-logo {
  animation: sh-hero-in .8s cubic-bezier(.2, .8, .2, 1) backwards;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}
.sh-hero-logo:hover { transform: translateY(-6px) scale(1.04) rotate(-1deg); filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .55)); }
@keyframes sh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sh-hero-in { from { transform: translateY(18px) scale(.96); } to { transform: none; } }

/* Bulle « IP copiée » : flotte sous le bouton, n'occupe aucune place dans la page */
.sh-copy { position: relative; display: inline-flex; }
.sh-copy-tip {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(22rem, 90vw);
  padding: .6rem .9rem;
  border-radius: .7rem;
  background: #fff;
  color: #212227;
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.sh-copy-tip::before {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.sh-copy-tip.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Toasts (#status-message) : fixés à l'écran, entrée et sortie animées, aucun décalage de la page */
#status-message {
  position: fixed;
  top: 92px;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}
#status-message:empty { display: none; }
#status-message .alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  padding: .9rem 2.75rem .9rem 1rem;
  border: 0;
  border-left: 4px solid #3ccf6e;
  border-radius: .8rem;
  background: rgba(28, 29, 34, .97);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  pointer-events: auto;
  cursor: pointer;
  animation: sh-toast-in .35s cubic-bezier(.2, .8, .2, 1);
}
#status-message .alert-danger { border-left-color: #ff5956; }
#status-message .alert-warning { border-left-color: #EFB702; }
#status-message .alert-info { border-left-color: #5865F2; }
#status-message .alert i { margin-top: .15rem; }
#status-message .alert-success i { color: #3ccf6e; }
#status-message .alert-danger i { color: #ff5956; }
#status-message .alert .btn-close { position: absolute; top: .85rem; right: .85rem; padding: .25rem; filter: invert(1); opacity: .6; }
#status-message .alert.sh-toast-out { animation: sh-toast-out .3s ease forwards; }
@keyframes sh-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sh-toast-out { to { opacity: 0; transform: translateX(18px); } }
@media screen and (max-width: 848px) {
  #status-message { top: auto; right: 1rem; bottom: 1rem; left: 1rem; width: auto; }
}

/* Bandeau des pages intérieures : logo + pastilles (copier l'IP, Discord) */
.sh-subhero {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
}
.sh-subhero-logo img {
  width: min(170px, 38vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.sh-subhero-logo:hover img { transform: translateY(-4px) scale(1.05) rotate(-1deg); }
.sh-subhero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(14, 14, 18, .62);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.sh-chip:hover { transform: translateY(-2px); border-color: var(--bs-primary); color: #fff; }
.sh-chip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sh-chip-ip .sh-btn-ip-address { color: var(--bs-primary); font-size: 1rem; letter-spacing: 0; }
.sh-chip-sep { width: 1px; height: 1.1rem; background: rgba(255, 255, 255, .25); }
.sh-chip.copied { border-color: #3ccf6e; background: rgba(60, 207, 110, .25); }
.sh-chip-discord { border-color: #5865F2; background: #5865F2; }
.sh-chip-discord:hover { border-color: #4752c4; background: #4752c4; }
.sh-chip-muted { font-size: .85rem; font-weight: 400; opacity: .85; }
@media screen and (max-width: 848px) {
  .small-header,
  .small-header:after { height: 290px; }
  .small-header .header-content { height: 290px; }
  .sh-subhero { gap: .75rem; padding-top: 3.5rem; }
  .sh-subhero-logo img { width: 110px; }
  .sh-chip { padding: .4rem .9rem; font-size: .9rem; }
}

/* Accueil : sections rythmées */
.sh-section { padding: 4.5rem 0 1rem; }
.sh-section + .sh-section { padding-top: 5.5rem; }
.sh-section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.sh-eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: rgba(239, 183, 2, .14);
  color: var(--bs-primary);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sh-section-title { margin: 0 0 .75rem; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; text-transform: none; }
.sh-section-lead { margin: 0; color: rgba(255, 255, 255, .78); font-size: 1.1rem; line-height: 1.6; }
.sh-features { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sh-feature {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .03);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sh-feature:hover { transform: translateY(-4px); border-color: rgba(239, 183, 2, .5); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.sh-feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s ease; }
.sh-feature:hover img { transform: scale(1.05); }
.sh-feature-body { padding: 1.1rem 1.2rem 1.3rem; }
.sh-feature-body h3 { margin: 0 0 .4rem; color: #fff; font-size: 1.1rem; font-weight: 700; }
.sh-feature-body h3 i { margin-right: .35rem; color: var(--bs-primary); }
.sh-feature-body p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .95rem; line-height: 1.5; }
.sh-section-cta { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.5rem; }
.sh-section-cta-note { color: rgba(255, 255, 255, .6); font-size: .9rem; }

/* Trailer : vignette cliquable, le lecteur se charge au clic */
.sh-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.1rem;
  background: #000;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.sh-video img,
.sh-video iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sh-video iframe { position: absolute; inset: 0; }
.sh-video img { transition: transform .6s ease, opacity .3s ease; }
.sh-video:hover img { opacity: .9; transform: scale(1.03); }
.sh-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #212227;
  font-size: 2.6rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.sh-video:hover .sh-video-play { transform: translate(-50%, -50%) scale(1.08); }
.sh-video:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 4px; }

/* Discord : bandeau d'appel, séparé par l'espace et la couleur plutôt que par un titre */
.sh-discord-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 6rem 0 2rem;
  padding: 2.25rem 2.5rem;
  border-radius: 1.4rem;
  background: linear-gradient(135deg, #5865F2 0%, #3c45a5 100%);
  box-shadow: 0 24px 60px rgba(88, 101, 242, .3);
  color: #fff;
}
.sh-discord-band-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 1.2rem; background: rgba(255, 255, 255, .15); font-size: 2.8rem; }
.sh-discord-band-body h2 { margin: 0 0 .35rem; color: #fff; font-size: 1.6rem; font-weight: 700; text-transform: none; }
.sh-discord-band-stats { margin: 0 0 .75rem; color: rgba(255, 255, 255, .9); }
.sh-discord-band-perks { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .92); font-size: .95rem; }
.sh-discord-band-perks i { margin-right: .35rem; }
.sh-discord-band-cta.sh-btn-discord { background: #fff; color: #3c45a5 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.sh-discord-band-cta.sh-btn-discord:hover { background: #f0f1ff; }
@media screen and (max-width: 848px) {
  .sh-discord-band { grid-template-columns: 1fr; justify-items: center; margin-top: 4.5rem; padding: 2rem 1.25rem; text-align: center; }
  .sh-discord-band-perks { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-hero-logo,
  #status-message .alert { animation: none; }
  .sh-feature,
  .sh-feature img,
  .sh-video img,
  .sh-chip,
  .sh-subhero-logo img,
  .sh-copy-tip { transition: none; }
}
/* Titres équilibrés sur plusieurs lignes, et la première section collée au bandeau (il porte déjà l'espace) */
.sh-hero-title,
.sh-section-title,
.sh-discord-band-body h2 { text-wrap: balance; }
.sh-section-lead,
.sh-feature-body p { text-wrap: pretty; }
section.sh-section:first-of-type { padding-top: 0; }

/* Page de vote v2 : en-tête des gains, état par site (vote simultané), classement */
.sh-vote-head { max-width: 60rem; margin: 0 auto 2.5rem; text-align: center; }
.sh-vote-title { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; text-transform: none; text-wrap: balance; }
.sh-vote-title::after { display: none !important; }
.sh-vote-lead { margin: 0 auto 1.75rem; max-width: 36rem; color: rgba(255, 255, 255, .78); font-size: 1.1rem; }
.sh-vote-rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sh-vote-rewards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: 1.1rem .75rem;
  border: 1px solid rgba(239, 183, 2, .25);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(239, 183, 2, .1), rgba(239, 183, 2, .02));
}
.sh-vote-rewards i { margin-bottom: .35rem; color: var(--bs-primary); font-size: 1.6rem; }
.sh-vote-rewards strong { color: #fff; font-size: 1.25rem; }
.sh-vote-rewards span { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.sh-vote-prizes {
  display: inline-block;
  margin: 0;
  padding: .7rem 1.2rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);
  font-size: .95rem;
  text-wrap: balance;
}
.sh-vote-prizes i { margin-right: .35rem; color: var(--bs-primary); }
.sh-vote-prizes strong { color: #fff; }
.sh-vote-prizes span { opacity: .7; }
@media screen and (max-width: 848px) {
  .sh-vote-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* Chaque site porte son état : vérification sur ce site seulement, les autres restent cliquables */
.vote-site-card { position: relative; transition: border-color .25s ease, opacity .25s ease, transform .25s ease; }
.vote-site-card:not(.is-done):not(.is-verifying):hover { transform: translateY(-3px); }
.vote-site-card.is-done { border-color: rgba(60, 207, 110, .55) !important; opacity: .8; }
.vote-site-card.is-verifying::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(16, 16, 20, .55);
  content: "";
  pointer-events: none;
}
.vote-site-card.is-verifying::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: -24px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  content: "";
  animation: sh-spin .8s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-site-state { position: relative; z-index: 4; display: block; min-height: 1.3em; margin-top: .6rem; font-size: .85rem; text-align: center; }
.vote-site-card.is-done .sh-site-state { color: #3ccf6e; }
.vote-site-card.is-done .sh-site-state::before { margin-right: .3rem; content: "\2713"; }
.vote-site-card.is-verifying .sh-site-state { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .vote-site-card.is-verifying::before { animation-duration: 2.4s; }
}

/* Classement : le joueur se retrouve tout de suite */
.ranking-item.is-me,
.podium-item.is-me { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: .8rem; background: rgba(239, 183, 2, .08); }
/* Vérification : petite roue devant le texte plutôt qu'au milieu de la carte (elle masquait le titre) */
.vote-site-card.is-verifying::before { content: none; }
.vote-site-card.is-verifying .sh-site-state::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: .45rem;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  content: "";
  vertical-align: -2px;
  animation: sh-spin .8s linear infinite;
}
/* Classement sur mobile : podium en une rangée compacte au lieu de trois grandes cartes empilées */
@media screen and (max-width: 848px) {
  .podium-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: end; }
  .podium-item { min-width: 0; margin: 0 !important; padding: .75rem .35rem !important; }
  .podium-item .skin-render { width: auto !important; max-height: 110px; }
  .podium-item .crown { font-size: 1.1rem; }
  .podium-item h3 { font-size: .85rem !important; overflow-wrap: anywhere; }
  .podium-item .votes { font-size: .75rem; }
  .podium-item .podium-reward .badge { font-size: .62rem; white-space: normal; }
}
@media screen and (max-width: 848px) {
  .ranking-card .podium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Boutique v2 : en-tête avec solde, onglets de catégories, cartes d'articles, preuve sociale */
.sh-shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin: 0 0 1.5rem; }
.sh-shop-title { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; text-transform: none; }
.sh-shop-title::after { display: none !important; }
.sh-shop-lead { margin: .35rem 0 0; color: rgba(255, 255, 255, .7); }
.sh-shop-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sh-shop-balance { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem; border: 1px solid rgba(239, 183, 2, .4); border-radius: 999px; background: rgba(239, 183, 2, .1); color: #fff; font-weight: 700; }
.sh-shop-balance i { color: var(--bs-primary); }
.sh-shop-topup { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1.1rem; border: 0; border-radius: 999px; background: var(--bs-primary); color: #212227; font-weight: 700; }
.sh-shop-topup:hover { background: #d6a502; color: #212227; }
.sh-shop-cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: #fff; font-size: 1.15rem; transition: border-color .2s ease; }
.sh-shop-cart:hover { border-color: var(--bs-primary); color: #fff; }
.sh-shop-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ff5956; color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.sh-shop-link { color: rgba(255, 255, 255, .75); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.sh-shop-link:hover { color: #fff; }
.sh-shop-tabs { display: flex; gap: .5rem; margin: 0 0 1.75rem; padding: .35rem; overflow-x: auto; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .03); scrollbar-width: none; }
.sh-shop-tabs::-webkit-scrollbar { display: none; }
.sh-shop-tab { flex: 0 0 auto; padding: .55rem 1.1rem; border-radius: 999px; color: rgba(255, 255, 255, .78); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.sh-shop-tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sh-shop-tab.is-active { background: var(--bs-primary); color: #212227; }
.sh-shop-description { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--bs-primary); border-radius: .6rem; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); }
.sh-shop-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sh-pkg { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1rem; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sh-pkg:hover { transform: translateY(-4px); border-color: rgba(239, 183, 2, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.sh-pkg.is-popular { border-color: rgba(239, 183, 2, .45); }
.sh-pkg-media { display: grid; place-items: center; height: 180px; padding: 1rem; border: 0; background: radial-gradient(circle at 50% 60%, rgba(239, 183, 2, .16), transparent 65%); cursor: pointer; }
.sh-pkg-media img { max-width: 100%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: transform .35s ease; }
.sh-pkg:hover .sh-pkg-media img { transform: scale(1.06) translateY(-3px); }
.sh-pkg-media .bi { color: rgba(255, 255, 255, .3); font-size: 3rem; }
.sh-pkg-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 0 1.1rem 1.1rem; }
.sh-pkg-name { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 700; }
.sh-pkg-desc { margin: 0; color: rgba(255, 255, 255, .65); font-size: .9rem; }
.sh-pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.sh-pkg-price { display: flex; flex-direction: column; line-height: 1.15; }
.sh-pkg-price del { color: rgba(255, 255, 255, .45); font-size: .85rem; }
.sh-pkg-price strong { color: var(--bs-primary); font-size: 1.2rem; }
.sh-pkg-cta { min-height: 40px; padding: .4rem 1rem; border: 1px solid var(--bs-primary); border-radius: .7rem; background: transparent; color: var(--bs-primary); font-weight: 700; }
.sh-pkg-cta:hover { background: var(--bs-primary); color: #212227; }
.sh-pkg-media:focus-visible,
.sh-pkg-cta:focus-visible,
.sh-shop-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sh-shop-empty { grid-column: 1 / -1; padding: 3rem 1rem; color: rgba(255, 255, 255, .6); text-align: center; }
.sh-shop-empty i { font-size: 2.5rem; }
.sh-shop-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; margin: 3rem 0 1rem; padding: 1.1rem 1.4rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .03); }
.sh-proof-top { display: flex; align-items: center; gap: .8rem; }
.sh-proof-top img { border-radius: .6rem; image-rendering: pixelated; }
.sh-proof-top span,
.sh-proof-label { display: block; color: rgba(255, 255, 255, .6); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.sh-proof-top strong { color: var(--bs-primary); font-size: 1.1rem; }
.sh-proof-recent { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.sh-proof-recent ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sh-proof-recent li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .3rem; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); font-size: .85rem; }
.sh-proof-recent img { border-radius: 50%; }
@media screen and (max-width: 848px) {
  .sh-shop-head { align-items: flex-start; }
  .sh-shop-tabs { border-radius: .9rem; }
  .sh-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .sh-pkg-media { height: 130px; }
  .sh-pkg-media img { max-height: 105px; }
  .sh-pkg-body { padding: 0 .8rem .9rem; }
  .sh-pkg-name { font-size: .95rem; }
  .sh-pkg-foot { flex-direction: column; align-items: stretch; }
  .sh-pkg-cta { width: 100%; }
}

/* Fenêtres article et connexion : cartes sombres cohérentes avec le reste */
#itemModal .modal-content,
#shLoginModal .modal-content { border: 1px solid rgba(239, 183, 2, .35); border-radius: 1.1rem; background: #1f2024; color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#itemModal .modal-header,
#shLoginModal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
#itemModal .modal-footer,
#shLoginModal .modal-footer { flex-wrap: wrap; gap: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); }
#itemModal .modal-title { color: var(--bs-primary); font-weight: 700; }
#itemModal .modal-body img { max-width: 100%; height: auto; }
#itemModal .btn-close,
#shLoginModal .btn-close { filter: invert(1); }
#shLoginModal .form-control { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; }
#shLoginModal .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(239, 183, 2, .25); }
.sh-shop-head-text,
.sh-shop-title { text-align: left; }
/* Cartes : la courte description reste dans la fenêtre article (elle est identique sur plusieurs clés),
   prix sur une ligne, et des cartes assez larges pour le prix et le bouton côte à côte */
.sh-shop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sh-pkg-desc { display: none; }
.sh-pkg-price strong,
.sh-pkg-price del { white-space: nowrap; }
@media screen and (max-width: 848px) {
  .sh-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Retours v3 : survol du bouton Discord, vidéo YouTube standard, icône d'Opale, carte Discord, bandeau intérieur */
.header-nav-right .item.sh-nav-discord a { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.header-nav-right .item.sh-nav-discord a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(88, 101, 242, .5); }
.header-nav-right .item.sh-nav-discord a i { display: inline-block; }
.header-nav-right .item.sh-nav-discord a:hover i { animation: sh-wiggle .5s ease; }
@keyframes sh-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
div.sh-video { cursor: auto; }
.sh-section-icon { display: block; width: 88px; height: auto; margin: 0 auto 1rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); animation: sh-float 4s ease-in-out infinite; }
@keyframes sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.discord-section { display: flex; justify-content: center; margin: 6rem 0 2rem; }
.discord-card {
  position: relative;
  width: min(100%, 40rem);
  padding: 3rem 2rem 2.5rem;
  overflow: hidden;
  border: 2px solid #5865F2;
  border-radius: 1.4rem;
  background: #2b2d31;
  box-shadow: 0 20px 50px rgba(88, 101, 242, .18);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.discord-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(88, 101, 242, .3); }
.discord-icon { position: relative; display: inline-grid; place-items: center; width: 96px; height: 96px; margin-bottom: 1rem; }
.discord-logo { position: relative; z-index: 1; color: #5865F2; font-size: 4rem; }
.pulse-effect { position: absolute; inset: 0; border-radius: 50%; background: rgba(88, 101, 242, .25); animation: sh-discord-pulse 2.2s ease-out infinite; }
@keyframes sh-discord-pulse { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.6); } }
.discord-title { margin: 0; color: #fff; font-size: 2rem; font-weight: 600; text-transform: none; text-wrap: balance; }
.discord-section .discord-stats { margin: .75rem 0 1.5rem; }
.discord-btn { display: inline-flex; align-items: center; margin-top: 1.75rem; padding: .85rem 2rem; border-radius: 999px; background: #5865F2; color: #fff; font-weight: 600; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.discord-btn:hover { background: #4752c4; color: #fff; transform: translateY(-2px); }
.small-header,
.small-header:after { height: 300px; }
.small-header .header-content { height: 222px; }
@media screen and (max-width: 848px) {
  .small-header,
  .small-header:after { height: 250px; }
  .small-header .header-content { height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-section-icon,
  .pulse-effect,
  .header-nav-right .item.sh-nav-discord a:hover i { animation: none; }
}

/* Boutique v3 : colonne de gauche (meilleur donateur, derniers achats), 3 articles par ligne, bouton « Vos paiements » */
.sh-shop-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.sh-shop-layout > .sh-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-shop-aside { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.sh-aside-card { padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .03); }
.sh-recent-list { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.sh-recent-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; align-items: center; }
.sh-recent-list img { grid-row: 1 / 3; border-radius: .5rem; image-rendering: pixelated; }
.sh-recent-name { overflow: hidden; color: #fff; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sh-recent-list time { color: rgba(255, 255, 255, .55); font-size: .78rem; }
.sh-shop-secondary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1.1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.sh-shop-secondary:hover { transform: translateY(-2px); border-color: var(--bs-primary); background: rgba(239, 183, 2, .08); color: #fff; }
.sh-shop-secondary i { color: var(--bs-primary); }
@media screen and (max-width: 1200px) {
  .sh-shop-layout > .sh-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 848px) {
  .sh-shop-layout { grid-template-columns: 1fr; }
  .sh-shop-aside { position: static; order: 2; }
}

/* ==========================================================================
   Refonte v4 (28/10) : barre du haut fixe et identique partout, bandeau des pages intérieures,
   carte Discord, vidéo, cartes de vote et tableau de bord du votant
   ========================================================================== */

/* Barre du haut : fixe ; .sh-topbar garde sa place dans la page (aucun saut au défilement) */
.sh-topbar { position: relative; z-index: 100; height: 78px; }
.sh-topbar-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 78px;
  background: rgba(33, 34, 39, .97);
  transition: height .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.sh-topbar-bar .navigation { transition: height .25s ease, line-height .25s ease; }
.sh-topbar .navbar-logo { top: 6px; height: 112px; transition: transform .3s ease, height .25s ease, top .25s ease; }
body.sh-scrolled .sh-topbar-bar { height: 64px; background: rgba(24, 25, 30, .9); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
body.sh-scrolled .sh-topbar-bar .navigation { height: 64px; line-height: 64px; }
body.sh-scrolled .sh-topbar .navbar-logo { top: 5px; height: 54px; }
.header-nav-left .item a,
.header-nav-left .dropdown,
.header-nav-right .item { font-size: 16px; letter-spacing: .02em; }
.header-nav-right { align-items: center; height: 100%; }
.header-nav-right .item { line-height: 1; }
.header-nav-right .item > a,
.header-nav-right .item > .nav-link { display: inline-flex; align-items: center; min-height: 40px; }

/* Statut du serveur + copie de l'IP, toujours visibles */
.header-nav-right .item.sh-nav-status { margin-left: 0; text-transform: none; }
.sh-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  height: 40px;
  padding: 0 .95rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.sh-status:hover { border-color: var(--bs-primary); background: rgba(239, 183, 2, .1); transform: translateY(-1px); }
.sh-status:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sh-status .sh-btn-ip-address { color: var(--bs-primary); }
.sh-status-count { color: rgba(255, 255, 255, .78); font-weight: 500; white-space: nowrap; }
.sh-status-count strong { color: #fff; }
.sh-status-dot { display: inline-block; flex-shrink: 0; width: .55rem; height: .55rem; border-radius: 50%; background: #8a8f98; }
.sh-status-dot.is-on { background: #3ccf6e; animation: sh-pulse 2s infinite; }
.sh-status.copied { border-color: #3ccf6e; background: rgba(60, 207, 110, .18); }
.sh-nav-status .sh-copy-tip { top: calc(100% + .6rem); }
.header-nav-right .item.sh-nav-discord a { min-height: 40px; padding: 0 .95rem; border-radius: 999px; font-size: .95rem; }
.header-nav-right .item.sh-nav-register a { min-height: 40px; padding: 0 .95rem; border-radius: 999px; background: var(--bs-primary); color: #212227; font-size: .95rem; font-weight: 700; }
.header-nav-right .item.sh-nav-register a:hover { background: #ffc61a; color: #212227; }

/* Barre mobile : logo, IP (et joueurs en ligne), menu ; fond qui apparaît au défilement */
.header-mobile-nav::before {
  position: absolute;
  inset: 0;
  background: rgba(24, 25, 30, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  content: "";
  opacity: 0;
  transition: opacity .25s ease;
  backdrop-filter: blur(12px);
}
body.sh-scrolled .header-mobile-nav::before,
.small-header ~ .header-mobile-nav::before { opacity: 1; }
.sh-mnav-logo { position: absolute; top: 8px; left: 14px; z-index: 1000; display: block; }
.sh-mnav-logo img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
/* L'IP est seulement affichée (texte, pas un bouton) : sur téléphone, la copier ne sert à rien */
.sh-mnav-ip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 60px;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.sh-mnav-ip strong { color: #63e394; }
.sh-mnav-ip strong + .visually-hidden + .sh-mnav-ip-text { padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .2); }
@media screen and (max-width: 1200px) {
  .sh-topbar { display: none; }
}

/* Bandeau des pages intérieures : même langage que l'accueil (titre, IP, Discord, preuve sociale) */
.small-header,
.small-header:after { height: 318px; }
.small-header .header-content { height: 240px; }
.small-header .header-content .background-brand:after {
  background: linear-gradient(90deg, rgba(16, 16, 20, .88) 0%, rgba(16, 16, 20, .55) 55%, rgba(16, 16, 20, .75) 100%);
}
.small-header .header-content .background-brand::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 70px;
  background: linear-gradient(to bottom, rgba(46, 46, 52, 0), #2E2E34);
  content: "";
}
.sh-pagehero { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; }
.sh-pagehero-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; }
.sh-pagehero-text { min-width: 0; }
.sh-crumbs { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh-crumbs a { color: rgba(255, 255, 255, .7); }
.sh-crumbs a:hover { color: var(--bs-primary); }
.sh-crumbs i { font-size: .65rem; opacity: .7; }
.sh-crumbs span { color: var(--bs-primary); }
.sh-pagehero-title {
  margin: 0 0 .35rem;
  color: #fff;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
  text-wrap: balance;
}
.sh-pagehero-title::after { display: none !important; }
.sh-pagehero-sub { max-width: 34rem; margin: 0; color: rgba(255, 255, 255, .88); font-size: 1.05rem; line-height: 1.5; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.sh-pagehero-side { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: .75rem; }
.sh-pagehero-actions { display: flex; gap: .75rem; }
.sh-pagehero .sh-btn-ip,
.sh-pagehero .sh-btn-discord { min-height: 3.4rem; padding: .5rem 1.4rem; }
.sh-pagehero .sh-btn-ip { min-width: 13rem; }
.sh-pagehero .sh-btn-ip-address { font-size: 1.15rem; }
.sh-pagehero-proof { margin: 0; padding: .45rem 1.1rem; gap: .3rem 1.1rem; font-size: .85rem; }
@media screen and (max-width: 1200px) {
  .small-header,
  .small-header:after { height: 300px; }
  .small-header .header-content { height: 300px; }
  .sh-pagehero { padding-top: 56px; }
}
@media screen and (max-width: 848px) {
  .small-header,
  .small-header:after,
  .small-header .header-content { height: 286px; }
  .sh-pagehero { align-items: flex-end; padding: 62px 0 22px; }
  .sh-pagehero-inner { flex-direction: column; align-items: stretch; gap: .85rem; }
  .sh-pagehero-text { text-align: center; }
  .sh-crumbs { justify-content: center; }
  .sh-pagehero-title { font-size: 1.6rem; }
  .sh-pagehero-sub { margin: 0 auto; font-size: .92rem; }
  .sh-pagehero-side { align-items: stretch; }
  .sh-pagehero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .sh-pagehero .sh-btn-ip { width: 100%; min-width: 0; min-height: 3rem; }
  .sh-pagehero .sh-btn-ip-address { font-size: 1.05rem; }
  .sh-pagehero .sh-btn-discord { width: auto; min-height: 3rem; }
  .sh-pagehero-proof { display: none; }
}

/* Carte Discord : curseur au logo de Discord (comme avant la refonte) et toute la carte cliquable */
.discord-section,
.discord-section a {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 -28.5 256 256'%3E%3Cpath d='M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z' fill='%235865F2'/%3E%3C/svg%3E") 16 16, pointer;
}
.discord-btn::after { position: absolute; inset: 0; z-index: 2; border-radius: 1.4rem; content: ""; }
.discord-btn:hover { transform: none; }
.discord-card:hover .discord-btn { background: #4752c4; box-shadow: 0 10px 26px rgba(88, 101, 242, .45); }
.discord-card:hover .discord-btn i { transform: translateX(3px); }
.discord-btn i { transition: transform .2s ease; }
.discord-section .discord-stats { color: rgba(255, 255, 255, .8); }

/* Vidéo : miniature en fond tant que le lecteur charge */
.sh-video { background-color: #000; background-position: center; background-size: cover; }
/* Vidéo : même aspect que le lecteur YouTube avant lecture (bouton gris translucide, rouge au survol) */
.sh-video-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 22%); cursor: pointer; }
.sh-video-name { position: absolute; top: 1.1rem; right: 1.4rem; left: 1.4rem; color: #fff; font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 600; text-align: left; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.sh-yt-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); transition: transform .2s ease; }
.sh-yt-play path:first-child { fill: #212121; fill-opacity: .8; transition: fill .15s ease, fill-opacity .15s ease; }
.sh-video-start:hover .sh-yt-play path:first-child,
.sh-video-start:focus-visible .sh-yt-play path:first-child { fill: #f00; fill-opacity: 1; }
.sh-video-start:hover .sh-yt-play { transform: translate(-50%, -50%) scale(1.06); }
.sh-video-start:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: -3px; }
.sh-video-alt { margin: .9rem 0 0; font-size: .9rem; text-align: center; }
.sh-video-alt a { color: rgba(255, 255, 255, .7); }
.sh-video-alt a:hover { color: #fff; }
.sh-video-alt i { margin-right: .3rem; color: #ff3d3d; }

/* Vote : gains d'un vote, en une rangée compacte au-dessus des sites */
.sh-vote-rewards { gap: .75rem; margin: 0 0 1.25rem; }
.sh-vote-rewards li { flex-direction: row; align-items: center; gap: .8rem; padding: .8rem 1rem; text-align: left; }
.sh-vote-rewards i { display: grid; flex-shrink: 0; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0; border-radius: .8rem; background: rgba(239, 183, 2, .14); font-size: 1.3rem; }
.sh-vote-rewards span { color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.3; }
.sh-vote-rewards strong { display: block; color: #fff; font-size: 1.15rem; }

/* Tableau de bord du votant : chiffres du mois, série, progression du jour, prochain palier */
.vote-card { border: 1px solid rgba(255, 255, 255, .07); border-radius: 1.25rem; }
#vote-card { min-height: 0 !important; padding: 1.25rem; }
.sh-vote-flow { align-items: stretch; gap: .9rem; margin-bottom: 1.25rem; }
.sh-vote-me { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; padding: .8rem 1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .03); text-align: left; }
.sh-vote-me-avatar { width: 52px; height: 52px; border-radius: .8rem; background: rgba(255, 255, 255, .06); image-rendering: pixelated; }
.sh-vote-me-id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.sh-vote-me-id strong { overflow: hidden; color: #fff; font-size: 1.15rem; text-overflow: ellipsis; }
.sh-vote-me-id a { margin: 0; font-size: .8rem; }
.sh-vote-stats { display: flex; gap: .5rem; margin: 0; }
.sh-vote-stats div { min-width: 6.6rem; padding: .45rem .8rem; border-radius: .8rem; background: rgba(255, 255, 255, .05); text-align: center; transition: background-color .3s ease; }
.sh-vote-stats dt { color: rgba(255, 255, 255, .58); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sh-vote-stats dd { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.sh-vote-stats .is-hot { background: rgba(255, 128, 48, .15); }
.sh-vote-stats .is-hot dd { color: #ffb067; }
.sh-vote-stats .is-hot dd::before { margin-right: .25rem; content: "\1F525"; }
.sh-vote-progress { max-width: none; text-align: left; }
.sh-vote-progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .5rem; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.sh-vote-progress-head strong { color: #fff; }
.sh-vote-left { color: rgba(255, 255, 255, .7); }
.sh-vote-left strong { color: var(--bs-primary); }
.sh-vote-left .bi { color: #3ccf6e; }
.sh-steps { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: .4rem; }
.sh-steps span { position: relative; height: .55rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sh-steps span::after { position: absolute; inset: 0; background: linear-gradient(90deg, #EFB702, #ffd24a); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sh-steps span.is-done::after { transform: scaleX(1); }
.sh-vote-goal { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border: 1px solid rgba(239, 183, 2, .25); border-radius: 1rem; background: linear-gradient(90deg, rgba(239, 183, 2, .1), rgba(239, 183, 2, .02)); }
.sh-vote-goal > i { display: grid; flex-shrink: 0; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: rgba(239, 183, 2, .16); color: var(--bs-primary); font-size: 1.15rem; }
.sh-vote-goal-body { flex: 1; min-width: 0; color: rgba(255, 255, 255, .85); font-size: .95rem; }
.sh-vote-goal-body strong { color: #fff; }
.sh-vote-goal-bar { height: .4rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sh-vote-goal-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bs-primary); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.sh-vote-hint { max-width: none; font-size: .85rem; }

/* Cartes des sites : un en-tête (numéro, nom, état) et une seule action, alignés d'une carte à l'autre */
#vote-card .vote-sites-grid { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1rem; }
.vote-site-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  opacity: 1 !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
.vote-site-card:not(.is-done):not(.is-verifying):hover { border-color: rgba(239, 183, 2, .55) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, .3); }
.vote-site-card.sh-next { border-color: rgba(239, 183, 2, .6) !important; outline: 0; box-shadow: 0 0 0 1px rgba(239, 183, 2, .3), 0 14px 34px rgba(239, 183, 2, .12); }
.vote-site-card.is-verifying::after,
.vote-site-card.is-done .sh-site-state::before,
.vote-site-card.is-verifying .sh-site-state::before { content: none; }
.sh-site-top { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sh-site-num { display: grid; flex-shrink: 0; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: rgba(239, 183, 2, .14); color: var(--bs-primary); font-size: 1.05rem; font-weight: 800; transition: background-color .3s ease, color .3s ease; }
.sh-site-id { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sh-site-name { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-transform: none; }
.sh-site-domain { overflow: hidden; color: rgba(255, 255, 255, .55); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.sh-site-badge { flex-shrink: 0; padding: .22rem .6rem; border-radius: 999px; background: rgba(239, 183, 2, .14); color: var(--bs-primary); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.vote-site-card .sh-site-cta.btn-vote2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: .65rem 1rem;
  border: 0;
  border-radius: .85rem;
  background: var(--bs-primary);
  color: #212227;
  font-weight: 700;
  opacity: 1;
  box-shadow: 0 8px 22px rgba(239, 183, 2, .22);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.vote-site-card .sh-site-cta.btn-vote2:hover { background: #ffc61a; color: #212227; box-shadow: 0 12px 28px rgba(239, 183, 2, .34); transform: translateY(-1px); }
.vote-site-card .sh-site-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sh-site-cta .vote-content { display: inline-flex; align-items: center; gap: .45rem; color: inherit; }
.sh-site-cta .vote-timer,
.sh-site-cta .sh-cta-verifying { display: none; align-items: center; gap: .5rem; }
.sh-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--bs-primary); border-radius: 50%; animation: sh-spin .8s linear infinite; }
.sh-site-state { display: block; min-height: 0; margin: -.4rem 0 0; color: #ff8a87; font-size: .82rem; text-align: center; }
.sh-site-state:empty { display: none; }

.vote-site-card[data-state="verifying"] .sh-site-badge { background: rgba(88, 101, 242, .2); color: #b3baff; }
.vote-site-card[data-state="verifying"] .sh-site-cta.btn-vote2,
.vote-site-card[data-state="done"] .sh-site-cta.btn-vote2 { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88); box-shadow: none; cursor: default; pointer-events: none; transform: none; }
.vote-site-card[data-state="verifying"] .vote-content,
.vote-site-card[data-state="done"] .vote-content { display: none; }
.vote-site-card[data-state="verifying"] .sh-cta-verifying { display: inline-flex; }

.vote-site-card[data-state="done"] { border-color: rgba(60, 207, 110, .45) !important; background: linear-gradient(180deg, rgba(60, 207, 110, .09), rgba(60, 207, 110, .02)); }
.vote-site-card[data-state="done"] .sh-site-num { background: #3ccf6e; color: #10301b; }
.vote-site-card[data-state="done"] .sh-site-num span { display: none; }
.vote-site-card[data-state="done"] .sh-site-num::before { content: "\2713"; font-size: 1.15rem; }
.vote-site-card[data-state="done"] .sh-site-badge { background: rgba(60, 207, 110, .16); color: #63e394; }
.vote-site-card[data-state="done"] .vote-timer { display: inline-flex; font-variant-numeric: tabular-nums; }
.vote-site-card[data-state="done"] .vote-timer::before { color: rgba(255, 255, 255, .6); font-weight: 500; content: "Prochain vote dans"; }

.vote-site-card[data-state="retry"] { border-color: rgba(255, 89, 86, .5) !important; }
.vote-site-card[data-state="retry"] .sh-site-badge { background: rgba(255, 89, 86, .16); color: #ff8a87; }

/* Vote validé : la carte s'illumine, les gains montent du bouton */
.vote-site-card { position: relative; }
.vote-site-card.sh-celebrate { animation: sh-card-pop .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes sh-card-pop {
  0% { box-shadow: 0 0 0 0 rgba(60, 207, 110, .55); transform: scale(1); }
  35% { transform: scale(1.03); }
  100% { box-shadow: 0 0 0 22px rgba(60, 207, 110, 0); transform: scale(1); }
}
.sh-burst { position: absolute; bottom: 3.4rem; left: 50%; z-index: 6; width: 0; height: 0; pointer-events: none; }
.sh-burst-chip {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: #3ccf6e;
  color: #0f2a18;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  opacity: 0;
  animation: sh-chip-up 1.9s cubic-bezier(.2, .8, .2, 1) forwards;
}
.sh-burst-chip:nth-child(2) { --dy: -38px; }
.sh-burst-chip:nth-child(3) { --dy: -76px; }
@keyframes sh-chip-up {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.85); }
  18% { opacity: 1; transform: translate(-50%, var(--dy, 0px)) scale(1); }
  78% { opacity: 1; transform: translate(-50%, calc(var(--dy, 0px) - 14px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(var(--dy, 0px) - 30px)) scale(.96); }
}
.sh-burst-bit { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--bs-primary); opacity: 0; animation: sh-bit 1.1s ease-out forwards; }
.sh-burst-bit:nth-child(3n) { background: #3ccf6e; }
.sh-burst-bit:nth-child(3n + 1) { background: #fff; }
@keyframes sh-bit {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* Classement : récompenses du mois en tête, vrai podium (2 · 1 · 3) */
.sh-rank-head { margin-bottom: 1.75rem; text-align: center; }
.sh-rank-title { margin: 0 0 1rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-transform: none; }
.sh-rank-title::after { display: none !important; }
.sh-rank-prizes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.sh-rank-prizes li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); font-size: .9rem; }
.sh-rank-prizes strong { margin-right: .2rem; color: #fff; }
.sh-rank-prizes i { color: var(--bs-primary); }
.sh-rank-prizes .is-gold { border-color: rgba(255, 215, 0, .4); }
.sh-rank-prizes .is-gold i { color: #FFD700; }
.sh-rank-prizes .is-silver i { color: #C0C0C0; }
.sh-rank-prizes .is-bronze i { color: #CD7F32; }
.sh-rank-note { margin: 0; color: rgba(255, 255, 255, .55); font-size: .85rem; }
.podium-item.silver { order: 1; }
.podium-item.gold { order: 2; padding-bottom: 2.4rem; }
.podium-item.bronze { order: 3; }
.podium-item { border-top: 1px solid rgba(255, 255, 255, .06); border-right: 1px solid rgba(255, 255, 255, .06); border-left: 1px solid rgba(255, 255, 255, .06); border-radius: 1.1rem; }
.podium-item.gold { background: linear-gradient(180deg, rgba(255, 215, 0, .1), rgba(255, 215, 0, 0) 60%), var(--bs-card-bg); }
.podium-item .rank-badge { width: auto; }
.ranking-item { border: 1px solid rgba(255, 255, 255, .05); }
.ranking-item .rank-badge { font-size: 1.15rem; }
@media screen and (min-width: 849px) {
  .podium-item .podium-avatar { height: 190px; }
  .podium-item.gold .podium-avatar { height: 240px; }
}
@media screen and (max-width: 848px) {
  .sh-vote-rewards li { gap: .6rem; padding: .65rem .75rem; }
  .sh-vote-rewards i { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .sh-vote-rewards strong { font-size: 1rem; }
  .sh-vote-rewards span { font-size: .8rem; }
  #vote-card { padding: .9rem; }
  .sh-vote-stats { width: 100%; }
  .sh-vote-stats div { flex: 1; min-width: 0; padding: .45rem .4rem; }
  .podium-item.gold { padding-bottom: 1.4rem !important; }
}
/* v4, après contrôle visuel : logo non déformé, barre de droite qui ne touche jamais le logo central,
   bandeau collé au contenu, badge « Disponible » inutile (le bouton jaune le dit déjà) */
.sh-topbar .navbar-logo { width: auto; }
#app > header { margin-bottom: 1.75rem; }
.sh-status { gap: .5rem; padding: 0 .85rem; font-size: .85rem; }
.sh-status .sh-btn-ip-address { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; letter-spacing: 0; }
.sh-status-count + .sh-btn-ip-address { padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.header-nav-right .item.sh-nav-discord a { gap: .4rem; }
#userDropdown { gap: .45rem; }
#userDropdown img { border-radius: .35rem; image-rendering: pixelated; }
.sh-user-name { display: inline-block; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Connecté : la barre porte aussi la cloche et le pseudo, l'IP s'y résume à l'icône (elle reste dans le bandeau) */
.sh-nav-status.is-auth .sh-ip-text { display: none; }
.sh-pagehero-title,
.sh-pagehero-sub { text-align: left; }
@media screen and (max-width: 848px) {
  .sh-pagehero-title,
  .sh-pagehero-sub { text-align: center; }
}
.header-nav-right .item.sh-nav-login a { gap: .4rem; min-height: 40px; padding: 0 .95rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: .95rem; }
.header-nav-right .item.sh-nav-login a:hover { border-color: var(--bs-primary); }
/* Écrans moyens (conteneur de 1140 px) : la connexion se résume à son icône, le pseudo se raccourcit */
@media screen and (max-width: 1399px) {
  .header-nav-right .item.sh-nav-login a { justify-content: center; width: 40px; padding: 0; font-size: 1.15rem; }
  .sh-nav-login-text { display: none; }
  .sh-user-name { max-width: 6rem; }
  .header-nav-right .item.sh-nav-discord a { justify-content: center; width: 40px; padding: 0; font-size: 1.15rem; }
  .sh-nav-discord-text { display: none; }
}
/* Vote, invité : saisie du pseudo en une ligne, bouton principal, aide claire */
.sh-vote-name-form { max-width: 34rem; margin: .5rem auto; text-align: center; }
.sh-vote-name-label { display: block; margin-bottom: .25rem; color: #fff; font-size: 1.25rem; font-weight: 700; }
.sh-vote-name-help { margin: 0 0 1rem; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.sh-vote-name-row { display: flex; gap: .6rem; }
.sh-vote-name-field { position: relative; flex: 1; min-width: 0; }
.sh-vote-name-field i { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--bs-primary); transform: translateY(-50%); pointer-events: none; }
.sh-vote-name-field .form-control { height: 52px; padding-left: 2.6rem; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: .9rem; background: rgba(255, 255, 255, .05) !important; color: #fff !important; font-size: 1.05rem; }
.sh-vote-name-field .form-control:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .2rem rgba(239, 183, 2, .25); }
.sh-vote-name-btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: .45rem; height: 52px; padding: 0 1.4rem; border: 0; border-radius: .9rem; background: var(--bs-primary); color: #212227; font-weight: 700; box-shadow: 0 8px 22px rgba(239, 183, 2, .25); }
.sh-vote-name-btn:hover { background: #ffc61a; color: #212227; }
.sh-vote-name-alt { margin: .9rem 0 0; color: rgba(255, 255, 255, .6); font-size: .85rem; }
@media screen and (max-width: 560px) {
  .sh-vote-name-row { flex-direction: column; }
  .sh-vote-name-btn { justify-content: center; }
}
/* Podium : cadres discrets, la couleur du rang reste sur le liseré du bas */
.podium-grid .podium-item.gold,
.podium-grid .podium-item.silver,
.podium-grid .podium-item.bronze { border-top-color: rgba(255, 255, 255, .07); border-right-color: rgba(255, 255, 255, .07); border-left-color: rgba(255, 255, 255, .07); }
.vote-site-card[data-state="available"] .sh-site-badge { display: none; }
.vote-site-card[data-state="done"] .vote-timer:empty::before { color: #63e394; font-weight: 600; content: "Vote enregistré !"; }
/* Boutique v4 : article le plus choisi mis en avant, ce qu'on obtient tout de suite, comparaison de prix,
   solde du joueur sur chaque carte, promo réelle avec compte à rebours, garanties sous la grille */
.sh-pkg.is-popular {
  border-color: rgba(239, 183, 2, .75);
  background: linear-gradient(180deg, rgba(239, 183, 2, .11), rgba(255, 255, 255, .02) 55%);
  box-shadow: 0 0 0 1px rgba(239, 183, 2, .3), 0 22px 50px rgba(239, 183, 2, .14);
}
.sh-pkg-ribbon {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: #212227;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(239, 183, 2, .35);
}
.sh-badge-promo { background: #ff5956; color: #fff; }
.sh-pkg-perks { display: grid; gap: .3rem; margin: .1rem 0 .2rem; padding: 0; list-style: none; color: rgba(255, 255, 255, .82); font-size: .88rem; line-height: 1.35; }
.sh-pkg-perks li { display: flex; gap: .45rem; }
.sh-pkg-perks i { flex-shrink: 0; margin-top: .05rem; color: #3ccf6e; }
.sh-pkg-perks strong { color: #fff; }
.sh-pkg-now { display: flex; gap: .55rem; padding: .6rem .75rem; border: 1px dashed rgba(239, 183, 2, .45); border-radius: .8rem; background: rgba(239, 183, 2, .07); color: rgba(255, 255, 255, .88); font-size: .85rem; line-height: 1.4; }
.sh-pkg-now i { flex-shrink: 0; color: var(--bs-primary); font-size: 1.05rem; }
.sh-pkg-now strong { color: var(--bs-primary); }
.sh-pkg-decoy { margin: 0; color: rgba(255, 255, 255, .72); font-size: .84rem; }
.sh-pkg-decoy strong { color: #3ccf6e; }
.sh-pkg-price small { color: rgba(255, 255, 255, .55); font-size: .78rem; }
.sh-pkg-cta { display: inline-flex; align-items: center; gap: .4rem; }
.sh-pkg.is-popular .sh-pkg-cta { background: var(--bs-primary); color: #212227; box-shadow: 0 8px 20px rgba(239, 183, 2, .3); }
.sh-pkg.is-popular .sh-pkg-cta:hover { background: #ffc61a; }
.sh-pkg-balance { display: inline-flex; align-items: center; gap: .4rem; margin-top: .1rem; font-size: .8rem; font-weight: 600; }
.sh-pkg-balance.is-ok { color: #63e394; }
.sh-pkg-balance.is-short { color: rgba(255, 255, 255, .7); text-decoration: none; }
.sh-pkg-balance.is-short i { color: var(--bs-primary); }
.sh-pkg-balance.is-short:hover { color: #fff; }
.sh-pkg-timer { margin: 0; color: #ff8a87; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-shop-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0 0 1.5rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(255, 89, 86, .45);
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(255, 89, 86, .16), rgba(255, 89, 86, .04));
  color: #fff;
}
.sh-shop-promo > i { color: #ff8a87; font-size: 1.2rem; }
.sh-shop-promo-timer { margin-left: auto; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.sh-shop-promo-timer strong { color: #fff; }
.sh-shop-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sh-shop-trust li { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: 1rem; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .75); font-size: .88rem; line-height: 1.35; }
.sh-shop-trust i { display: grid; flex-shrink: 0; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .7rem; background: rgba(239, 183, 2, .12); color: var(--bs-primary); font-size: 1.1rem; }
.sh-shop-trust .bi-discord { background: rgba(88, 101, 242, .16); color: #8f98ff; }
.sh-shop-trust .bi-heart-fill { background: rgba(255, 89, 86, .14); color: #ff8a87; }
.sh-shop-trust strong { color: #fff; }
/* Fenêtre article : description lisible (titres de section, commandes sur deux colonnes), prix et achat fixés en bas */
#itemModal .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3rem); }
.sh-pkg-description { padding: 1.25rem 1.5rem; }
.sh-pkg-description hr { margin: 1.1rem 0; border-color: rgba(255, 255, 255, .12); opacity: 1; }
.sh-pkg-description h2 { margin: 0 0 .75rem; color: var(--bs-primary); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.sh-pkg-description h2::after { display: none !important; }
.sh-pkg-description ul { margin: 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: 1.5rem; }
.sh-pkg-description li { position: relative; margin: 0 0 .55rem; padding-left: 1.4rem; color: rgba(255, 255, 255, .9); font-size: .92rem; line-height: 1.35; break-inside: avoid; }
.sh-pkg-description li::before { position: absolute; top: .05rem; left: 0; color: #3ccf6e; font-weight: 800; content: "\2713"; }
.sh-pkg-description li small { color: rgba(255, 255, 255, .55) !important; font-size: .8rem; }
.sh-pkg-description p img { max-height: 150px; width: auto; }
#itemModal .modal-footer { justify-content: space-between; background: rgba(0, 0, 0, .18); }
.sh-modal-price { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.sh-modal-price del { color: rgba(255, 255, 255, .45); font-size: .85rem; }
.sh-modal-price strong { color: var(--bs-primary); font-size: 1.45rem; }
.sh-modal-price span { color: rgba(255, 255, 255, .6); font-size: .78rem; }
.sh-modal-price span i { color: var(--bs-primary); }

/* Finitions : liens de gauche alignés sur une même ligne, rang centré dans le classement, reflet sur l'appel principal */
.header-nav-left { align-items: stretch; height: 100%; }
.header-nav-left > li { display: flex; align-items: center; line-height: 1; }
.header-nav-left > li > a { display: inline-flex; align-items: center; height: 100%; }
.ranking-item .rank-badge { margin: 0; }
/* Classement : la ligne du joueur, à sa place, sous le top affiché */
.sh-rank-gap { padding: .2rem 0; color: rgba(255, 255, 255, .6); font-size: .9rem; letter-spacing: .3em; text-align: center; }
.ranking-item.sh-rank-self { border-color: rgba(239, 183, 2, .55); background: linear-gradient(90deg, rgba(239, 183, 2, .12), rgba(239, 183, 2, .03)); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); animation: sh-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.sh-badge-you { background: var(--bs-primary); color: #212227; }
.sh-btn-ip { position: relative; overflow: hidden; }
.sh-btn-ip::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  content: "";
  transform: translateX(-150%) skewX(-20deg);
  animation: sh-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sh-shine { 0%, 72% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(325%) skewX(-20deg); } }
#status-message .alert { overflow: visible; }
/* Retour tactile : les boutons principaux s'enfoncent légèrement au clic */
.sh-btn-ip:active,
.sh-btn-discord:active,
.sh-pkg-cta:active,
.sh-site-cta:active,
.sh-shop-topup:active,
.sh-vote-name-btn:active,
.sh-status:active { transform: scale(.97); }
@media screen and (max-width: 848px) {
  .sh-shop-layout > .sh-shop-grid.is-rich,
  .sh-shop-grid.is-rich { grid-template-columns: 1fr; }
  .sh-shop-grid.is-rich .sh-pkg.is-popular { order: -1; }
  .sh-shop-grid.is-rich .sh-pkg-media { height: 150px; }
  .sh-shop-grid.is-rich .sh-pkg-foot { flex-direction: row; align-items: center; }
  .sh-shop-grid.is-rich .sh-pkg-cta { width: auto; }
}
.sh-toast-burst { top: 50%; bottom: auto; left: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .sh-btn-ip::after { display: none; }
}

/* Bandeau intérieur : à 125 % (écrans Windows), la jonction tombe sur un demi-pixel et l'image dépasse du voile
   d'une rangée ; une bande couleur de page recouvre la jonction */
.header-nav.small-header .header-content::after {
  position: absolute;
  top: auto;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 3;
  display: block;
  width: auto;
  height: 3px;
  background: #2E2E34;
  content: "";
  pointer-events: none;
}
.small-header:after { height: 78px; }

/* Barre : « Autres » a le même survol que les autres liens (barre jaune), menus déroulants animés et au style du site,
   cloche animée, notifications refaites */
.header-nav-left .item > a,
.header-nav-left .sh-nav-dropdown > .nav-link { color: rgba(255, 255, 255, .92); }
.header-nav-left .sh-nav-dropdown,
.header-nav-left .sh-nav-dropdown:hover,
.header-nav-left .sh-nav-dropdown > .nav-link:hover { position: relative; color: rgba(255, 255, 255, .92); }
.header-nav-left .sh-nav-dropdown::before {
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 5px;
  background: var(--bs-primary);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease-in-out;
}
.header-nav-left .sh-nav-dropdown:hover::before,
.header-nav-left .sh-nav-dropdown:has(> .show)::before { transform: none; }
.header-nav-left .sh-nav-dropdown .dropdown-toggle::after { transition: transform .2s ease; }
.header-nav-left .sh-nav-dropdown:has(> .show) .dropdown-toggle::after { transform: rotate(180deg); }

.header-nav .dropdown-menu {
  min-width: 13rem;
  padding: .45rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .9rem;
  background: rgba(30, 31, 37, .98);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
  font-size: .92rem;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.header-nav .dropdown-menu.show { animation: sh-menu-in .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes sh-menu-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.header-nav .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-left: 0;
  border-radius: .6rem;
  color: rgba(255, 255, 255, .85) !important;
  text-transform: none;
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.header-nav .dropdown-menu .dropdown-item:hover,
.header-nav .dropdown-menu .dropdown-item:focus-visible { padding-left: 1rem; background: rgba(239, 183, 2, .12) !important; color: #fff !important; }
.header-nav .dropdown-menu .dropdown-item.active { border-left: 0; background: rgba(239, 183, 2, .16) !important; color: var(--bs-primary) !important; }
.header-nav .dropdown-menu .dropdown-item i { width: 1.1rem; color: var(--bs-primary); text-align: center; }
.header-nav .dropdown-menu .dropdown-divider { margin: .35rem .25rem; border-color: rgba(255, 255, 255, .08); }
.header-nav .dropdown-menu .sh-dropdown-logout,
.header-nav .dropdown-menu .sh-dropdown-logout i { color: #ff8a87 !important; }
.sh-user-menu { min-width: 15rem; }
.sh-user-menu-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; padding: .45rem .6rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sh-user-menu-head img { border-radius: .6rem; image-rendering: pixelated; }
.sh-user-menu-head strong { display: block; color: #fff; font-size: .98rem; }
.sh-user-menu-head span { display: inline-flex; align-items: center; gap: .3rem; color: var(--bs-primary); font-size: .82rem; font-weight: 600; }

.header-nav-right .item.sh-nav-bell { margin-left: 10px; }
.header-nav .nav-link:focus:not(:focus-visible),
.header-nav .dropdown-toggle:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.header-nav .nav-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: .5rem; }
.sh-bell { position: relative; display: inline-grid !important; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: rgba(255, 255, 255, .9) !important; font-size: 1.2rem; transition: background-color .2s ease, color .2s ease; }
.sh-bell::after { display: none !important; }
.sh-bell i { display: inline-block; transform-origin: 50% 2px; }
.sh-bell:hover,
.sh-bell.show { background: rgba(255, 255, 255, .08); color: #fff !important; }
.sh-bell:hover i { animation: sh-bell-ring .8s ease; }
.sh-bell:has(.sh-bell-count) i { animation: sh-bell-ring 1s ease 1.2s 2; }
@keyframes sh-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-13deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.sh-bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #212227; border-radius: 999px; background: #ff5956; color: #fff; font-size: .66rem; font-weight: 800; line-height: 14px; text-align: center; }
.header-nav .sh-notif-menu { width: 22rem; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
.sh-notif-head { padding: .85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: .95rem; font-weight: 700; }
.sh-notif-list { max-height: 22rem; overflow-y: auto; }
.sh-notif-item { display: flex; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.sh-notif-icon { display: grid; flex-shrink: 0; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: rgba(88, 101, 242, .18); color: #b3baff; }
.sh-notif-icon.is-success { background: rgba(60, 207, 110, .16); color: #63e394; }
.sh-notif-icon.is-danger { background: rgba(255, 89, 86, .16); color: #ff8a87; }
.sh-notif-icon.is-warning { background: rgba(239, 183, 2, .16); color: var(--bs-primary); }
.sh-notif-body { min-width: 0; }
.sh-notif-body p { margin: 0 0 .2rem; color: rgba(255, 255, 255, .9); font-size: .88rem; line-height: 1.4; white-space: normal; }
.sh-notif-body time { color: rgba(255, 255, 255, .5); font-size: .75rem; }
.sh-notif-readall { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; color: var(--bs-primary); font-size: .85rem; font-weight: 600; }
.sh-notif-readall:hover { background: rgba(239, 183, 2, .08); color: var(--bs-primary); }
.sh-notif-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.6rem 1rem; color: rgba(255, 255, 255, .6); font-size: .88rem; text-align: center; }
.sh-notif-empty i { color: rgba(255, 255, 255, .35); font-size: 1.6rem; }
.sh-notif-empty.d-none { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .header-nav .dropdown-menu.show,
  .sh-bell i { animation: none !important; }
}

/* Packs de tokens : rangées centrées (la dernière ne reste pas bancale), bonus en tokens */
.sh-offers-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.sh-offers-grid .sh-offer { flex: 0 1 236px; }
.sh-offer { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sh-offer:hover { border-color: rgba(239, 183, 2, .7); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.sh-offer-bonus small { opacity: .75; font-weight: 500; }

/* État vide (panier…) : une icône, une phrase, une action */
.sh-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 34rem; margin: 1rem auto; padding: 2.5rem 1.5rem; border: 1px dashed rgba(255, 255, 255, .15); border-radius: 1.25rem; background: rgba(255, 255, 255, .02); text-align: center; }
.sh-empty > i { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: .5rem; border-radius: 50%; background: rgba(239, 183, 2, .12); color: var(--bs-primary); font-size: 1.8rem; }
.sh-empty h2 { margin: 0; color: #fff; font-size: 1.35rem; font-weight: 700; text-transform: none; }
.sh-empty h2::after { display: none !important; }
.sh-empty p { margin: 0 0 .75rem; color: rgba(255, 255, 255, .7); }

/* Connexion, inscription : l'aide avant le formulaire (le titre est dans le bandeau) */
.sh-auth-lead { max-width: 36rem; margin: .5rem auto 1.75rem; color: rgba(255, 255, 255, .78); font-size: 1.02rem; text-align: center; }

/* Accueil : rejoindre en trois gestes, à côté du bouton « Copier l'IP » */
.sh-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(239, 183, 2, .25); border-radius: 1.25rem; background: linear-gradient(90deg, rgba(239, 183, 2, .08), rgba(255, 255, 255, .02)); }
.sh-join-steps { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.sh-join-steps li { display: flex; align-items: center; gap: .75rem; }
.sh-join-steps strong { display: block; color: #fff; font-size: .98rem; }
.sh-join-steps span:not(.sh-join-num) { color: rgba(255, 255, 255, .65); font-size: .85rem; }
.sh-join-num { display: grid; flex-shrink: 0; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bs-primary); color: #212227; font-weight: 800; }
.sh-join .sh-btn-ip { min-height: 3.6rem; }

/* Accueil : SkyHand en chiffres (réels) */
.sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 5rem 0 0; }
.sh-stat { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: 1.4rem 1rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: 1.1rem; background: rgba(255, 255, 255, .03); text-align: center; }
.sh-stat strong { color: var(--bs-primary); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-stat span { color: rgba(255, 255, 255, .72); font-size: .95rem; }

/* Pied de page : appel final, colonnes claires, chiffres en direct. La vague garde ses vraies proportions
   (1280 × 344) et se pose juste au-dessus du pied ; la marge du pied lui réserve toute sa hauteur. */
.footer { margin-top: calc(100vw * 344 / 1280 + 1.5rem); }
.footer .top-footer { padding: 1.5rem 10px 2.5rem; }
.footer .top-footer:after {
  top: auto;
  bottom: 100%;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 344;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sh-footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin: 0 0 2.75rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(239, 183, 2, .3);
  border-radius: 1.4rem;
  background: radial-gradient(circle at 15% 0%, rgba(239, 183, 2, .18), transparent 55%), rgba(255, 255, 255, .03);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.sh-footer-cta-title { margin: 0 0 .3rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; text-transform: none; }
.sh-footer-cta-title::after { display: none !important; }
.sh-footer-cta-text p { margin: 0; color: rgba(255, 255, 255, .7); }
.sh-footer-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sh-footer-cta .sh-btn-ip,
.sh-footer-cta .sh-btn-discord { min-height: 3.4rem; }
.sh-footer-cta .sh-btn-ip-address { font-size: 1.15rem; }
.sh-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.sh-footer-logo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .75rem; color: #fff; font-size: 1.3rem; font-weight: 800; }
.sh-footer-logo img { width: 56px; height: auto; }
.sh-footer-logo:hover { color: var(--bs-primary); }
.sh-footer-brand p { margin: 0 0 1rem; color: rgba(255, 255, 255, .68); font-size: .92rem; line-height: 1.55; }
.sh-footer-shop { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.2rem; border-radius: 999px; background: var(--bs-primary); color: #212227; font-weight: 700; transition: transform .2s ease, background-color .2s ease; }
.sh-footer-shop:hover { background: #ffc61a; color: #212227; transform: translateY(-2px); }
.sh-footer-col h3 { margin: 0 0 .85rem; color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sh-footer-col h3::after { display: none !important; }
.sh-footer-col a { display: block; margin-bottom: .55rem; color: rgba(255, 255, 255, .72); font-size: .92rem; transition: color .2s ease, transform .2s ease; }
.sh-footer-col a:hover { color: var(--bs-primary); transform: translateX(3px); }
.sh-footer-trust p { display: flex; gap: .55rem; margin: 0 0 .6rem; color: rgba(255, 255, 255, .72); font-size: .9rem; }
.sh-footer-trust i { color: var(--bs-primary); }
.sh-footer-trust .bi-discord { color: #8f98ff; }
.sh-footer-socials { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; font-size: 1.6rem; }
.sh-footer-live p { display: flex; align-items: center; gap: .6rem; margin: 0 0 .65rem; color: rgba(255, 255, 255, .72); font-size: .9rem; }
.sh-footer-live strong { color: #fff; }
.sh-footer-live .bi-discord { color: #8f98ff; }
.sh-footer-live .bi-hand-thumbs-up-fill { color: var(--bs-primary); }
.sh-footer-live .sh-status-dot { margin: 0 .1rem; }
.sh-footer-col a.sh-footer-live-link { display: inline-flex; align-items: center; margin-top: .2rem; color: var(--bs-primary); font-weight: 600; }
@media screen and (max-width: 991px) {
  .sh-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 560px) {
  .sh-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .sh-footer-live p { justify-content: center; }
  .sh-footer-cta { padding: 1.4rem 1.1rem; text-align: center; }
  .sh-footer-cta-actions { width: 100%; justify-content: center; }
  .sh-footer-cta .sh-btn-ip { flex: 1; min-width: 0; }
  .footer { margin-top: calc(100vw * 344 / 1280 + 1rem); }
}

/* Les sites arrivent juste après la progression (palier et aide passent dessous) : voter sans défiler */
#vote-card .sh-vote-flow { display: contents; }
#vote-card .sh-vote-me { order: 1; margin-bottom: .9rem; }
#vote-card .sh-vote-progress { order: 2; margin-bottom: 1rem; }
#vote-card .sh-vote-all-done { order: 2; margin: 0 auto 1rem; }
#vote-card [data-vote-step="1"] { order: 3; }
#vote-card [data-vote-step="2"] { order: 3; }
#vote-card .sh-vote-goal { order: 4; margin-top: 1rem; }
#vote-card .sh-vote-hint { order: 5; margin-top: .9rem; }
#vote-card [data-vote-step="3"],
#vote-card [data-vote-step="server"] { order: 6; }
/* Mobile : gains plus compacts */
@media screen and (max-width: 848px) {
  .sh-vote-rewards { gap: .5rem; margin-bottom: 1rem; }
  .sh-vote-rewards li { padding: .5rem .6rem; }
  .sh-vote-rewards i { width: 2rem; height: 2rem; border-radius: .6rem; font-size: 1rem; }
  .sh-vote-rewards span { font-size: .78rem; line-height: 1.2; }
  .sh-vote-rewards strong { font-size: .95rem; }
  .sh-vote-stats dd { font-size: .95rem; }
  .sh-vote-stats dt { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vote-site-card.sh-celebrate,
  .sh-spin,
  .sh-status-dot.is-on { animation: none; }
  .sh-steps span::after,
  .sh-vote-goal-bar span,
  .sh-topbar-bar,
  .sh-topbar .navbar-logo { transition: none; }
}

/* ==========================================================================
   Refonte v5 (28/10) : profil, cartes de réglages, skin porté en jeu
   ========================================================================== */
.sh-profile-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  background: radial-gradient(circle at 12% 30%, rgba(239, 183, 2, .14), transparent 45%), rgba(255, 255, 255, .03);
}
.sh-profile-skin { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.sh-profile-skin canvas { display: block; width: 200px; height: 280px; cursor: grab; }
.sh-profile-skin canvas:active { cursor: grabbing; }
.sh-profile-avatar { width: 150px; height: 150px; border-radius: 1rem; image-rendering: pixelated; }
.sh-profile-skin-note { padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); font-size: .78rem; }
.sh-profile-name { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.sh-profile-name h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; text-transform: none; }
.sh-profile-name h2::after { display: none !important; }
.sh-profile-name .badge { padding: .4em .8em; border-radius: 999px; font-size: .78rem; }
.sh-profile-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sh-profile-facts li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .8); font-size: .88rem; }
.sh-profile-facts i { color: var(--bs-primary); }
.sh-profile-facts strong { color: #fff; }
.sh-profile-facts .is-ok i { color: #3ccf6e; }
.sh-profile-facts .is-warn { border-color: rgba(255, 89, 86, .35); }
.sh-profile-facts .is-warn i { color: #ff8a87; }
.sh-profile-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.sh-profile-security { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.sh-profile-link { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .72); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.sh-profile-link:hover { color: #fff; }
.sh-profile-link.is-danger { color: #ff8a87; }
.sh-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.sh-profile-card { padding: 1.4rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1rem; background: rgba(255, 255, 255, .03); }
.sh-profile-card-title { margin: 0 0 1rem; color: #fff; font-size: 1.2rem; font-weight: 700; text-transform: none; }
.sh-profile-card-title::after { display: none !important; }
.sh-profile-card-note { margin: -.6rem 0 1rem; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.sh-profile-card .form-control { border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: .7rem; background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
.sh-profile-card .form-control:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .2rem rgba(239, 183, 2, .2); }
.sh-profile-card .btn-primary { border-radius: .7rem; color: #212227; font-weight: 700; }
.sh-skin-note { display: flex; gap: .55rem; margin: 0 0 1rem; padding: .7rem .85rem; border-radius: .8rem; background: rgba(88, 101, 242, .12); color: rgba(255, 255, 255, .85); font-size: .88rem; line-height: 1.45; }
.sh-skin-note i { color: #b3baff; }
.sh-skin-note.is-site { background: rgba(60, 207, 110, .1); }
.sh-skin-note.is-site i { color: #63e394; }
.sh-skin-drop { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border: 2px dashed rgba(255, 255, 255, .18); border-radius: 1rem; background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.sh-skin-drop:hover,
.sh-skin-drop.has-file { border-color: var(--bs-primary); background: rgba(239, 183, 2, .06); }
.sh-skin-drop:focus-within { outline: 3px solid #fff; outline-offset: 2px; }
.sh-skin-drop img { width: 96px; height: 96px; border-radius: .5rem; background: rgba(0, 0, 0, .25); image-rendering: pixelated; object-fit: contain; }
.sh-skin-drop-text { display: flex; flex-direction: column; gap: .15rem; color: rgba(255, 255, 255, .85); }
.sh-skin-drop-text i { color: var(--bs-primary); font-size: 1.3rem; }
.sh-skin-drop-text small { color: rgba(255, 255, 255, .55); }
.sh-skin-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Vos paiements : résumé du solde, puis des lignes lisibles (statut, montant, moyen, date) au lieu de tableaux */
.sh-pay-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(239, 183, 2, .3); border-radius: 1.1rem; background: linear-gradient(90deg, rgba(239, 183, 2, .1), rgba(255, 255, 255, .02)); }
.sh-pay-balance span { display: block; color: rgba(255, 255, 255, .6); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh-pay-balance strong { color: #fff; font-size: 1.6rem; }
.sh-pay-balance i { color: var(--bs-primary); }
.sh-pay-summary-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sh-pay-block { margin-bottom: 1.75rem; }
.sh-pay-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; color: #fff; font-size: 1.2rem; font-weight: 700; text-transform: none; }
.sh-pay-title::after { display: none !important; }
.sh-pay-title i { color: var(--bs-primary); }
.sh-pay-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: .6rem; padding: .85rem 1.1rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: 1rem; background: rgba(255, 255, 255, .03); transition: border-color .2s ease, background-color .2s ease; }
.sh-pay-row:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
.sh-pay-status { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font-size: 1.15rem; }
.sh-pay-status.is-success { background: rgba(60, 207, 110, .15); color: #63e394; }
.sh-pay-status.is-warning { background: rgba(239, 183, 2, .15); color: var(--bs-primary); }
.sh-pay-status.is-danger { background: rgba(255, 89, 86, .15); color: #ff8a87; }
.sh-pay-status.is-info,
.sh-pay-status.is-primary { background: rgba(88, 101, 242, .18); color: #b3baff; }
.sh-pay-main { display: flex; flex-direction: column; min-width: 0; }
.sh-pay-main strong { overflow: hidden; color: #fff; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.sh-pay-main span { color: rgba(255, 255, 255, .65); font-size: .86rem; }
.sh-pay-main code,
.sh-pay-meta code { color: rgba(255, 255, 255, .7); font-size: .8rem; }
.sh-pay-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; color: rgba(255, 255, 255, .55); font-size: .82rem; text-align: right; }
.sh-pay-meta time { color: rgba(255, 255, 255, .85); }
.sh-pay-meta form { margin-top: .3rem; }
@media screen and (max-width: 640px) {
  .sh-pay-row { grid-template-columns: auto minmax(0, 1fr); }
  .sh-pay-meta { grid-column: 2; align-items: flex-start; text-align: left; }
}

/* Titres en double : les anciennes vues de plugins répètent le titre déjà affiché dans le bandeau */
#go-to-bottom-div .vote-header > h1,
#go-to-bottom-div .shop-header > h1,
#go-to-bottom-div .vote-header > .header-decoration,
#go-to-bottom-div .shop-header > .header-decoration { display: none; }
#go-to-bottom-div .vote-header > .lead { max-width: 46rem; margin: 0 auto 1.5rem !important; color: rgba(255, 255, 255, .78); font-size: 1rem; }

/* Tableaux (sanctions…) : sombres et lisibles, au lieu de l'en-tête jaune */
table,
.table { background-color: transparent; color: rgba(255, 255, 255, .85); font-weight: 400; }
table thead th,
.table thead th { padding: .85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; background-color: rgba(255, 255, 255, .05) !important; color: rgba(255, 255, 255, .65) !important; font-size: .76rem; letter-spacing: .07em; }
table tbody,
.table tbody { background-color: transparent; }
table tbody td,
.table tbody td,
.table tbody th { padding: .8rem 1rem; border-color: rgba(255, 255, 255, .06); background: transparent; color: rgba(255, 255, 255, .85); vertical-align: middle; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background-color: rgba(255, 255, 255, .03); }
.table-responsive { border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; }
#go-to-bottom-div .table { padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 1rem; background: rgba(255, 255, 255, .02) !important; box-shadow: none; }
#go-to-bottom-div .table thead tr { background: transparent !important; }
#go-to-bottom-div .table tbody img { border: 0 !important; border-radius: .4rem; image-rendering: pixelated; }
#go-to-bottom-div .table a { color: #fff; font-weight: 600; }
#go-to-bottom-div .table a:hover { color: var(--bs-primary); }
#go-to-bottom-div .pagination .page-link { border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: .6rem !important; background: rgba(255, 255, 255, .04) !important; color: rgba(255, 255, 255, .85) !important; }
#go-to-bottom-div .pagination .page-item.active .page-link { border-color: var(--bs-primary) !important; background: var(--bs-primary) !important; color: #212227 !important; }

/* Sanctions : onglets en pastilles et recherche */
.sh-sanctions-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sh-sanctions-tabs { margin: 0; }
.sh-tab-count { margin-left: .25rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .78rem; }
.sh-shop-tab.is-active .sh-tab-count { background: rgba(0, 0, 0, .15); }
.sh-sanctions-search { position: relative; display: flex; flex: 0 1 24rem; gap: .5rem; }
.sh-sanctions-search > i { position: absolute; top: 50%; left: .9rem; color: rgba(255, 255, 255, .5); transform: translateY(-50%); }
.sh-sanctions-search .form-control { height: 44px; padding-left: 2.4rem; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 999px; background: rgba(255, 255, 255, .05) !important; color: #fff !important; }

/* Équipe : cartes verticales, couleur du rôle autour de l'avatar */
.sh-staff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  height: 100%;
  margin-bottom: 1.5rem;
  padding: 1.6rem 1.2rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tag) 16%, transparent), transparent 60%), rgba(255, 255, 255, .03);
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sh-staff-card:hover { border-color: color-mix(in srgb, var(--tag) 60%, transparent); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.sh-staff-avatar { padding: 4px; border-radius: 1.1rem; background: linear-gradient(135deg, var(--tag), color-mix(in srgb, var(--tag) 30%, #1b1c21)); box-shadow: 0 10px 26px color-mix(in srgb, var(--tag) 35%, transparent); }
.sh-staff-avatar img { display: block; width: 88px; height: 88px; border-radius: .85rem; background: #1b1c21; image-rendering: pixelated; object-fit: cover; }
.sh-staff-name { margin: .3rem 0 0; color: #fff; font-size: 1.25rem; font-weight: 800; text-transform: none; }
.sh-staff-name::after { display: none !important; }
.sh-staff-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.sh-staff-tag { padding: .22rem .7rem; border: 1px solid color-mix(in srgb, var(--tag) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tag) 20%, transparent); color: color-mix(in srgb, var(--tag) 45%, #fff); font-size: .78rem; font-weight: 700; }
.sh-staff-quote { margin: .2rem 0 0; color: rgba(255, 255, 255, .72); font-size: .9rem; font-style: italic; line-height: 1.45; }
.sh-staff-quote p { margin: 0; }
.sh-staff-links { display: flex; gap: .4rem; margin: auto 0 0; padding: .4rem 0 0; list-style: none; }
.sh-staff-links a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); transition: background-color .2s ease, color .2s ease; }
.sh-staff-links a:hover { background: var(--tag); color: #fff; }

/* CPS : arène de clic, chiffres en direct, résultat et record */
.sh-cps { max-width: 52rem; margin: 0 auto; }
.sh-cps-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.sh-cps-stats div { padding: .75rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .03); text-align: center; }
.sh-cps-stats span { display: block; color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh-cps-stats strong { color: #fff; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.sh-cps-stats .is-best strong { color: var(--bs-primary); }
.sh-cps-bar { height: 6px; margin-bottom: 1rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.sh-cps-bar span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #EFB702, #ffd24a); }
.sh-cps-arena {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 2px dashed rgba(239, 183, 2, .45);
  border-radius: 1.4rem;
  background: radial-gradient(circle at 50% 50%, rgba(239, 183, 2, .16), rgba(239, 183, 2, .03) 70%);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.sh-cps-arena:hover { border-color: var(--bs-primary); }
.sh-cps-arena:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sh-cps-arena.is-running { border-style: solid; border-color: var(--bs-primary); }
.sh-cps-arena.is-ending { border-color: #ff5956; }
.sh-cps-arena.is-hit { animation: sh-cps-hit .12s ease-out; }
@keyframes sh-cps-hit { 50% { transform: scale(.985); } }
.sh-cps-arena-text { color: var(--bs-primary); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; pointer-events: none; }
.sh-cps-result { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 1.25rem 0; padding: 1.25rem; border: 1px solid rgba(60, 207, 110, .4); border-radius: 1.2rem; background: rgba(60, 207, 110, .08); text-align: center; animation: sh-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.sh-cps-result-label { color: rgba(255, 255, 255, .6); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh-cps-result strong { color: #fff; font-size: 3rem; line-height: 1; }
.sh-cps-result small { color: rgba(255, 255, 255, .6); font-size: 1rem; }
.sh-cps-rank { color: #63e394; font-weight: 700; }
.sh-cps-record { padding: .25rem .8rem; border-radius: 999px; background: var(--bs-primary); color: #212227; font-size: .85rem; font-weight: 800; }
.sh-cps-history { margin-top: 1.5rem; }
.sh-cps-history h2 { margin: 0 0 .75rem; color: #fff; font-size: 1.1rem; font-weight: 700; text-transform: none; }
.sh-cps-history h2::after { display: none !important; }
.sh-cps-history-item { display: flex; justify-content: space-between; margin-bottom: .45rem; padding: .6rem .9rem; border-radius: .8rem; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .75); }
.sh-cps-history-item strong { color: #fff; }
.sh-cps-empty { margin: 0; color: rgba(255, 255, 255, .5); }
@media screen and (max-width: 640px) {
  .sh-cps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-cps-arena { min-height: 200px; }
}

/* Titre répété : le bandeau porte déjà le h1 de la page */
#go-to-bottom-div > h1:first-child { display: none; }
/* Pages de contenu (règlement, CGU…) : colonne de lecture, titres d'articles marqués */
.sh-page-content > .card { max-width: 56rem; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.25rem; background: rgba(255, 255, 255, .03); }
.sh-page-content > .card .card-body { padding: clamp(1.25rem, 3vw, 2.5rem); color: rgba(255, 255, 255, .85); font-size: 1.02rem; line-height: 1.75; }
.sh-page-content h2,
.sh-page-content h3 { margin: 2.2rem 0 .8rem; padding-left: .8rem; border-left: 4px solid var(--bs-primary); color: #fff; font-size: 1.35rem; text-transform: none; }
.sh-page-content h2::after,
.sh-page-content h3::after { display: none !important; }
.sh-page-content img { max-width: 100%; height: auto; }
.sh-page-content a { color: var(--bs-primary); text-decoration: underline; text-underline-offset: 3px; }
/* Pages de contenu (règlement, CGU…) : texte confortable à lire */
.page-container-content,
#go-to-bottom-div .page-content { max-width: 52rem; margin: 0 auto; color: rgba(255, 255, 255, .85); font-size: 1.02rem; line-height: 1.7; }
.page-container-content h2,
.page-container-content h3 { margin: 2rem 0 .75rem; color: #fff; text-transform: none; }
.page-container-content a { color: var(--bs-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Rideau entre les pages, et apparition douce du contenu */
.loader-wrapper.sh-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #2b2c33 0%, #18191d 72%);
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease-out, visibility .18s;
}
.loader-wrapper.sh-loader.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition-duration: .4s; }
.sh-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; transition: transform .18s ease-out; }
.loader-hidden .sh-loader-inner { transform: scale(1.08); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sh-loader-logo { width: 96px; height: auto; filter: drop-shadow(0 0 26px rgba(239, 183, 2, .45)); animation: sh-loader-float 1.6s ease-in-out var(--sh-phase, 0s) infinite; }
@keyframes sh-loader-float { 50% { transform: translateY(-6px); } }
.sh-loader-bar { width: 160px; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sh-loader-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #EFB702, transparent); animation: sh-loader-run 1s ease-in-out var(--sh-phase, 0s) infinite; }
@keyframes sh-loader-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.sh-loader .loader-text { margin: 0; color: rgba(255, 255, 255, .55); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
/* Opacité seulement : une transformation sur main déplacerait les toasts et fenêtres fixes qu'il contient */
body.sh-ready #app > main { animation: sh-content-in .5s ease both; }
@keyframes sh-content-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sh-loader-logo,
  .sh-loader-bar span,
  body.sh-ready #app > main { animation: none; }
  .loader-wrapper.sh-loader,
  .sh-loader-inner { transition-duration: .01s; }
}

@media screen and (max-width: 848px) {
  .sh-profile-head { grid-template-columns: 1fr; text-align: center; }
  .sh-profile-name,
  .sh-profile-facts,
  .sh-profile-actions,
  .sh-profile-security { justify-content: center; }
  .sh-profile-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Passe performance (28/10) : animations sur le compositeur uniquement
   ========================================================================== */

/* Pastilles « en ligne » : l'onde vient d'un pseudo-élément (transform + opacity)
   au lieu d'un box-shadow redessiné à chaque image. */
.sh-dot,
.sh-status-dot.is-on { position: relative; animation: none; }
.sh-dot::after,
.sh-status-dot.is-on::after { position: absolute; inset: 0; border-radius: 50%; background: rgba(60, 207, 110, .6); content: ""; animation: sh-ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes sh-ping { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.8); } }

/* Icônes : 1 em de large dès le premier rendu. Avant l'arrivée de leur police (première visite), les icônes
   avaient la largeur d'un caractère de secours ; à son arrivée, l'en-tête de la boutique passait de 74 à 138 px
   et toute la page sautait (CLS 0,22 mesuré). Toutes les icônes Bootstrap font exactement 1 em. */
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before { width: 1em; }

/* ==========================================================================
   Menu mobile : même langage que les menus du bureau (verre sombre, lignes arrondies, jaune pour l'actif),
   panneau sous la barre qui apparaît en fondu, liens qui arrivent en cascade, sous-menus en accordéon.
   ========================================================================== */
.header-mobile-nav .mobile-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .8rem;
  background: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.header-mobile-nav .mobile-btn:active { background: rgba(255, 255, 255, .08); }
.header-mobile-nav .mobile-btn:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
.sh-mnav-open .header-mobile-nav .mobile-btn { border-color: rgba(239, 183, 2, .35); background: rgba(239, 183, 2, .12); }
/* Trois traits qui deviennent une croix */
.sh-burger { position: relative; display: block; width: 22px; height: 16px; }
.sh-burger span { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: var(--bs-primary); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, top .3s cubic-bezier(.2, .8, .2, 1); }
.sh-burger span:nth-child(1) { top: 0; }
.sh-burger span:nth-child(2) { top: 6.75px; }
.sh-burger span:nth-child(3) { top: 13.5px; }
.sh-mnav-open .sh-burger span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.sh-mnav-open .sh-burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.sh-mnav-open .sh-burger span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }
.sh-mnav-open .header-mobile-nav::before { opacity: 1; }

.header-mobile-nav .mobile-navigation {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  margin: 0;
  padding: .75rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(22, 23, 28, .97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.sh-mnav-open .header-mobile-nav .mobile-navigation { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.header-mobile-nav .mobile-navigation::-webkit-scrollbar { display: none; }
/* Tablette : une colonne de lecture, pas des lignes étirées sur toute la largeur */
.header-mobile-nav .mobile-navigation > * { max-width: 34rem; margin-right: auto; margin-left: auto; }
@supports (backdrop-filter: blur(1px)) {
  .header-mobile-nav .mobile-navigation { background: rgba(22, 23, 28, .9); backdrop-filter: blur(18px) saturate(1.2); }
}
/* La page sous le menu ne défile pas */
body.sh-mnav-open { overflow: hidden; }

.sh-mnav-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.sh-mnav-list > li,
.sh-mnav-foot { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.sh-mnav-open .sh-mnav-list > li,
.sh-mnav-open .sh-mnav-foot { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 40ms); }

.sh-mnav-link {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 52px;
  padding: .45rem .75rem;
  border: 1px solid transparent;
  border-radius: .95rem;
  background: none;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sh-mnav-link > i:first-child {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .06);
  color: var(--bs-primary);
  font-size: 1.05rem;
  transition: background-color .15s ease, color .15s ease;
}
.sh-mnav-link:active,
.sh-mnav-link[aria-expanded="true"] { background: rgba(255, 255, 255, .05); color: #fff !important; }
.sh-mnav-link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.sh-mnav-link.is-active { border-color: rgba(239, 183, 2, .35); background: rgba(239, 183, 2, .1); color: var(--bs-primary) !important; }
.sh-mnav-link.is-active > i:first-child { background: var(--bs-primary); color: #212227; }
.sh-mnav-chevron { margin-left: auto; color: rgba(255, 255, 255, .5); font-size: .9rem; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sh-mnav-link[aria-expanded="true"] .sh-mnav-chevron { transform: rotate(180deg); }
.sh-mnav-count { min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #ff5956; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.35rem; text-align: center; }
.sh-mnav-count + .sh-mnav-chevron { margin-left: .5rem; }
.sh-mnav-link > .sh-mnav-count { margin-left: auto; }

/* Accordéon : la hauteur passe de 0 à son contenu ; replié, rien n'est atteignable au clavier */
.sh-mnav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
.sh-mnav-sub > * { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .32s; }
[aria-expanded="true"] + .sh-mnav-sub { grid-template-rows: 1fr; }
[aria-expanded="true"] + .sh-mnav-sub > * { visibility: visible; transition: none; }
.sh-mnav-sub ul { margin: 0; padding: .25rem 0 .4rem; list-style: none; }
.sh-mnav-sub li { margin-left: 1.85rem; padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.sh-mnav-sub a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 46px;
  padding: .35rem .75rem;
  border-radius: .8rem;
  color: rgba(255, 255, 255, .78);
  font-size: .97rem;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sh-mnav-sub a i { width: 1.1rem; color: rgba(239, 183, 2, .8); font-size: .95rem; text-align: center; }
.sh-mnav-sub a:active { background: rgba(255, 255, 255, .05); color: #fff; }
.sh-mnav-sub a.is-active { background: rgba(239, 183, 2, .12); color: var(--bs-primary); }
.sh-mnav-sub a.is-active i { color: var(--bs-primary); }
.sh-mnav-sub a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.sh-mnav-notifs { margin: .3rem 0 .4rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: .9rem; background: rgba(255, 255, 255, .03); }

/* Bas du panneau : Discord en appel principal, compte ensuite */
.sh-mnav-foot { display: grid; gap: .6rem; margin-top: .85rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sh-mnav-foot .sh-mnav-discord { width: 100%; min-height: 52px; padding: .6rem 1rem; border-radius: .95rem; font-size: 1.02rem; }
.sh-mnav-note { margin: -.15rem 0 .2rem; color: rgba(255, 255, 255, .55); font-size: .8rem; text-align: center; }
.sh-mnav-auth { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sh-mnav-auth a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  border-radius: .95rem;
  font-size: .95rem;
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sh-mnav-login { border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.sh-mnav-login:active { border-color: var(--bs-primary); }
.sh-mnav-register { background: var(--bs-primary); color: #212227; box-shadow: 0 8px 22px rgba(239, 183, 2, .22); }
.sh-mnav-register:hover { color: #212227; }
.sh-mnav-auth a:active,
.sh-mnav-foot .sh-mnav-discord:active { transform: scale(.97); }
.sh-mnav-user { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem .75rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .95rem; background: rgba(255, 255, 255, .03); }
.sh-mnav-user img { border-radius: .65rem; image-rendering: pixelated; }
.sh-mnav-user-id { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sh-mnav-user-id strong { overflow: hidden; color: #fff; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.sh-mnav-user-id span { display: inline-flex; align-items: center; gap: .3rem; color: var(--bs-primary); font-size: .82rem; font-weight: 600; }
.sh-mnav-logout { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border-radius: .8rem; background: rgba(255, 89, 86, .12); color: #ff8a87; font-size: 1.15rem; }
.sh-mnav-logout:active { background: rgba(255, 89, 86, .22); color: #ff8a87; }
.sh-mnav-account { margin-bottom: .15rem; }
.sh-mnav-account > li { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .header-mobile-nav .mobile-navigation,
  .sh-mnav-list > li,
  .sh-mnav-foot,
  .sh-mnav-sub,
  .sh-burger span,
  .sh-mnav-chevron { transition: none !important; }
  .sh-mnav-list > li,
  .sh-mnav-foot { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-dot::after,
  .sh-status-dot.is-on::after { display: none; }
}

/* ==========================================================================
   Mobile (848 px et moins) : on joue sur PC, donc aucun « Copier l'IP » dans l'en-tête (le Discord seul) ;
   ailleurs (rejoindre, pied de page) l'adresse reste lisible en texte, à retenir pour le PC.
   ========================================================================== */
.sh-mobile-only,
.sh-ip-plain { display: none; }
.sh-ip-plain { align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem 1.1rem; border: 1px dashed rgba(239, 183, 2, .45); border-radius: .9rem; background: rgba(239, 183, 2, .06); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.sh-ip-plain i { color: var(--bs-primary); }
@media screen and (max-width: 848px) {
  .sh-mobile-only { display: inline; }
  .sh-hero-actions .sh-copy,
  .sh-pagehero-actions .sh-copy,
  .sh-footer-cta .sh-copy,
  .sh-join .sh-copy { display: none; }
  .sh-ip-plain { display: inline-flex; }
  .sh-pagehero-actions { grid-template-columns: 1fr; }
  .sh-pagehero .sh-btn-discord { width: 100%; }
  .sh-footer-cta-actions { flex-direction: column; align-items: stretch; }
  .sh-footer-cta .sh-btn-discord { width: 100%; }
  .sh-join .sh-ip-plain { width: 100%; }
  /* Podium : le cadre épouse le skin (il était haut de 180 px pour un skin de 110 px) */
  .podium-item .podium-avatar { height: 122px; }
  .podium-item.gold .podium-avatar { height: 146px; }
  .podium-item.gold .skin-render { max-height: 134px; }
  .podium-item .podium-info { margin-top: .5rem; }
  .podium-item .rank-badge { margin-bottom: .15rem; font-size: 1.25rem; }
}

/* Vote sur téléphone : une ligne par site (numéro, nom, bouton sous le pouce), les 4 sites tiennent sur un écran */
@media screen and (max-width: 560px) {
  /* Bandeau plus court : le fil d'Ariane (le menu montre déjà la page) laisse sa place au contenu */
  .small-header,
  .small-header .header-content { height: 258px; }
  .sh-crumbs { display: none; }
  #app > header { margin-bottom: 1.1rem; }
  #vote-card { padding: .75rem; }
  #vote-card .vote-sites-grid { grid-template-columns: 1fr; gap: .6rem; }
  .vote-site-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .65rem .65rem .65rem .75rem; border-radius: 1rem; }
  .vote-site-card .sh-site-top { flex: 1 1 0; gap: .65rem; }
  .sh-site-num { width: 2.3rem; height: 2.3rem; border-radius: .75rem; }
  .sh-site-name { font-size: 1rem; }
  .sh-site-domain { font-size: .76rem; }
  /* L'état se lit déjà sur la carte (couleur, coche, bouton) : le badge reste pour les lecteurs d'écran */
  .vote-site-card .sh-site-badge { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Même largeur dans tous les états : les noms et les boutons restent alignés d'une carte à l'autre */
  .vote-site-card .sh-site-cta.btn-vote2 { flex: 0 0 8.75rem; width: 8.75rem; min-height: 48px; margin: 0; padding: .5rem .6rem; border-radius: .8rem; }
  .sh-site-cta .sh-cta-verifying { gap: .4rem; font-size: .9rem; }
  .sh-cta-long { display: none; }
  .vote-site-card[data-state="done"] .vote-timer { gap: .35rem; }
  .vote-site-card[data-state="done"] .vote-timer::before { color: #63e394; font-family: "bootstrap-icons"; font-weight: 400; content: "\f597"; }
  .vote-site-card[data-state="done"] .vote-timer:empty::before { font-family: inherit; font-weight: 600; content: "Voté !"; }
  .vote-site-card .sh-site-state { flex-basis: 100%; margin: 0; text-align: left; }
  .sh-burst { right: 4.4rem; bottom: 2.4rem; left: auto; }
  .sh-vote-me { gap: .7rem .8rem; padding: .7rem; }
  .sh-vote-me-avatar { width: 44px; height: 44px; }
  .sh-vote-progress-head { font-size: .88rem; }
  .sh-vote-goal { gap: .7rem; padding: .65rem .75rem; }
  .sh-vote-goal-body { font-size: .88rem; }
  .sh-vote-hint { margin-bottom: 0; font-size: .8rem; }
  .sh-vote-rewards span { line-height: 1.25; }
  /* Classement : lignes plus serrées, le top 15 se parcourt d'un coup de pouce */
  .ranking-card .card-body { padding: 1rem .75rem; }
  .ranking-card .podium-grid { margin-bottom: 1.75rem !important; }
  .ranking-list { gap: .45rem; }
  .ranking-item { padding: .55rem .8rem; border-radius: .9rem; }
  .ranking-item .rank-badge { width: 2.6rem; font-size: 1.05rem; }
  .ranking-item .player-info { gap: .65rem; min-width: 0; }
  .ranking-item .player-info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ranking-item .avatar-sm { width: 34px; height: 34px; border-radius: .6rem; image-rendering: pixelated; }
  .ranking-item .vote-stats { flex-shrink: 0; }
}
/* Au doigt, les survols restent collés après un toucher : on ne garde que l'enfoncement au clic */
@media (hover: none) {
  .vote-site-card:not(.is-done):not(.is-verifying):hover { border-color: rgba(255, 255, 255, .1) !important; box-shadow: none; }
  .vote-site-card.sh-next:hover { border-color: rgba(239, 183, 2, .6) !important; box-shadow: 0 0 0 1px rgba(239, 183, 2, .3), 0 14px 34px rgba(239, 183, 2, .12); }
  .vote-site-card .sh-site-cta.btn-vote2:hover { background: var(--bs-primary); box-shadow: 0 8px 22px rgba(239, 183, 2, .22); transform: none; }
  .sh-btn-ip:hover,
  .sh-btn-discord:hover { transform: none; }
  .sh-site-cta,
  .sh-vote-name-btn,
  .sh-btn-discord { -webkit-tap-highlight-color: transparent; }
}

/* ==========================================================================
   Refonte v6 (28/10 soir) : meilleur donateur en buste 3D, paiement PayPal, sous-pages restantes
   ========================================================================== */

/* Meilleur donateur du mois : une scène (rayons, socle, buste 3D du skin porté en jeu) puis une plaque dorée */
.sh-top-donor { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(239, 183, 2, .5); border-radius: 1.25rem; background: radial-gradient(120% 70% at 50% 0%, rgba(239, 183, 2, .3), transparent 62%), linear-gradient(180deg, #2c2716 0%, #1e1f23 70%); box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 1px rgba(239, 183, 2, .08) inset; text-align: center; }
.sh-top-donor::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 190, .16) 50%, transparent 65%); transform: translateX(-120%); animation: sh-donor-shine 7s ease-in-out 1.2s infinite; pointer-events: none; }
.sh-top-donor-stage { position: relative; display: grid; place-items: end center; height: 236px; padding-top: 1rem; }
.sh-top-donor-rays { position: absolute; top: 44%; left: 50%; z-index: -1; width: 420px; height: 420px; margin: -210px 0 0 -210px; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .2) 0deg 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); animation: sh-donor-spin 60s linear infinite; }
.sh-top-donor-pedestal { position: absolute; bottom: 4px; left: 50%; z-index: -1; width: 190px; height: 40px; margin-left: -95px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 214, 90, .55), rgba(239, 183, 2, .15) 55%, transparent 72%); }
.sh-top-donor-pedestal::before { content: ""; position: absolute; inset: 9px 22px; border: 2px solid rgba(255, 214, 90, .55); border-radius: 50%; }
.sh-top-donor-bust { position: relative; width: 150px; height: auto; margin-bottom: 10px; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .55)); animation: sh-donor-float 6s ease-in-out infinite; }
.sh-top-donor-bust.is-avatar { width: 112px; margin-bottom: 26px; border-radius: 1rem; image-rendering: pixelated; }
.sh-top-donor-stage::before,
.sh-top-donor-stage::after { content: "\2726"; position: absolute; color: #ffe08a; text-shadow: 0 0 10px rgba(255, 214, 90, .8); animation: sh-donor-twinkle 3.2s ease-in-out infinite; }
.sh-top-donor-stage::before { top: 34px; left: 30px; font-size: 1rem; }
.sh-top-donor-stage::after { top: 74px; right: 28px; font-size: .75rem; animation-delay: 1.4s; }
.sh-top-donor-plate { position: relative; z-index: 1; padding: .95rem 1rem 1.15rem; border-top: 1px solid rgba(239, 183, 2, .3); background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .1)); }
.sh-top-donor-label { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(239, 183, 2, .16); color: #ffd965; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sh-top-donor-name { display: block; margin-top: .45rem; overflow-wrap: anywhere; background: linear-gradient(180deg, #fff6d2 0%, #ffd23f 55%, #d99a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.55rem; font-weight: 800; line-height: 1.15; filter: drop-shadow(0 2px 6px rgba(239, 183, 2, .25)); }
.sh-top-donor-amount { display: block; margin-top: .15rem; color: #fff; font-weight: 700; }
.sh-top-donor-thanks { margin: .35rem 0 0; color: rgba(255, 255, 255, .72); font-size: .86rem; }
@keyframes sh-donor-spin { to { transform: rotate(360deg); } }
@keyframes sh-donor-float { 50% { transform: translateY(-6px); } }
@keyframes sh-donor-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes sh-donor-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .sh-top-donor::after,
  .sh-top-donor-rays,
  .sh-top-donor-bust,
  .sh-top-donor-stage::before,
  .sh-top-donor-stage::after { animation: none; }
}
/* Mobile : le donateur passe avant les articles (en carte horizontale), les derniers achats après */
@media screen and (max-width: 848px) {
  .sh-shop-aside { display: contents; }
  .sh-top-donor { order: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; text-align: left; }
  .sh-shop-layout > .sh-shop-grid { order: 1; }
  .sh-shop-aside > .sh-aside-card { order: 2; }
  .sh-top-donor-stage { height: 158px; padding-top: .5rem; }
  .sh-top-donor-rays { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .sh-top-donor-pedestal { width: 120px; height: 28px; margin-left: -60px; }
  .sh-top-donor-pedestal::before { inset: 6px 14px; }
  .sh-top-donor-bust { width: 98px; margin-bottom: 8px; }
  .sh-top-donor-plate { border-top: 0; background: none; padding: .75rem 1rem .75rem 0; }
  .sh-top-donor-stage::after { right: 8px; }
}

/* Panneaux génériques des sous-pages (paiement, support, compte…) */
.sh-panel { padding: 1.4rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1rem; background: rgba(255, 255, 255, .03); }
.sh-panel-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; color: #fff; font-size: 1.15rem; font-weight: 700; text-transform: none; }
.sh-panel-title::after { display: none !important; }
.sh-panel-title i { color: var(--bs-primary); }

/* Étapes de l'achat */
.sh-funnel { display: flex; justify-content: center; gap: .5rem; margin: 0 auto 1.75rem; padding: 0; list-style: none; }
.sh-funnel li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: rgba(255, 255, 255, .55); font-size: .88rem; font-weight: 600; }
.sh-funnel li.is-done { border-color: rgba(60, 207, 110, .35); color: #63e394; }
.sh-funnel li.is-current { border-color: var(--bs-primary); background: rgba(239, 183, 2, .12); color: #fff; }
.sh-funnel li.is-current i { color: var(--bs-primary); }

/* Paiement PayPal : récapitulatif à gauche, moyens de paiement à droite */
.sh-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 1.5rem; align-items: start; max-width: 62rem; margin: 0 auto 1rem; }
.sh-checkout-items { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.sh-checkout-items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .7rem .85rem; border-radius: .85rem; background: rgba(255, 255, 255, .04); }
.sh-checkout-item-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: rgba(239, 183, 2, .14); color: var(--bs-primary); font-size: 1.1rem; }
.sh-checkout-item-name { overflow-wrap: anywhere; color: #fff; font-weight: 600; }
.sh-checkout-item-name small { color: rgba(255, 255, 255, .6); font-weight: 500; }
.sh-checkout-item-price { color: rgba(255, 255, 255, .85); font-weight: 600; white-space: nowrap; }
.sh-checkout-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, .14); }
.sh-checkout-total span { color: rgba(255, 255, 255, .7); }
.sh-checkout-total strong { color: var(--bs-primary); font-size: 1.5rem; }
.sh-checkout-recipient { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; padding: .75rem .9rem; border: 1px solid rgba(60, 207, 110, .25); border-radius: .9rem; background: rgba(60, 207, 110, .07); }
.sh-checkout-recipient img { border-radius: .6rem; image-rendering: pixelated; }
.sh-checkout-recipient span { display: block; color: rgba(255, 255, 255, .6); font-size: .78rem; }
.sh-checkout-recipient strong { color: #fff; }
.sh-checkout-credit { display: flex; flex-direction: column; gap: .35rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .92rem; }
.sh-checkout-credit li { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, .7); }
.sh-checkout-credit strong { color: #fff; }
.sh-checkout-credit .is-plus { color: #63e394; }
.sh-checkout-pay { border-color: rgba(239, 183, 2, .35); background: linear-gradient(180deg, rgba(239, 183, 2, .07), rgba(255, 255, 255, .02)); }
.sh-checkout-for { display: none; margin: -.6rem 0 1rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.sh-checkout-for strong { color: #fff; }
.sh-checkout-amount { margin: -.35rem 0 1rem; color: #fff; font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.sh-checkout-buttons { position: relative; min-height: 110px; }
.sh-checkout-buttons #googlepay-container.googlepay-button { height: 48px; margin-bottom: .6rem; }
.sh-checkout-buttons #applepay-container:not(:empty) { margin-bottom: .6rem; }
/* Silhouette des deux boutons PayPal (PayPal, carte) tant que le SDK charge */
.sh-checkout-skeleton { display: grid; gap: 14px; }
.sh-checkout-skeleton span { height: 48px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .06) 75%); background-size: 200% 100%; animation: sh-skeleton 1.3s linear infinite; }
.sh-checkout-buttons.is-ready .sh-checkout-skeleton { display: none; }
@keyframes sh-skeleton { to { background-position: -200% 0; } }
.sh-checkout-loader { position: absolute; inset: -6px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; border-radius: 1rem; background: rgba(30, 31, 35, .92); color: #fff; font-weight: 600; }
.sh-checkout-loader.d-none { display: none !important; }
.sh-checkout-loader .spinner-border { color: var(--bs-primary); }
.sh-checkout-error { display: flex; gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid rgba(255, 89, 86, .45); border-radius: .9rem; background: rgba(255, 89, 86, .1); color: #fff; }
.sh-checkout-error.d-none { display: none !important; }
.sh-checkout-error > i { color: #ff8a87; font-size: 1.2rem; }
.sh-checkout-error span,
.sh-checkout-error small { display: block; overflow-wrap: anywhere; }
.sh-checkout-error small { margin-top: .25rem; color: rgba(255, 255, 255, .7); }
.sh-checkout-hint { margin: .5rem 0 1rem; color: rgba(255, 255, 255, .72); font-size: .88rem; }
.sh-checkout-hint i { margin-right: .3rem; color: var(--bs-primary); }
.sh-checkout-trust { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.1rem; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .08); list-style: none; color: rgba(255, 255, 255, .78); font-size: .86rem; }
.sh-checkout-trust li { display: flex; gap: .55rem; }
.sh-checkout-trust i { color: #63e394; }
.sh-checkout-cancel { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: rgba(255, 255, 255, .7); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.sh-checkout-cancel:hover { color: #fff; }
@media screen and (max-width: 848px) {
  .sh-checkout { grid-template-columns: 1fr; }
  .sh-checkout-pay { order: -1; }
  .sh-checkout-for { display: block; }
  .sh-funnel li span { display: none; }
  .sh-funnel li.is-current span { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-checkout-skeleton span { animation: none; }
}
/* Boutons PayPal et Google Pay : leurs cadres sont en thème clair, un parent sombre leur donnait un fond blanc opaque */
#paypal-button-container,
#googlepay-container { color-scheme: light; }
.sh-checkout-next-title { margin: 1.4rem 0 .6rem; color: rgba(255, 255, 255, .6); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh-checkout-next-title::after { display: none !important; }
.sh-checkout-next { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .8); font-size: .9rem; }
.sh-checkout-next li { display: flex; align-items: center; gap: .65rem; }
.sh-checkout-next p { margin: 0; }
.sh-checkout-next span { display: grid; flex: 0 0 auto; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: .78rem; font-weight: 700; }
.sh-checkout-next a { display: inline; color: var(--bs-primary); }

/* Colonne étroite des formulaires (pseudo boutique, informations d'article, ticket…) */
.sh-narrow { max-width: 34rem; margin: 0 auto; }
.sh-narrow.is-wide { max-width: 52rem; }
.sh-form .form-label { color: rgba(255, 255, 255, .85); font-weight: 600; }
.sh-form .form-control,
.sh-form .form-select,
.sh-posts-search .form-control,
#go-to-bottom-div.user .card .form-control,
#go-to-bottom-div.profile > .card .form-control { min-height: 46px; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: .75rem; background-color: rgba(255, 255, 255, .05) !important; color: #fff !important; box-shadow: none; }
.sh-form .form-control:focus,
.sh-form .form-select:focus,
.sh-posts-search .form-control:focus,
#go-to-bottom-div.user .card .form-control:focus,
#go-to-bottom-div.profile > .card .form-control:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 .2rem rgba(239, 183, 2, .22); }
.sh-form .form-select option { background: #1f2024; }
.sh-form .form-text { color: rgba(255, 255, 255, .55); }
.sh-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.25rem; }
.sh-form .EasyMDEContainer .CodeMirror,
.sh-form .editor-toolbar { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .04); color: #fff; }
.sh-form .editor-toolbar button { color: rgba(255, 255, 255, .8) !important; }
.sh-form .editor-toolbar button:hover,
.sh-form .editor-toolbar button.active { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); }
.sh-form .CodeMirror-cursor { border-color: #fff; }
.sh-form .editor-statusbar { color: rgba(255, 255, 255, .5); }

/* Moyens de paiement (panier, abonnement) : une ligne cliquable par moyen, logo, libellé clair */
.sh-gateways { display: grid; gap: .75rem; max-width: 40rem; margin: 0 auto 1.5rem; }
.sh-gateway { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .85rem 1.1rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; background: rgba(255, 255, 255, .03); color: #fff; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.sh-gateway:hover { transform: translateY(-2px); border-color: var(--bs-primary); background: rgba(239, 183, 2, .07); color: #fff; }
.sh-gateway:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sh-gateway-logo { display: grid; place-items: center; height: 3rem; padding: .35rem .5rem; border-radius: .6rem; background: #fff; }
.sh-gateway-logo img { max-width: 100%; max-height: 2.2rem; object-fit: contain; }
.sh-gateway-text strong { display: block; font-size: 1.05rem; }
.sh-gateway-text small { color: rgba(255, 255, 255, .65); }
.sh-gateway-go { color: rgba(255, 255, 255, .45); font-size: 1.1rem; transition: transform .2s ease, color .2s ease; }
.sh-gateway:hover .sh-gateway-go { transform: translateX(3px); color: var(--bs-primary); }
.sh-offer-img { max-width: 72px; max-height: 72px; margin-bottom: .25rem; object-fit: contain; }

/* Dedipass : marche à suivre à gauche, module Dedipass (blanc, non stylable) dans un cadre net à droite */
.sh-dedipass { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.sh-dedipass-note { margin: 1rem 0 .5rem; color: rgba(255, 255, 255, .6); font-size: .84rem; }
.sh-dedipass-widget { min-height: 16rem; padding: 1rem; overflow: hidden; border: 1px solid rgba(239, 183, 2, .35); border-radius: 1.1rem; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); color: #212227; }
@media screen and (max-width: 848px) {
  .sh-dedipass { grid-template-columns: 1fr; }
  .sh-dedipass-widget { order: -1; padding: .5rem; }
}

/* Pages d'erreur (404, 403, 500…) et pages d'information de trackurl */
.sh-error { display: flex; flex-direction: column; align-items: center; max-width: 40rem; margin: 0 auto; padding: 1rem 0 1.5rem; text-align: center; }
.sh-error-code { margin: 0; background: linear-gradient(180deg, #fff1c2, #efb702 60%, #b88400); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(5rem, 16vw, 8.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; filter: drop-shadow(0 10px 30px rgba(239, 183, 2, .25)); }
.sh-error-code.is-icon { display: grid; place-items: center; width: 6rem; height: 6rem; margin-bottom: .5rem; border-radius: 50%; background: rgba(239, 183, 2, .12); -webkit-background-clip: border-box; background-clip: border-box; color: var(--bs-primary); font-size: 2.8rem; filter: none; }
.sh-error-title { margin: .75rem 0 .5rem; color: #fff; font-size: 1.5rem; font-weight: 700; text-transform: none; }
.sh-error-title::after { display: none !important; }
.sh-error-message { margin: 0 0 1.5rem; color: rgba(255, 255, 255, .72); }
.sh-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.sh-error-help { margin: 1.5rem 0 0; color: rgba(255, 255, 255, .6); font-size: .9rem; }
.sh-error-help a { color: var(--bs-primary); }

/* Lignes cliquables (tickets, notifications) : même langage que « Vos paiements » */
a.sh-row-link { color: inherit; text-decoration: none; }
a.sh-row-link:hover { border-color: rgba(239, 183, 2, .45); color: inherit; }
a.sh-row-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sh-row-link.is-unread { border-left: 3px solid var(--bs-primary); }
.sh-pay-main .sh-row-wrap { overflow: visible; white-space: normal; }
.sh-status-pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font-size: .75rem; font-weight: 700; }
.sh-status-pill.is-success { background: rgba(60, 207, 110, .15); color: #63e394; }
.sh-status-pill.is-warning { background: rgba(239, 183, 2, .15); color: var(--bs-primary); }
.sh-status-pill.is-danger { background: rgba(255, 89, 86, .15); color: #ff8a87; }
.sh-status-pill.is-info,
.sh-status-pill.is-primary { background: rgba(88, 101, 242, .18); color: #b3baff; }

/* Support */
.sh-support-info { display: flex; gap: .7rem; max-width: 52rem; margin: 0 auto 1.25rem; padding: .9rem 1.1rem; border-left: 3px solid var(--bs-primary); border-radius: .8rem; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); }
.sh-support-info > i { color: var(--bs-primary); }
.sh-support-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.sh-support-head .sh-pay-title { margin: 0; }
.sh-support-discord { margin: 1.5rem 0 0; color: rgba(255, 255, 255, .65); font-size: .9rem; text-align: center; }
.sh-support-discord a { color: var(--bs-primary); }
.sh-support-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 24rem)); justify-content: center; gap: .9rem; max-width: 60rem; margin: 0 auto; }
.sh-support-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; background: rgba(255, 255, 255, .03); color: #fff; text-decoration: none; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.sh-support-cat:hover { transform: translateY(-2px); border-color: var(--bs-primary); background: rgba(239, 183, 2, .06); color: #fff; }
.sh-support-cat-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: rgba(239, 183, 2, .14); color: var(--bs-primary); font-size: 1.4rem; }
.sh-support-cat-text strong { display: block; font-size: 1.05rem; }
.sh-support-cat-text span { display: block; margin-top: .15rem; color: rgba(255, 255, 255, .65); font-size: .88rem; }
.sh-support-cat:hover .sh-gateway-go { transform: translateX(3px); color: var(--bs-primary); }
.sh-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.sh-ticket-head .sh-checkout-cancel { margin-left: auto; }
.sh-thread { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.sh-thread-item { display: flex; align-items: flex-start; gap: .75rem; max-width: 85%; }
.sh-thread-item img { flex: 0 0 auto; border-radius: .7rem; image-rendering: pixelated; }
.sh-thread-item.is-mine { flex-direction: row-reverse; align-self: flex-end; }
.sh-thread-bubble { min-width: 0; padding: .8rem 1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: .3rem 1rem 1rem 1rem; background: rgba(255, 255, 255, .04); }
.sh-thread-item.is-mine .sh-thread-bubble { border-color: rgba(239, 183, 2, .3); border-radius: 1rem .3rem 1rem 1rem; background: rgba(239, 183, 2, .08); }
.sh-thread-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 .35rem; font-size: .8rem; }
.sh-thread-meta strong { color: #fff; }
.sh-thread-meta time { color: rgba(255, 255, 255, .5); }
.sh-thread-body { overflow-wrap: anywhere; color: rgba(255, 255, 255, .88); }
.sh-thread-body > :last-child { margin-bottom: 0; }
.sh-thread-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.sh-ticket-closed { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .8); }
.sh-ticket-closed form { margin-left: auto; }
@media screen and (max-width: 640px) {
  .sh-thread-item { max-width: 100%; }
  .sh-ticket-head .sh-checkout-cancel { margin-left: 0; }
}

/* Actualités */
.sh-posts-search { position: relative; max-width: 26rem; margin: 0 auto 1.5rem; }
.sh-posts-search > i { position: absolute; top: 50%; left: 1rem; z-index: 1; color: rgba(255, 255, 255, .5); transform: translateY(-50%); }
.sh-posts-search .form-control { padding-left: 2.6rem; border-radius: 999px; }
.sh-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; }
.sh-post { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1rem; background: rgba(255, 255, 255, .03); transition: transform .25s ease, border-color .25s ease; }
.sh-post:hover { transform: translateY(-3px); border-color: rgba(239, 183, 2, .45); }
.sh-post-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sh-post-body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.25rem; }
.sh-post-body time { color: rgba(255, 255, 255, .55); font-size: .8rem; }
.sh-post-body h2 { margin: 0; font-size: 1.2rem; text-transform: none; }
.sh-post-body h2::after { display: none !important; }
.sh-post-body h2 a { color: #fff; text-decoration: none; }
.sh-post-body p { margin: 0; color: rgba(255, 255, 255, .72); }
.sh-post-more { margin-top: auto; color: var(--bs-primary); font-weight: 700; text-decoration: none; }

/* Mon skin (anciennes adresses /skin-api et /skin3d) */
.sh-skin-page { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.sh-skin-page canvas { display: block; width: 220px; height: 300px; background: radial-gradient(circle at 50% 60%, rgba(239, 183, 2, .16), transparent 65%); cursor: grab; }
.sh-skin-page .sh-panel-title { margin: .5rem 0 0; }
.sh-skin-page-text { margin: 0 0 .75rem; color: rgba(255, 255, 255, .7); }
.sh-skin-page-icon { color: var(--bs-primary); font-size: 2.5rem; }

/* Pages du compte sans surcharge (mot de passe oublié, double authentification, e-mail à vérifier, suppression) :
   le titre est dans le bandeau, une colonne de formulaire comme les autres */
#go-to-bottom-div.user > .row > [class*="col"] > h1:first-child,
#go-to-bottom-div.profile > h1:first-child { display: none; }
#go-to-bottom-div.user > .row > [class*="col"] { width: 100%; max-width: 34rem; }
#go-to-bottom-div.user .card,
#go-to-bottom-div.profile > .card { border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1rem; background: rgba(255, 255, 255, .03); box-shadow: none; }
#go-to-bottom-div.profile > .card { max-width: 46rem; margin: 0 auto 1.25rem; }
#go-to-bottom-div.user .card-body,
#go-to-bottom-div.profile > .card > .card-body { padding: 1.5rem; color: rgba(255, 255, 255, .85); }
#go-to-bottom-div.user .card .btn,
#go-to-bottom-div.profile > .card .btn { min-height: 44px; border-radius: 999px; font-weight: 700; }
#go-to-bottom-div.user .card .btn-secondary,
#go-to-bottom-div.profile > .card .btn-secondary { border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #fff; }
#go-to-bottom-div.user .card a:not(.btn) { color: var(--bs-primary); }
#go-to-bottom-div.profile > .card img { border-radius: .75rem; background: #fff; padding: .5rem; }
/* Une 404 passe par la route des pages de contenu (.sh-page-content) : ses liens soulignés et ses titres marqués ne s'appliquent pas ici */
.sh-error .sh-error-title { margin: .75rem 0 .5rem; padding-left: 0; border-left: 0; }
.sh-error .sh-shop-topup,
.sh-error .sh-shop-secondary { text-decoration: none; }
.sh-error .sh-shop-topup { color: #212227; }
.sh-error .sh-shop-secondary { color: #fff; }
/* Boutons jaunes des pages du compte (connexion comprise) : texte foncé, le gris clair sur jaune était illisible (contraste 1,6:1) */
#go-to-bottom-div.user .card .btn-login,
#go-to-bottom-div.user .card .btn-register,
#go-to-bottom-div.user .card .btn-primary,
#go-to-bottom-div.profile > .card .btn-primary { color: #212227; }
/* Double authentification : case à cocher et texte sur une ligne, boutons alignés */
#go-to-bottom-div.profile > .card .mb-3:has(> .form-check-input) { display: flex; align-items: flex-start; gap: .65rem; }
#go-to-bottom-div.profile > .card .mb-3 > .form-check-input { flex: 0 0 auto; margin-top: .2rem; }
#go-to-bottom-div.user .card .btn,
#go-to-bottom-div.profile > .card .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; vertical-align: middle; }