/* HelloServ vitrine : DA du panel (refonte 616), chantier 633 (sombre seul).
   Chargée après tailwind.css, style.css et theme.css. Retour arrière : retirer son <link>.
   Principe : on remappe les utilitaires Tailwind vers les tokens --hs-*, sans toucher aux vues.
   Remap monotone des gris (950/900 page, 800 surface, 700 surface-2, 600 survol) : la
   hiérarchie section/carte existante est conservée. Voir proposals/refonte-vitrine/CARTOGRAPHIE.md. */

:root {
  --hs-page: #0c0e13; --hs-nav: #12151c; --hs-surface: #171b23; --hs-surface-2: #1e232d;
  --hs-survol: #232935; --hs-bord: #262c37; --hs-bord-fort: #353c4a;
  --hs-texte: #e6e8ec; --hs-texte-2: #c3c8d1; --hs-muet: #9aa2b1; --hs-muet-2: #87909f;
  --hs-rouge: #dc2626; --hs-rouge-fort: #b91c1c; --hs-rouge-texte: #f87171;
  --hs-rouge-doux: #2a1517; --hs-nav-actif: #1f1a1d; --hs-vert: #4ade80; --hs-vert-doux: #11251a;
  --color-primary: var(--hs-rouge-texte); --color-hover: var(--hs-texte);
  color-scheme: dark;
}
/* ---- Fonds gris (monotone) ---- */
.bg-gray-950, .bg-gray-900, .bg-black, .bg-slate-900 { background-color: var(--hs-page); }
.bg-gray-900\/95, .bg-gray-900\/90, .bg-gray-900\/80, .bg-gray-900\/60, .bg-gray-900\/50, .bg-gray-950\/80, .bg-gray-950\/50 { background-color: var(--hs-page); }
.bg-gray-800, .bg-gray-800\/80, .bg-gray-800\/60, .bg-gray-800\/50, .bg-gray-800\/40, .bg-gray-800\/30,
.bg-slate-800 { background-color: var(--hs-surface); }
.bg-gray-700, .bg-gray-700\/50, .bg-gray-700\/40, .bg-gray-700\/30, .bg-slate-700 { background-color: var(--hs-surface-2); }
.bg-gray-600 { background-color: var(--hs-survol); }
.hover\:bg-gray-800:hover, .hover\:bg-gray-700:hover, .hover\:bg-gray-700\/50:hover,
.hover\:bg-gray-600:hover, .hover\:bg-gray-750:hover, .hover\:bg-gray-800\/80:hover { background-color: var(--hs-survol); }

/* ---- Bords ---- */
.border-gray-800, .border-gray-700, .border-gray-700\/50, .border-gray-700\/60, .border-gray-700\/30,
.divide-gray-700 > * + *, .divide-gray-800 > * + * { border-color: var(--hs-bord); }
.border-gray-600, .border-gray-500 { border-color: var(--hs-bord-fort); }
.hover\:border-gray-600:hover, .hover\:border-gray-500:hover { border-color: var(--hs-bord-fort); }

/* ---- Textes gris (AA : 500 remonté sur muet-2, 4.6:1 mini sur page et surface) ---- */
.text-white, .text-gray-100 { color: var(--hs-texte); }
.text-gray-200 { color: var(--hs-texte); }
.text-gray-300 { color: var(--hs-texte-2); }
.text-gray-400 { color: var(--hs-muet); }
.text-gray-500, .text-gray-600 { color: var(--hs-muet-2); }
.hover\:text-white:hover, .hover\:text-gray-200:hover { color: var(--hs-texte); }
.placeholder-gray-400::placeholder, .placeholder-gray-500::placeholder, input::placeholder, textarea::placeholder { color: var(--hs-muet-2); }

/* ---- Header, barre promo, footer : teinte nav dans les deux thèmes, sans flou ---- */
body > header, header.sticky { background: var(--hs-nav) !important; border-bottom: 1px solid var(--hs-bord) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
body > footer, footer.bg-gray-900 { background: var(--hs-nav) !important; border-top: 1px solid var(--hs-bord) !important; }
body > div.bg-gradient-to-r.border-b:first-of-type,
.promo-banner { background: var(--hs-nav) !important; border-bottom: 1px solid var(--hs-bord) !important; }
.promo-banner > .absolute, body > div.bg-gradient-to-r.border-b > .absolute { display: none; }
#dropdown-game-menu, #dropdown-cloud-menu, [id^="dropdown-"][id$="-menu"] { background: var(--hs-surface); border-color: var(--hs-bord); box-shadow: none; }
#mobile-menu { background: var(--hs-nav); }

/* ---- Accent unique : rouges ---- */
.text-red-400, .text-red-500, .text-red-300, .hover\:text-red-400:hover, .hover\:text-red-300:hover,
.header-primary, .text-primary { color: var(--hs-rouge-texte) !important; }
.bg-red-400, .bg-red-500, .bg-red-600 { background-color: var(--hs-rouge); color: #fff; }
.hover\:bg-red-400:hover, .hover\:bg-red-500:hover, .hover\:bg-red-600:hover, .hover\:bg-red-300:hover { background-color: var(--hs-rouge-fort); }
.bg-red-400\/10, .bg-red-500\/10, .bg-red-400\/20, .bg-red-500\/20, .bg-red-900\/20, .bg-red-900\/30 { background-color: var(--hs-rouge-doux); }
.border-red-400, .border-red-500, .border-red-400\/30, .border-red-500\/30, .border-red-400\/50, .border-red-500\/50,
.hover\:border-red-400\/40:hover, .hover\:border-red-400:hover, .hover\:border-red-500:hover { border-color: var(--hs-rouge); }
.ring-red-500, .ring-red-400 { --tw-ring-color: var(--hs-rouge); }

/* CTA aux couleurs du jeu (liens et boutons seulement) : rouge plein. Puces, icônes, badges gardent la couleur du jeu. */
:is(a, button):is(.bg-orange-400, .bg-orange-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-yellow-400,
.bg-yellow-500, .bg-amber-500, .bg-blue-500, .bg-blue-600, .bg-purple-500, .bg-purple-600, .bg-indigo-500,
.bg-indigo-600, .bg-sky-500, .bg-cyan-500, .bg-teal-500, .bg-lime-500, .bg-green-400, .bg-emerald-400,
.bg-sky-400, .bg-cyan-400, .bg-blue-400, .bg-purple-400, .bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-l) { background: var(--hs-rouge) !important; color: #fff !important; }
:is(a, button):is(.bg-orange-400, .bg-orange-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-yellow-400,
.bg-yellow-500, .bg-amber-500, .bg-blue-500, .bg-blue-600, .bg-purple-500, .bg-purple-600, .bg-indigo-500,
.bg-indigo-600, .bg-sky-500, .bg-cyan-500, .bg-teal-500, .bg-lime-500, .bg-green-400, .bg-emerald-400,
.bg-sky-400, .bg-cyan-400, .bg-blue-400, .bg-purple-400, .bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-l):hover { background: var(--hs-rouge-fort) !important; }

/* ---- Dégradés : voiles sur image (to-t) gardés, le reste aplati sur la couleur du from ---- */
:is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl) {
  background-image: none !important; background-color: var(--hs-surface-2);
}
:is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl):is(.from-gray-900, .from-gray-950, .from-black) { background-color: var(--hs-page); }
:is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl).from-gray-800 { background-color: var(--hs-surface); }
:is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl):is(.from-red-400, .from-red-500, .from-red-600, .from-orange-400, .from-orange-300, .from-yellow-400) {
  background-color: var(--hs-rouge); color: #fff;
}
:is(.from-red-400, .from-red-500, .from-red-600, .from-orange-400, .from-orange-300, .from-yellow-400):is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-tr, .bg-gradient-to-bl) :is(.text-gray-900, .text-gray-800, .text-black, .text-white),
:is(.from-red-400, .from-red-500, .from-red-600, .from-orange-400, .from-orange-300, .from-yellow-400):is(.bg-gradient-to-r, .bg-gradient-to-br).text-gray-900 { color: #fff !important; }
/* bouton en dégradé (souvent text-gray-900) : texte blanc sur le rouge plein */
:is(a, button):is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-l) :is(.text-gray-900, .fa-icon),
:is(a, button):is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-l).text-gray-900 { color: #fff !important; }
/* survol de carte coloré par jeu : ramené au bord fort neutre */
[class*="hover:border-green-"]:hover, [class*="hover:border-blue-"]:hover, [class*="hover:border-orange-"]:hover,
[class*="hover:border-yellow-"]:hover, [class*="hover:border-sky-"]:hover, [class*="hover:border-emerald-"]:hover,
[class*="hover:border-purple-"]:hover, [class*="hover:border-cyan-"]:hover { border-color: var(--hs-bord-fort) !important; }
/* barres de progression vertes : elles restent vertes (pas des CTA) */

/* ---- Slop ---- */
.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 8px; }
.rounded-t-xl, .rounded-t-2xl { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rounded-b-xl, .rounded-b-2xl { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-inner,
[class*="shadow-red-"], [class*="shadow-gray-"], [class*="shadow-black"] { box-shadow: none !important; }
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.blur-3xl, .blur-2xl, .blur-xl { display: none; }
.-rotate-3, .rotate-3, .-rotate-2, .rotate-2, .-rotate-6, .rotate-6 { transform: none !important; }
.hover\:scale-105:hover, .hover\:-translate-y-1:hover, .hover\:-translate-y-2:hover { transform: none !important; }
section > svg.absolute.inset-0, section > .absolute.inset-0 > svg, section > .absolute.inset-0.opacity-10,
section > .absolute.inset-0.opacity-20, section > .absolute.inset-0.opacity-5 { display: none; }
.text-purple-400, .text-indigo-400, .text-sky-400, .text-cyan-400, .text-violet-400,
.text-purple-300, .text-indigo-300, .text-sky-300, .text-cyan-300 { color: var(--hs-muet) !important; }
.bg-purple-500\/10, .bg-indigo-500\/10, .bg-sky-500\/10, .bg-cyan-500\/10, .bg-purple-400\/10,
.bg-indigo-400\/10, .bg-sky-400\/10, .bg-cyan-400\/10 { background-color: var(--hs-surface-2) !important; }
.border-purple-500\/30, .border-indigo-500\/30, .border-sky-500\/30, .border-cyan-500\/30 { border-color: var(--hs-bord) !important; }
.animate-pulse.bg-red-400, .animate-pulse.bg-red-500 { animation: none; }

/* ---- États (vert / jaune) : lisibles dans les deux thèmes ---- */
.text-green-400, .text-green-500, .text-emerald-400 { color: var(--hs-texte-2); }
.bg-green-400\/10, .bg-green-500\/10, .bg-green-500\/20, .bg-emerald-500\/10 { background-color: var(--hs-surface-2); }

/* ---- Formulaires ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  background-color: var(--hs-surface-2); border-color: var(--hs-bord-fort); color: var(--hs-texte);
}

/* ---- Blog long ---- */
.prose, article .prose { color: var(--hs-texte-2); }
.prose a { color: var(--hs-rouge-texte); text-decoration: underline; }
.prose :is(h2, h3, h4, strong) { color: var(--hs-texte); }
.prose :is(pre, code, blockquote) { background: var(--hs-surface-2); border: 1px solid var(--hs-bord); border-radius: 8px; color: var(--hs-texte-2); }

/* ---- Couleur du jeu posee en inline par chaque page (:root dans le body) : specificite superieure ---- */
html:root { --color-primary: var(--hs-rouge-texte); --color-primary-rgb: 248, 113, 113; --color-hover: var(--hs-texte); --color-accent: var(--hs-rouge); }
.header-bg, .bg-dynamic-primary { background-color: var(--hs-rouge) !important; color: #fff !important; }
.header-bg:hover, .bg-dynamic-hover:hover { background-color: var(--hs-rouge-fort) !important; color: #fff !important; }
.dynamic-glow:hover, .shadow-dynamic { box-shadow: none !important; }
.border-green-400\/40, .border-green-500\/30 { border-color: var(--hs-bord-fort); }
.group:hover .group-hover\:scale-105, .hover\:-translate-y-2:hover { transform: none; }
/* ---- Bandeau CTA de fin : le biseau SVG (fill currentColor) doit prendre la teinte du panneau gray-700 ---- */
.hs-bandeau-cta svg.text-gray-700 { color: var(--hs-surface-2); }
/* ---- Variantes rouges restantes (inventaire des vues : 92 red-400/10, 47 border /40, 16 border /20…) ---- */
.text-red-200, .text-red-700, .hover\:text-red-200:hover { color: var(--hs-rouge-texte) !important; }
.bg-red-400\/5, .bg-red-400\/15, .bg-red-500\/25, .hover\:bg-red-400\/20:hover, .hover\:bg-red-400\/25:hover { background-color: var(--hs-rouge-doux); }
.bg-red-300, .bg-red-400\/80, .bg-red-400\/65, .bg-red-400\/50, .bg-red-500\/90 { background-color: var(--hs-rouge); color: #fff; }
.border-red-400\/40, .border-red-400\/60, .border-red-400\/70, .border-red-400\/25, .border-red-400\/20, .border-red-500\/20,
.hover\:border-red-400\/50:hover, .hover\:border-red-400\/60:hover { border-color: var(--hs-rouge); }
/* ---- Textes pâles colorés (tags de héros par jeu : sky, cyan, emerald…) : illisibles en clair ---- */
:is(.text-sky-100, .text-sky-200, .text-cyan-100, .text-cyan-200, .text-emerald-100, .text-emerald-200, .text-green-100, .text-green-200,
.text-teal-100, .text-teal-200, .text-slate-100, .text-slate-200, .text-purple-100, .text-purple-200, .text-lime-100, .text-lime-200,
.text-indigo-100, .text-indigo-200, .text-amber-200) { color: var(--hs-texte-2) !important; }
:is(.border-blue-400, .border-indigo-400, .border-sky-400, .border-purple-400, .border-cyan-400, .border-blue-500\/20, .border-blue-400\/40,
.border-blue-400\/20, .border-sky-400\/50, .border-purple-400\/20, .border-cyan-500\/50) { border-color: var(--hs-bord-fort); }
/* ---- Tableaux (style.css : th #1f2937 en dur, survol de ligne sombre en !important) ---- */
.hs-size-table th { background: var(--hs-surface-2); color: var(--hs-muet); }
tbody tr:not(.pricing-popular-row):hover { background: var(--hs-survol) !important; transform: none; }
/* ---- Variantes d'opacité grises restantes (pastilles « option jusqu'à » des dédiés, etc.) : remap monotone ---- */
.bg-gray-900\/40, .bg-gray-950\/75 { background-color: var(--hs-page); }
.bg-gray-800\/70 { background-color: var(--hs-surface); }
.bg-gray-700\/60, .bg-gray-500\/20, .bg-gray-400\/10, .bg-gray-400\/20 { background-color: var(--hs-surface-2); }
.hover\:bg-gray-700\/30:hover, .hover\:bg-gray-700\/40:hover, .hover\:bg-gray-700\/80:hover, .hover\:bg-gray-800\/40:hover,
.hover\:bg-gray-800\/50:hover, .hover\:bg-gray-900\/80:hover { background-color: var(--hs-survol); }
.border-gray-600\/70, .border-gray-600\/80, .border-gray-500\/20, .border-gray-400\/20, .border-gray-400\/25,
.divide-gray-600\/70 > :not([hidden]) ~ :not([hidden]) { border-color: var(--hs-bord); }
.border-gray-400, .border-gray-300, .hover\:border-gray-400:hover, .hover\:border-gray-400\/60:hover { border-color: var(--hs-bord-fort); }

/* 633 : composants alignés sur le panel sombre */
/* Nav : texte neutre, icône rouge, comme la barre latérale du panel */
nav .header-primary { color: var(--hs-nav-texte) !important; }
nav .header-primary > .fa-icon:first-child { color: var(--hs-rouge-texte); }
nav .header-primary:hover { color: var(--hs-texte) !important; }
/* CTA pleins : dégradé rouge du panel */
a.bg-red-500, a.bg-red-600, a.bg-red-400, button.bg-red-500, button.bg-red-600, button.bg-red-400,
[class*="-offer-card"] a[class*="from-"] {
  background: var(--hs-rouge) !important;
  color: #fff !important; border: 0 !important; box-shadow: none !important;
}
a.bg-red-500:hover, a.bg-red-600:hover, a.bg-red-400:hover, button.bg-red-500:hover,
button.bg-red-600:hover, button.bg-red-400:hover, [class*="-offer-card"] a[class*="from-"]:hover {
  background: var(--hs-rouge-fort) !important;
}
/* Cartes d'offres jeu : bord neutre, l'offre populaire en rouge, bouton secondaire du panel */
[class*="-offer-card"] { border-color: var(--hs-bord-fort) !important; box-shadow: none !important; transform: none !important; }
[class*="-offer-card"][class*="border-"][class*="-400"]:not(.border-gray-700) { border-color: var(--hs-rouge) !important; }
[class*="-offer-card"] > .absolute.top-0.right-0 {
  background: var(--hs-rouge) !important; color: #fff !important; animation: none !important;
  font-weight: 600; letter-spacing: .04em;
}
[class*="-offer-card"] a.bg-gray-700 {
  background: var(--hs-surface) !important; color: var(--hs-texte) !important;
  border: 1px solid var(--hs-bord-fort) !important; box-shadow: none !important;
}
[class*="-offer-card"] a.bg-gray-700:hover { background: var(--hs-survol) !important; }
[class*="-offer-card"] [class*="bg-gray-800/80"] { background: rgba(23,27,35,.92) !important; border-color: var(--hs-bord) !important; backdrop-filter: none !important; }
.hs-jeu-voile { background: linear-gradient(to bottom, rgba(12,14,19,.70) 0%, rgba(12,14,19,.92) 40%, rgba(12,14,19,.98) 68%); }
.group:hover .hs-jeu-voile { background: linear-gradient(to bottom, rgba(12,14,19,.50) 0%, rgba(12,14,19,.85) 40%, rgba(12,14,19,.96) 68%); }
/* Logos noirs sur fond sombre */
img[src*="icons/cs2."] { filter: invert(1) brightness(.9); }
/* Sections adjacentes : filet 1px en plus du changement de niveau */
main > section + section, body > section + section { border-top: 1px solid var(--hs-bord); }
/* Boutons secondaires (gris plein) : style secondaire du panel */
a.bg-gray-700.text-white, button.bg-gray-700.text-white {
  background: var(--hs-surface-2) !important; color: var(--hs-texte-2) !important;
  border: 1px solid var(--hs-bord-fort) !important; box-shadow: none !important;
}
a.bg-gray-700.text-white:hover, button.bg-gray-700.text-white:hover { background: var(--hs-survol) !important; color: var(--hs-texte) !important; }
/* Fonds blancs en dur (onglet Mods des pages jeu, bouton du calculateur) : jamais de clair */
.bg-white, .bg-gray-50, .bg-gray-100 { background-color: var(--hs-surface-2) !important; border: 1px solid var(--hs-bord-fort); }
:is(.bg-white, .bg-gray-50, .bg-gray-100) :is(.text-gray-600, .text-gray-700, .text-gray-900), .bg-white.text-gray-900 { color: var(--hs-texte-2) !important; }
.hover\:bg-gray-100:hover { background-color: var(--hs-survol) !important; }

/* 633 : voile des tuiles image de l'accueil (titre lisible sur la partie claire de la photo) */
.bg-gradient-to-t.from-gray-900.via-gray-900\/90 { background-image: linear-gradient(0deg, var(--hs-page) 30%, rgba(12,14,19,.92) 58%, rgba(12,14,19,.35) 100%) !important; }

/* 633 : liens d'action bleus ramenés à l'accent unique (le bleu reste sur les icônes et pastilles) */
a.text-blue-400, a.text-blue-500, a .text-blue-400 { color: var(--hs-rouge-texte) !important; }



/* Verts voulus (653) : icônes Windows, trafic non filtré en rouge, filtré en vert (anti-ddos). Échappent à la neutralisation des verts plus haut. */
.hs-vert[class][class], svg.fa-icon.hs-vert[class] { color: #4ade80 !important; }
.hs-rouge-vif[class][class] { color: #f87171 !important; }
.hs-flux-rouge[class][class] { background-color: rgba(239, 68, 68, .9) !important; }
.hs-flux-vert[class][class] { background-color: rgba(74, 222, 128, .85) !important; }