/* helloserv.fr : couche « pro » (chantier 633 bis). Chargée après hs-vitrine.css.
   Palette : fond du panel, rouge seul accent, neutres. Vert réservé aux états (dispo, en ligne). */

/* ---- Typographie et rythme ---- */
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
main h1, body > section h1 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
main h2, body > section h2 { font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
@media (min-width: 1024px) {
  main h1.text-4xl, main h1.text-5xl, main h1.text-6xl, body > section h1 { font-size: 3.25rem; }
  main h2.text-3xl, main h2.text-4xl, main h2.text-5xl, body > section h2.text-3xl, body > section h2.text-4xl { font-size: 2.25rem; }
  main > section.py-12, main > section.py-16, main > section.py-20, body > section.py-12, body > section.py-16, body > section.py-20 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}
main p, body > section p { line-height: 1.65; }
.font-extrabold, .font-black { font-weight: 700; }
.uppercase.tracking-wide, .uppercase.tracking-wider { letter-spacing: .06em; }

/* ---- Palette : une seule couleur d'accent ---- */
/* CTA pleins : rouge plat, sans dégradé */
:is(a, button)[class*="bg-"]:is([class*="from-"], [class*="-400"], [class*="-500"], [class*="-600"]):not([class*="bg-gray"]):not([class*="bg-transparent"]) {
  background: var(--hs-rouge) !important; background-image: none !important; color: #fff !important;
}
:is(a, button)[class*="bg-"]:is([class*="from-"], [class*="-400"], [class*="-500"], [class*="-600"]):not([class*="bg-gray"]):not([class*="bg-transparent"]):hover {
  background: var(--hs-rouge-fort) !important;
}
/* Icônes : neutres partout (plus de vert, indigo, bleu, orange par jeu) */
svg.fa-icon:is([class*="text-green-"], [class*="text-emerald-"], [class*="text-lime-"], [class*="text-teal-"], [class*="text-cyan-"],
[class*="text-sky-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-pink-"],
[class*="text-orange-"], [class*="text-amber-"], [class*="text-yellow-"], [class*="text-red-"]),
:is([class*="text-green-4"], [class*="text-emerald-4"], [class*="text-lime-4"], [class*="text-teal-4"], [class*="text-cyan-4"], [class*="text-sky-4"],
[class*="text-blue-4"], [class*="text-indigo-4"], [class*="text-violet-4"], [class*="text-purple-4"], [class*="text-pink-4"], [class*="text-orange-4"],
[class*="text-amber-4"], [class*="text-yellow-4"]) > svg.fa-icon { color: var(--hs-muet) !important; }
/* Mots en couleur de jeu dans les titres : l'accent rouge */
:is(h1, h2, h3) :is([class*="text-green-"], [class*="text-emerald-"], [class*="text-lime-"], [class*="text-teal-"], [class*="text-cyan-"],
[class*="text-sky-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-purple-"], [class*="text-orange-"], [class*="text-amber-"],
[class*="text-yellow-"]), :is(h1, h2, h3) .bg-clip-text { color: var(--hs-rouge-texte) !important; -webkit-text-fill-color: currentColor; background: none !important; }
/* Autres textes colorés (puces, étiquettes) : neutres */
:is(.text-green-300, .text-green-400, .text-green-500, .text-emerald-300, .text-emerald-400, .text-lime-400, .text-teal-400, .text-cyan-400,
.text-sky-400, .text-blue-300, .text-blue-400, .text-indigo-400, .text-violet-400, .text-purple-400, .text-pink-400, .text-orange-300, .text-orange-400,
.text-amber-400, .text-yellow-300, .text-yellow-400, .text-yellow-500):not(h1 *):not(h2 *):not(h3 *) { color: var(--hs-texte-2) !important; }
/* Étoiles d'avis : neutres claires */
.fa-icon[href*="star"], svg.fa-icon:has(use[href*="fa-solid-star"]) { color: var(--hs-texte) !important; }
/* Pastilles et puces pleines colorées (hors boutons) : surface neutre */
:not(a):not(button):is(.bg-green-400, .bg-green-500, .bg-emerald-400, .bg-emerald-500, .bg-lime-400, .bg-teal-400, .bg-cyan-400, .bg-sky-400,
.bg-blue-400, .bg-blue-500, .bg-indigo-400, .bg-indigo-500, .bg-purple-400, .bg-purple-500, .bg-orange-400, .bg-orange-500, .bg-amber-400, .bg-yellow-400) {
  background: var(--hs-surface-2) !important; color: var(--hs-texte) !important;
}
span.rounded-full:is(.w-1, .w-1\.5, .w-2, .h-2):not(.bg-gray-500) { background: var(--hs-muet-2) !important; animation: none !important; }
/* Fonds teintés par jeu (x-400/10, x-500/20…) : surface-2 neutre, bords neutres */
[class*="bg-green-"][class*="\/"], [class*="bg-emerald-"][class*="\/"], [class*="bg-lime-"][class*="\/"], [class*="bg-teal-"][class*="\/"],
[class*="bg-blue-"][class*="\/"], [class*="bg-indigo-"][class*="\/"], [class*="bg-purple-"][class*="\/"], [class*="bg-orange-"][class*="\/"],
[class*="bg-amber-"][class*="\/"], [class*="bg-yellow-"][class*="\/"], [class*="bg-sky-"][class*="\/"], [class*="bg-cyan-"][class*="\/"] { background-color: var(--hs-surface-2) !important; }
:is([class*="border-green-"], [class*="border-emerald-"], [class*="border-lime-"], [class*="border-teal-"], [class*="border-blue-"], [class*="border-indigo-"],
[class*="border-purple-"], [class*="border-orange-"], [class*="border-amber-"], [class*="border-yellow-"], [class*="border-sky-"], [class*="border-cyan-"]):not([class*="-offer-card"]) { border-color: var(--hs-bord) !important; }
.animate-pulse, .animate-bounce, .animate-ping { animation: none !important; }
/* Vert conservé pour son sens : disponibilité, statut en ligne */
.hs-etat-ok, [data-status="online"], .status-online { color: var(--hs-vert) !important; }

/* ---- Card d'offre commune (app/includes/offer-card.php) ---- */
.hs-card {
  display: flex; flex-direction: column; gap: 20px; padding: 24px;
  background: var(--hs-surface); border: 1px solid var(--hs-bord); border-radius: 8px;
  transition: border-color .15s ease;
}
.hs-card:hover { border-color: var(--hs-bord-fort); }
.hs-card--pop { border-color: var(--hs-rouge); box-shadow: inset 0 3px 0 var(--hs-rouge); }
.hs-card--pop:hover { border-color: var(--hs-rouge); }
.hs-card__head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.hs-card__icon { width: 24px; height: 24px; border-radius: 4px; flex: none; }
.hs-card__name { font-size: 1.0625rem; font-weight: 600; color: var(--hs-texte); letter-spacing: -0.01em; margin: 0; }
.hs-card__badge {
  margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hs-rouge-texte); background: var(--hs-rouge-doux); border: 1px solid rgba(220, 38, 38, .35);
  padding: 3px 8px; border-radius: 4px;
}
.hs-card__price { display: flex; align-items: baseline; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--hs-bord); }
.hs-card__amount { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--hs-texte); line-height: 1; font-variant-numeric: tabular-nums; }
.hs-card__period { font-size: .875rem; color: var(--hs-muet); }
.hs-card__specs { display: grid; gap: 10px; margin: 0; }
.hs-card__specs > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .875rem; }
.hs-card__specs dt { display: flex; align-items: center; gap: 8px; color: var(--hs-muet); }
.hs-card__specs dt .fa-icon { width: 14px; color: var(--hs-muet-2); }
.hs-card__specs dd { margin: 0; color: var(--hs-texte); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hs-card__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--hs-bord); font-size: .8125rem; color: var(--hs-texte-2); }
.hs-card__feats li { display: flex; align-items: center; gap: 8px; }
.hs-card__feats .fa-icon { width: 12px; color: var(--hs-muet-2); }
.hs-card__cta {
  margin-top: auto; display: block; width: 100%; text-align: center; padding: 11px 16px; border-radius: 6px;
  font-size: .9375rem; font-weight: 600; color: var(--hs-texte) !important;
  background: var(--hs-surface-2) !important; border: 1px solid var(--hs-bord-fort) !important; transition: background .15s ease;
}
.hs-card__cta:hover { background: var(--hs-survol) !important; }
.hs-card__cta--main { background: var(--hs-rouge) !important; border-color: var(--hs-rouge) !important; color: #fff !important; }
.hs-card__cta--main:hover { background: var(--hs-rouge-fort) !important; }
.hs-card__cta--off { color: var(--hs-muet-2) !important; cursor: not-allowed; }
.hs-card__cta:focus-visible { outline: 2px solid var(--hs-rouge-texte); outline-offset: 2px; }

/* ---- Bandeau promo : discret, sans emoji ni pulsation ---- */
.hs-promo { background: var(--hs-page); }
.hs-promo .text-white { color: var(--hs-texte-2) !important; font-weight: 500; }

/* ---- Footer : titres de colonne hiérarchisés ---- */
body > footer :is(h3, h4, .font-semibold.text-white) { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-texte); }
body > footer a { color: var(--hs-muet); line-height: 1.9; }
body > footer a:hover { color: var(--hs-texte); }

/* Grille des offres : une ligne sur desktop (5 offres), 2 puis 1 colonne en dessous */
.flex.flex-wrap:has(> .hs-card) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px !important; }
.flex.flex-wrap > .hs-card { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important; }
@media (max-width: 1279px) { .hs-card__feats { grid-template-columns: 1fr; } }
[class*="-offer-card"].hs-card { border-color: var(--hs-bord) !important; }
[class*="-offer-card"].hs-card--pop { border-color: var(--hs-rouge) !important; }
.absolute.rounded-full[class*="blur-"], .absolute[class*="blur-3xl"], .absolute[class*="blur-2xl"] { display: none !important; }

/* ---- Cards VPS (vps-intel, vps-ryzen, vps-windows) : même langage que .hs-card ---- */
.hs-offres { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px !important; }
.hs-offres > .hs-offre { overflow: visible !important; width: auto !important; margin: 0 !important; background: var(--hs-surface) !important; border: 1px solid var(--hs-bord) !important; border-radius: 8px !important; box-shadow: none !important; }
.hs-offres > .hs-offre:hover { border-color: var(--hs-bord-fort) !important; }
.hs-offre:is(.border-blue-400\/60, .border-red-400\/60, .border-green-400\/60) { border-color: var(--hs-rouge) !important; box-shadow: inset 0 3px 0 var(--hs-rouge) !important; }
.hs-offre > .absolute.pointer-events-none { display: none; }
.hs-offre > .absolute.top-0.right-0 { top: 0; right: 16px; transform: translateY(-50%); border-radius: 4px; padding: 3px 8px; font-size: .6875rem; font-weight: 600; color: var(--hs-rouge-texte) !important; background: var(--hs-rouge-doux) !important; border: 1px solid rgba(220, 38, 38, .35); }
.hs-offre > .absolute.top-0.right-0 .fa-icon { display: none; }
.hs-offre .text-3xl { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hs-offre .mb-5:has(.text-3xl) { padding-bottom: 20px; border-bottom: 1px solid var(--hs-bord); }
.hs-offre .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 10px; }
.hs-offre .grid.grid-cols-2 > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; background: none !important; border: 0; }
.hs-offre .grid.grid-cols-2 > div > .flex { margin: 0; }
.hs-offre .grid.grid-cols-2 > div > .flex span { font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--hs-muet); }
.hs-offre .grid.grid-cols-2 > div > div:last-child { font-weight: 600; text-align: right; }
.hs-offre .mt-auto a.bg-gray-800 { background: var(--hs-surface-2) !important; border-color: var(--hs-bord-fort) !important; }

/* louer-vps : 3 gammes */
article.rounded-2xl.border-2[class*="border-red-400"] { border-width: 1px; border-color: var(--hs-rouge) !important; box-shadow: inset 0 3px 0 var(--hs-rouge) !important; }
article.rounded-2xl, article.rounded-xl { border-radius: 8px; }
.hs-offre h3 { font-size: 1.0625rem; font-weight: 600; }

/* ---- Accueil ---- */
/* Promo déjà dans la barre du haut : pas de doublon dans le hero */
.promo-reminder { display: none; }
/* Cards gammes VPS : libellé « À partir de » en double retiré, CTA secondaires (le rouge reste au hero) */
#cloud article .pt-5 > .uppercase { display: none; }
#cloud article > a.w-full { background: var(--hs-surface-2) !important; border: 1px solid var(--hs-bord-fort); color: var(--hs-texte) !important; }
#cloud article > a.w-full:hover { background: var(--hs-survol) !important; }
#cloud article { border-radius: 8px; }
/* Pourquoi nous : 4 atouts en ligne, puis 3 avis côte à côte */
.hs-pourquoi .bg-red-400\/10 { background: var(--hs-surface-2) !important; border: 1px solid var(--hs-bord); border-radius: 8px; }
.hs-pourquoi > .relative { margin-top: 48px; }
.hs-avis__item { margin: 0; height: 100%; display: flex; flex-direction: column; padding: 24px; background: var(--hs-surface); border: 1px solid var(--hs-bord); border-radius: 8px; }
.hs-avis__item > p { font-style: normal; flex: 1; color: var(--hs-texte-2) !important; }
.hs-avis__item > svg { color: var(--hs-bord-fort) !important; }
.hs-avis__item .ml-0 { margin-left: 0; }
/* Bandeau final : aplat, sans biseau ni dégradé */
.hs-bandeau-cta { background: var(--hs-surface) !important; border: 1px solid var(--hs-bord); border-radius: 8px; }
.hs-bandeau-cta .absolute.top-0.right-0.flex { display: none; }
.hs-bandeau-cta > .absolute.w-9\/12 { background: var(--hs-surface) !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
/* Grille des autres jeux : 9 colonnes égales sur desktop, pas d'orphelin (18 jeux) */
.hs-jeux-grille { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
@media (min-width: 1024px) { .hs-jeux-grille { grid-template-columns: repeat(9, 1fr); } }
.hs-jeux-grille > * { width: auto !important; }
/* Noms d'offres entiers (pas de « Start… ») */
.hs-offre h3.truncate, .hs-offre .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
/* Toast promo : 3e rappel du même code après la barre du haut, retiré */
#promo-notification { display: none !important; }
/* Badge populaire des cards jeu : posé sur le bord haut, comme les VPS (le nom reste sur une ligne) */
.hs-card { position: relative; overflow: visible !important; }
.hs-card--pop .hs-card__badge { position: absolute; top: 0; right: 16px; transform: translateY(-50%); margin: 0; background: var(--hs-rouge-doux) !important; }
/* Header : nav à 15px, icônes neutres, bouton espace client compact */
button[id^="dropdown-"][id$="-btn"] { font-size: .9375rem; font-weight: 500; color: var(--hs-texte-2) !important; }
button[id^="dropdown-"][id$="-btn"]:hover { color: var(--hs-texte) !important; }
button[id^="dropdown-"][id$="-btn"] > .fa-icon:first-child { display: none; }
a.px-5.py-2.header-bg.dynamic-glow { padding: 8px 16px; font-size: .875rem; border-radius: 6px; box-shadow: none !important; }

/* ---- Contraste des cartes d'offre (30/09, 13:26) : section sur le fond de page, carte en relief ---- */
section:has(.hs-card), section:has(.hs-offres) { background: var(--hs-page) !important; }
.hs-card, .hs-offres > .hs-offre {
  background: #1b2029 !important; border: 1px solid #3a4250 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .45) !important;
}
.hs-card:hover, .hs-offres > .hs-offre:hover { border-color: #525b6b !important; }
.hs-card--pop, .hs-offre:is(.border-blue-400\/60, .border-red-400\/60, .border-green-400\/60) {
  border-color: var(--hs-rouge) !important;
  box-shadow: inset 0 3px 0 var(--hs-rouge), 0 10px 28px rgba(0, 0, 0, .45) !important;
}
.hs-card__price, .hs-offre .mb-5:has(.text-3xl) { border-bottom-color: #313846 !important; }
.hs-card__feats { border-top-color: #313846; color: var(--hs-texte-2); }
.hs-card__amount, .hs-offre .text-3xl { color: #fff !important; font-size: 2.5rem; font-weight: 800; }
.hs-card__period { color: var(--hs-texte-2); }
.hs-card__specs dt, .hs-offre .grid.grid-cols-2 > div > .flex span { color: var(--hs-texte-2) !important; }
.hs-card__specs dt .fa-icon, .hs-card__feats .fa-icon { color: var(--hs-muet); }
.hs-card__specs dd, .hs-offre .grid.grid-cols-2 > div > div:last-child { color: #fff !important; }
.hs-card__name, .hs-offre h3 { color: #fff; }
.hs-card__cta:not(.hs-card__cta--main):not(.hs-card__cta--off) { background: #262c38 !important; border-color: #475063 !important; }
.hs-card--pop:hover { border-color: var(--hs-rouge) !important; }

/* ---- Retours Mathis 30/09 16:37 (chantier 636) ---- */
:root { --hs-trustpilot: #00b67a; --hs-rose: #fb7185; --hs-rose-doux: rgba(251, 113, 133, .10); --hs-rose-bord: rgba(251, 113, 133, .28); }
/* Étoiles d'avis : vert Trustpilot */
.fa-icon[href*="star"], svg.fa-icon:has(use[href*="fa-solid-star"]) { color: var(--hs-trustpilot) !important; }
/* Pourquoi nous : icônes des 4 atouts en rouge rosé */
.hs-pourquoi .bg-red-400\/10 { background: var(--hs-rose-doux) !important; border-color: var(--hs-rose-bord); }
.hs-pourquoi .bg-red-400\/10 > svg.fa-icon { color: var(--hs-rose) !important; }
/* Bandeau final : le voile sombre de gauche couvre tout le texte avant de laisser voir la photo */
.hs-bandeau-cta > .absolute.w-9\/12 { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0,0,0,.55) 65%, #000 90%); mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(0,0,0,.55) 65%, #000 90%); }
@media (max-width: 767px) { .hs-bandeau-cta > .absolute.w-9\/12 { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 55%, #000 100%); mask-image: linear-gradient(180deg, transparent 55%, #000 100%); } }

/* Chantier 636 : page Contact et hero de page commune */
.hs-hero-page{padding:3.5rem 0 3rem;background:var(--hs-nav);border-bottom:1px solid var(--hs-bord)}
.hs-canal{background:var(--hs-surface);border:1px solid var(--hs-bord);transition:border-color .15s,background .15s}
.hs-canal:hover{border-color:var(--hs-bord-fort);background:var(--hs-survol)}
.hs-canal-icone{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:.75rem;background:var(--hs-surface-2);border:1px solid var(--hs-bord);color:var(--hs-texte-2);font-size:1.1rem}
.hs-canal-lien{color:var(--hs-texte);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.hs-canal:hover .hs-canal-lien{text-decoration-color:var(--hs-muet)}
.hs-badge-reco{font-size:.7rem;font-weight:600;padding:.1rem .5rem;border-radius:999px;background:rgba(74,222,128,.10);color:var(--hs-vert);border:1px solid rgba(74,222,128,.25)}
.hs-carte-contact{background:var(--hs-surface);border:1px solid var(--hs-bord)}
.hs-etape{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:999px;background:var(--hs-surface-2);border:1px solid var(--hs-bord-fort);color:var(--hs-texte);font-size:.75rem;font-weight:700}
.hs-footer-legal{background:var(--hs-page);border-top:1px solid var(--hs-bord)}
.hs-footer-legal a{color:var(--hs-muet);transition:color .15s}
.hs-footer-legal a:hover{color:var(--hs-texte);text-decoration:underline;text-underline-offset:3px}
/* 636 point 8a : fond des pages du menu À propos (repris de about.php), identique partout */
.hs-hero-apropos{background-image:radial-gradient(ellipse at top right,rgba(248,113,113,.06),transparent 60%);border-bottom:1px solid var(--hs-bord)}
/* 636 point 5 : hero des pages jeux, fond plat sans cercles ni dégradé de jeu */
.hs-hero-fond{background:var(--hs-nav);border-bottom:1px solid var(--hs-bord)}
/* ---- 636 règle 1 : rouge réservé aux boutons d'action pleins (ni texte, ni lien, ni bordure vive, ni fond d'icône) ---- */
html:root { --color-primary: var(--hs-texte); --color-primary-rgb: 230, 232, 236; }
.text-red-200, .text-red-300, .text-red-400, .text-red-500, .text-red-700, .text-primary, .header-primary,
:is(h1, h2, h3) :is([class*="text-green-"], [class*="text-emerald-"], [class*="text-lime-"], [class*="text-teal-"], [class*="text-cyan-"],
[class*="text-sky-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-purple-"], [class*="text-orange-"], [class*="text-amber-"],
[class*="text-yellow-"], [class*="text-red-"]), :is(h1, h2, h3) .bg-clip-text { color: var(--hs-texte) !important; }
:is(h1, h2) :is([class*="text-red-"], [class*="text-green-"], [class*="text-sky-"], [class*="text-orange-"], [class*="text-blue-"]) { color: var(--hs-texte-2) !important; }
:is(.hover\:text-red-200, .hover\:text-red-300, .hover\:text-red-400, .group:hover .group-hover\:text-red-400):hover,
.group:hover .group-hover\:text-red-400 { color: #fff !important; }
.prose a, a.text-blue-400, a.text-blue-500, a .text-blue-400 { color: var(--hs-texte) !important; text-decoration: underline; text-decoration-color: var(--hs-muet); }
nav .header-primary > .fa-icon:first-child { color: var(--hs-muet); }
/* Bordures rouges : neutres, rouge très atténué au survol */
.border-red-400, .border-red-500, .border-red-400\/20, .border-red-400\/25, .border-red-400\/30, .border-red-400\/40, .border-red-400\/50,
.border-red-400\/60, .border-red-400\/70, .border-red-500\/20, .border-red-500\/30, .border-red-500\/50 { border-color: var(--hs-bord-fort) !important; }
:is(.hover\:border-red-400, .hover\:border-red-500, .hover\:border-red-400\/30, .hover\:border-red-400\/40, .hover\:border-red-400\/50, .hover\:border-red-400\/60):hover { border-color: rgba(220, 38, 38, .35) !important; }
.ring-red-400, .ring-red-500 { --tw-ring-color: var(--hs-bord-fort); }
/* Offre populaire : bord gris fort, badge neutre (le bouton rouge suffit à la distinguer) */
.hs-card--pop, .hs-card--pop:hover, [class*="-offer-card"].hs-card--pop, [class*="-offer-card"][class*="border-"][class*="-400"]:not(.border-gray-700),
.hs-offre:is(.border-blue-400\/60, .border-red-400\/60, .border-green-400\/60), article.rounded-2xl.border-2[class*="border-red-400"] {
  border-color: var(--hs-bord-fort) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
}
.hs-card__badge, .hs-card--pop .hs-card__badge, .hs-offre > .absolute.top-0.right-0 { color: var(--hs-texte) !important; background: var(--hs-surface-2) !important; border: 1px solid var(--hs-bord-fort) !important; }
.hs-card__cta:focus-visible { outline-color: var(--hs-texte); }
/* Fonds d'icône rouges : surface neutre (les boutons pleins bg-red-* restent rouges) */
:not(a):not(button):is(.bg-red-400\/5, .bg-red-400\/10, .bg-red-400\/15, .bg-red-400\/20, .bg-red-500\/10, .bg-red-500\/20, .bg-red-500\/25, .bg-red-900\/20, .bg-red-900\/30) {
  background-color: var(--hs-surface-2) !important;
}
:not(a):not(button):is(.bg-red-400, .bg-red-500, .bg-red-300):not([class*="py-"]):not([class*="px-"]) { background-color: var(--hs-surface-2) !important; color: var(--hs-texte) !important; }
/* Exception de marque : « Hello » du logo reste rouge */
.text-xl.font-bold > .header-primary:first-child { color: var(--hs-rouge-texte) !important; }
/* 636 point 7 : deux fonds de section (page, surface), séparation par le fond seul, aucun filet entre sections */
.hs-hero-page, .hs-hero-fond { background: var(--hs-surface) !important; }
main section, body > section, .hs-hero-page, .hs-hero-fond, .hs-hero-apropos { border-top-width: 0 !important; border-bottom-width: 0 !important; }
/* 638 recette : badges "Populaire" absolus en neutre, pastilles de carte en vert (en ligne) */
div.absolute.bg-red-500:not(a):not(button) { background: var(--hs-surface-2) !important; color: var(--hs-texte) !important; border: 1px solid var(--hs-bord-fort); box-shadow: none !important; }
.hs-map-dot { background: #4ade80 !important; animation: none !important; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2) !important; }
/* 638 recette : aucun texte sous 12 px */
.text-\[9px\], .text-\[10px\], .text-\[11px\], .hs-card__badge, .hs-badge-reco { font-size: 12px !important; }
/* Couronne jaune des badges « populaire » (chantier 653) */
.hs-couronne, svg.fa-icon.hs-couronne { color: #facc15 !important; width: 1em; height: 1em; flex: none; }
.hs-card__badge { display: inline-flex; align-items: center; gap: 5px; }
/* OS et logiciels compatibles des VPS (chantier 653) : pastilles sobres, sans grand cadre. */
.hs-compat__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 56rem; margin: 0 auto; }
.hs-compat__item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--hs-surface); border: 1px solid var(--hs-bord); transition: border-color .15s; }
.hs-compat__item:hover { border-color: var(--hs-bord-fort); }
.hs-compat__logo { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hs-compat__logo img { width: 100%; height: 100%; object-fit: contain; }
.hs-compat__nom { font-size: 13px; font-weight: 500; color: var(--hs-texte); line-height: 1; white-space: nowrap; }
.hs-offre > .absolute.top-0.right-0 .fa-icon.hs-couronne { display: inline-block; }

/* FAQ : contrastes (textes, bordures, séparateurs, état ouvert). Aucun changement de mise en page. */
details:has(> summary) { border-color: var(--hs-bord-fort) !important; }
details[open]:has(> summary) { border-color: #4a5263 !important; }
details > summary { color: var(--hs-texte); text-align: left; }
details > summary svg, details > summary i, details > summary .fa-icon { color: var(--hs-muet) !important; }
details > summary:hover svg, details[open] > summary svg { color: var(--hs-texte-2) !important; }
details > :not(summary), details > :not(summary) p { color: var(--hs-texte-2) !important; }
details > :not(summary) { border-color: var(--hs-bord-fort) !important; text-align: left; }
div:has(> .faq-toggle) { border-color: var(--hs-bord-fort) !important; }
div:has(> .faq-content:not(.hidden)) { border-color: #4a5263 !important; }
.faq-toggle .fa-icon, .faq-toggle svg { color: var(--hs-muet) !important; }
.faq-content { border-color: var(--hs-bord-fort) !important; }
.faq-content, .faq-content p { color: var(--hs-texte-2) !important; }

/* Accent gris clair (DayZ) : texte foncé sur les boutons, le blanc y était illisible. */
.bg-gray-400.text-white { color: var(--hs-page) !important; }
/* Pastille active (filtres du blog) : le thème sombre rendait fond et texte identiques. */
.bg-gray-100.text-gray-900 { background-color: var(--hs-texte) !important; color: var(--hs-page) !important; }

/* ---- Cartes d'offres aérées (#408) : plus d'espace intérieur, entre les blocs et entre les cartes ---- */
/* Carte commune (offer-card.php) */
.hs-card { padding: 30px 26px; gap: 26px; }
.hs-card__price { padding-bottom: 24px; }
.hs-card__specs { gap: 13px; }
.hs-card__feats { gap: 10px 14px; padding-top: 20px; }
.hs-card__cta { padding: 12px 16px; }
.flex.flex-wrap:has(> .hs-card) { gap: 24px !important; }
/* Cartes VPS Intel, Ryzen, Windows (.hs-offre) */
.hs-offres { gap: 24px !important; }
.hs-offre > .relative.p-6 { padding: 30px 26px; }
.hs-offre .mb-5 { margin-bottom: 26px; }
.hs-offre .mb-5:has(.text-3xl) { padding-bottom: 24px; }
.hs-offre .grid.grid-cols-2 { gap: 13px; }
/* Cartes sur mesure Minecraft, FiveM, gammes VPS (.hs-aere) */
article.hs-aere.p-5, .hs-aere > .p-6 { padding: 30px 26px; }
.hs-aere .mt-auto > a.bg-red-500 { padding-top: 11px; padding-bottom: 11px; } /* 01/10 : hs-vitrine retire la bordure des boutons rouges, la carte Pro remontait de 2px */
.hs-aere .mb-1\.5 { margin-bottom: 10px; }
.hs-aere .mb-3 { margin-bottom: 16px; }
.hs-aere .mb-4 { margin-bottom: 22px; }
.hs-aere .mb-5 { margin-bottom: 26px; }
.hs-aere .space-y-1\.5 > * + * { margin-top: 10px; }
.flex.flex-wrap:has(> .hs-aere) { gap: 24px !important; }
.grid:has(> .hs-aere) { gap: 28px; }
.hs-aere .mt-auto > .items-baseline { flex-wrap: wrap; column-gap: 4px; }
.hs-aere .mt-auto > .items-baseline > span:first-child { flex-basis: 100%; white-space: nowrap; margin-bottom: 2px; }

/* ---- Cartes de prix (653, retours FiveM) : prix sur une ligne, rangées alignées, Populaire nette ---- */
.hs-card__price, .hs-offre .mb-5:has(.text-3xl) .flex { flex-wrap: nowrap !important; white-space: nowrap; }
.hs-card__amount, .hs-offre .text-3xl { font-size: 2rem; line-height: 1.1; }
.hs-card__period { font-size: .875rem; }
.hs-card__head { min-height: 48px; }
.hs-card__specs { flex: 0 0 auto; }
.hs-card__feats { grid-template-columns: 1fr !important; }
.hs-card__feats li { white-space: nowrap; hyphens: none; -webkit-hyphens: none; }
.hs-card:hover, .hs-offres > .hs-offre:hover { border-color: #4a5262 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .45) !important; }
.hs-card.hs-card--pop.hs-card--pop, .hs-card.hs-card--pop.hs-card--pop:hover, .hs-offres > .hs-offre.hs-offre:is(.border-blue-400\/60, .border-red-400\/60, .border-green-400\/60), .hs-offres > .hs-offre.hs-offre:is(.border-blue-400\/60, .border-red-400\/60, .border-green-400\/60):hover {
  border: 1px solid var(--hs-rouge) !important;
  background: linear-gradient(180deg, var(--hs-rouge-doux), #1b2029 65%) !important;
  box-shadow: inset 0 0 0 1px var(--hs-rouge), 0 0 0 3px var(--hs-rouge-doux), 0 10px 28px rgba(0, 0, 0, .45) !important;
}
.hs-card.hs-card--pop .hs-card__badge.hs-card__badge, .hs-offres > .hs-offre > .absolute.top-0.right-0.absolute { color: #fca5a5 !important; background: var(--hs-rouge-doux) !important; border-color: var(--hs-rouge) !important; }
.hs-offres > .hs-offre h3 { min-height: 2.5em; display: flex; align-items: center; line-height: 1.25; }