/* Pages jeux, refonte visuelle (chantier 738, 01/10/2026). Classes posees par assets/js/hs-jeux.js.
   Couleurs : uniquement les variables du site (--hs-*) et --jeu-accent,
   qui reprend la couleur d'accent deja utilisee par la page (bouton CTA).
   --jeu-scene : l'illustration de fond deja chargee par le heros. */

/* P1 : CTA final sur la scene du jeu */
.hs-cta-jeu {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--hs-surface) !important;
}
.hs-cta-jeu::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--jeu-scene) center / cover no-repeat;
}
.hs-cta-jeu::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hs-surface) 70%, transparent) 0%,
                            color-mix(in srgb, var(--hs-surface) 92%, transparent) 100%);
}

/* P2 : Tarifs, halo d'accent + scene en filigrane qui s'efface vers le bas */
#tarifs.hs-scene { position: relative; isolation: isolate; }
#tarifs.hs-scene::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--jeu-accent) 16%, transparent), transparent 70%),
    var(--jeu-scene) center top / cover no-repeat;
  opacity: .3;
  /* fondu sur tous les bords : haut (linéaire) et côtés/bas (radial), sans arête */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%), radial-gradient(75% 90% at 50% 0%, #000 25%, transparent 80%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent, #000 22%), radial-gradient(75% 90% at 50% 0%, #000 25%, transparent 80%);
          mask-composite: intersect;
}

/* P3 : console factice encadree en fenetre de panel */
.hs-fenetre { border-radius: .75rem; overflow: hidden; border: 1px solid var(--hs-bord-fort);
  box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--jeu-accent) 35%, transparent); }
.hs-fenetre-barre { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem;
  background: var(--hs-surface-2); border-bottom: 1px solid var(--hs-bord);
  font-size: .75rem; color: var(--hs-muet); }
.hs-fenetre-barre i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--hs-bord-fort); }
.hs-fenetre-barre i:first-child { background: var(--jeu-accent); }
.hs-fenetre-barre span { margin-left: .5rem; }
.hs-fenetre > .font-mono { border-radius: 0 !important; }

/* Articles : sans image ni icone, le texte prend toute la largeur (demande de Mathis 01/10) */
article > .flex.items-start > .w-16.h-16:has(+ div a[href*="blog/"]) { display: none !important; }
article > .flex.items-start > .w-16.h-16:has(+ div a[href*="blog/"]) + div { margin-left: 0 !important; }

/* P5 : Avis, guillemet geant et avatars teintes */
.hs-avis { position: relative; overflow: hidden; }
.hs-avis::after { content: "\201C"; position: absolute; right: 1rem; top: .45rem;
  font: 700 4.5rem/.8 Georgia, serif; color: var(--jeu-accent); opacity: .12; pointer-events: none; }
.hs-avis .rounded-full { background: color-mix(in srgb, var(--jeu-accent) 22%, var(--hs-surface-2)) !important; }

/* P6 : couture lumineuse entre deux sections */
.hs-couture { position: relative; }
/* pas sur les blocs dont le ::before porte deja une scene (P1, P2, P8) */
.hs-couture:not(.hs-scene):not(.hs-cta-jeu):not(.hs-composants)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(720px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--jeu-accent) 55%, transparent), transparent); }

/* P7 : mobile, offres en carrousel horizontal au lieu de 5 cartes empilees */
@media (max-width: 767px) {
  /* specificite > .flex.flex-wrap:has(> .hs-card) de hs-pro.css, qui force la grille */
  #tarifs .flex.flex-wrap.hs-offres-defil { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .9rem !important; padding: .5rem 1rem 1rem; margin: 0 -1rem; scrollbar-width: none; }
  .hs-offres-defil::-webkit-scrollbar { display: none; }
  #tarifs .hs-offres-defil > * { flex: 0 0 82%; width: 82% !important; scroll-snap-align: center; }
}

/* P10 : onglet Configuration en mini IDE (statique : ni JS d'animation ni police chargee) */
.hs-ide { min-width: 0; border-radius: .75rem; overflow: hidden; border: 1px solid var(--hs-bord-fort);
  background: var(--hs-page); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--jeu-accent) 35%, transparent);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.hs-ide-barre { display: flex; align-items: center; gap: .4rem; height: 2.25rem; padding-left: .8rem;
  background: var(--hs-surface-2); border-bottom: 1px solid var(--hs-bord); }
.hs-ide-barre i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--hs-bord-fort); }
.hs-ide-barre i:first-child { background: var(--jeu-accent); }
.hs-ide-onglet { align-self: stretch; display: flex; align-items: center; margin-left: .8rem; padding: 0 .9rem;
  background: var(--hs-page); box-shadow: inset 0 2px 0 var(--jeu-accent); font: .75rem var(--mono); color: var(--hs-texte); }
.hs-ide-code { margin: 0; padding: .6rem 0; min-height: 13.5rem; overflow-x: auto; counter-reset: l;
  font: .8125rem/1.75 var(--mono); color: var(--hs-muet); background: var(--hs-page); }
.hs-ide-code .l { display: block; width: max-content; min-width: 100%; padding-right: 1rem; white-space: pre; }
.hs-ide-code .l::before { counter-increment: l; content: counter(l); position: sticky; left: 0; display: inline-block;
  width: 2.5rem; margin-right: .9rem; padding-right: .7rem; text-align: right; color: var(--hs-muet-2);
  background: var(--hs-page); border-right: 1px solid var(--hs-bord); }
.hs-ide-code .act { background: color-mix(in srgb, var(--hs-texte) 5%, transparent); }
.hs-ide-code .act::before { color: var(--hs-texte); background: color-mix(in srgb, var(--hs-texte) 5%, var(--hs-page)); }
.hs-ide-code .k { color: var(--hs-texte-2); }
.hs-ide-code .s { color: var(--hs-vert); }
.hs-ide-code .n { color: var(--hs-rose); }
.hs-ide-code .c { color: var(--hs-muet-2); font-style: italic; }
.hs-ide-code .h { color: var(--hs-texte-2); }
.hs-ide-etat { display: flex; justify-content: space-between; padding: .3rem .9rem; font: .6875rem var(--mono);
  color: var(--hs-muet); background: var(--hs-surface-2); border-top: 1px solid var(--hs-bord); }

/* P11 : sous-onglet txAdmin (FiveM), tableau de bord imite. Statique, aucune image ni animation. */
.hs-tx { display: grid; grid-template-columns: 9.5rem 1fr; min-width: 0; border-radius: .75rem; overflow: hidden;
  border: 1px solid var(--hs-bord-fort); background: var(--hs-page); font-size: .75rem; color: var(--hs-texte-2);
  box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--jeu-accent) 35%, transparent); }
.hs-tx-nav { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .5rem; background: var(--hs-surface);
  border-right: 1px solid var(--hs-bord); }
.hs-tx-marque { padding: 0 .5rem .6rem; font-size: .95rem; font-weight: 600; color: var(--hs-texte); letter-spacing: -.01em; }
.hs-tx-marque b { color: var(--hs-rose); }
.hs-tx-lien { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: .4rem; color: var(--hs-muet); white-space: nowrap; }
.hs-tx-lien .fa-icon { width: .85rem; height: .85rem; flex-shrink: 0; }
.hs-tx-lien.on { background: var(--hs-surface-2); color: var(--hs-texte); }
.hs-tx-lien.on .fa-icon { color: var(--hs-rose); }
.hs-tx-main { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .7rem; }
.hs-tx-tete { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--hs-texte); }
.hs-tx-online { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border-radius: 999px;
  font-size: .6875rem; color: var(--hs-vert); background: var(--hs-vert-doux); }
.hs-tx-online::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.hs-tx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hs-tx-stats > div, .hs-tx-carte { padding: .45rem .6rem; border-radius: .5rem; background: var(--hs-surface); border: 1px solid var(--hs-bord); }
.hs-tx small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .625rem; color: var(--hs-muet); text-transform: uppercase; letter-spacing: .04em; }
.hs-tx-stats b { white-space: nowrap; font-size: 1rem; color: var(--hs-texte); }
.hs-tx-stats em { font-style: normal; font-size: .7rem; font-weight: 400; color: var(--hs-muet); margin-left: .1rem; }
.hs-tx-carte svg { display: block; width: 100%; height: 3.2rem; margin-top: .3rem; }
.hs-tx-carte polygon { fill: color-mix(in srgb, var(--hs-rose) 12%, transparent); }
.hs-tx-carte polyline { fill: none; stroke: var(--hs-rose); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hs-tx-bas { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; }
.hs-tx-joueurs { margin: 0; padding: 0; list-style: none; }
.hs-tx-joueurs li { display: flex; gap: .5rem; padding: .18rem 0; border-bottom: 1px solid var(--hs-bord); }
.hs-tx-joueurs b { width: 2rem; color: var(--hs-muet-2); font-weight: 400; }
.hs-tx-joueurs span { flex: 1; color: var(--hs-texte-2); overflow: hidden; text-overflow: ellipsis; }
.hs-tx-joueurs i { font-style: normal; color: var(--hs-vert); }
.hs-tx-act { display: flex; flex-direction: column; gap: .3rem; }
.hs-tx-act span { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .3rem .7rem; border-radius: .4rem;
  background: var(--hs-surface-2); border: 1px solid var(--hs-bord-fort); color: var(--hs-texte); white-space: nowrap; }
.hs-tx-act .fa-icon { width: .7rem; height: .7rem; }
.hs-tx-act .stop { color: var(--hs-rouge-texte); background: var(--hs-rouge-doux); border-color: var(--hs-rose-bord); }
.hs-tx-act .stop i { width: .5rem; height: .5rem; background: currentColor; border-radius: 1px; }
@media (max-width: 639px) {
  .hs-tx { grid-template-columns: 2.6rem 1fr; }
  .hs-tx-nav { padding: .6rem .3rem; }
  .hs-tx-marque, .hs-tx-lien > span { display: none; }
  .hs-tx-lien { justify-content: center; padding: .45rem 0; }
  .hs-tx-bas { grid-template-columns: 1fr; }
  .hs-tx-act { flex-direction: row; }
  .hs-tx-stats { gap: .35rem; }
  .hs-tx-stats > div { padding: .4rem .45rem; }
  .hs-tx-stats b { font-size: .875rem; }
  .hs-tx-act span { flex: 1; padding: .3rem .4rem; }
}

/* P8 : Composants, photo du datacenter en fond du bloc */
.hs-composants { position: relative; isolation: isolate; border-radius: 1rem; overflow: hidden;
  padding: 2rem 1rem; }
.hs-composants > .hs-composants-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: center 70%; }
.hs-composants::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--hs-page) 84%, transparent); }

/* P12 : badge « inclus » (onglet txAdmin et titre), vert des coches deja presentes sur la page */
.hs-inclus { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; vertical-align: middle;
  font-size: .7rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; text-transform: uppercase;
  color: #4ade80; background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .35); }
.management-tab-btn.active > .hs-inclus { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }

/* Avis : bandeau defilant de petites cartes (modele landing servMC, app/includes/avis-marquee.php) */
.hs-avis-note { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: 1.125rem; }
.hs-avis-note-etoiles, .hs-avis-etoiles { color: #facc15; display: inline-flex; gap: .1rem; }
.hs-avis-note-etoiles .fa-icon { width: 1.15rem; height: 1.15rem; }
.hs-avis-defil { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hs-avis-piste { display: flex; flex-wrap: nowrap; gap: .75rem; width: max-content; padding: .25rem 0; animation: hs-avis-defil 70s linear infinite; }
.hs-avis-defil:hover .hs-avis-piste, .hs-avis-defil:focus-within .hs-avis-piste { animation-play-state: paused; }
@keyframes hs-avis-defil { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hs-avis-carte { width: 280px; flex-shrink: 0; margin: 0; padding: .9rem 1rem; border-radius: .75rem;
  background: var(--hs-page); border: 1px solid var(--hs-bord-fort); }
.hs-avis-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.hs-avis-initiale { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem; color: #fff; background: color-mix(in srgb, var(--jeu-accent, #f97316) 45%, var(--hs-surface-2)); }
.hs-avis-nom { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hs-avis-nom strong { color: #fff; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-avis-nom small { color: var(--hs-muet); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-avis-etoiles { margin-left: auto; flex-shrink: 0; }
.hs-avis-etoiles .fa-icon { width: .75rem; height: .75rem; }
.hs-avis-carte blockquote { margin: 0; color: var(--hs-texte-2); font-size: .875rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* mouvement reduit : pas de defilement, les avis restent lisibles en glissant, sans les copies */
@media (prefers-reduced-motion: reduce) {
  .hs-avis-defil { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 1rem; }
  .hs-avis-piste { animation: none; margin: 0 auto; }
  .hs-avis-carte[aria-hidden="true"] { display: none; }
}