/* n°1476 : offre « protection DDoS FiveM pour un serveur hébergé ailleurs ». n°1517 : sa page /protection-ddos-fivem (offres,
   inclus) et l'encart #remote de /anti-ddos-fivem qui y renvoie. Chargée après jeu.css, sfa.css et tunnel.css (étapes, listes, points). */

/* Offres : un palier par nombre maximum de joueurs (sv_maxclients) */
.sg-pfv-offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-pfv-offres article { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line-2); background: var(--bg-2); }
.sg-pfv-offres h3 { font: 720 22px/1.2 var(--f-display); font-stretch: 112%; }
.sg-pfv-offres .s { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.sg-pfv-offres .prix { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.sg-pfv-offres .prix .mono { font-size: 26px; font-weight: 600; color: var(--ink); }
.sg-pfv-offres .u { flex: 1; margin: 8px 0 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sg-pfv-offres .sg-btn { justify-content: center; }
/* Commande pas encore ouverte : bouton neutre, seule l'étiquette « Bientôt » porte l'accent */
.sg-btn.off { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: not-allowed; }
.sg-btn.off:hover { background: transparent; }
.sg-btn.off:active { transform: none; }
.sg-btn.off .tag { padding: 3px 7px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--rose-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-pfv-inclus { margin-top: 44px; font: 700 18px/1.3 var(--f-display); font-stretch: 108%; }
.sg-pfv-inclus + .sg-tip-points { margin-top: 18px; }

/* Encart #remote de /anti-ddos-fivem : titre et phrase à gauche, bouton et prix d'appel à droite. Il suit les offres FiveM :
   pas d'espace de section au-dessus, seul celui du bas de #tarifs les sépare. */
.sg-section.sg-pfv-remote { padding-top: 0; }
.sg-pfv-encart { display: flex; align-items: center; justify-content: space-between; gap: 20px 48px; padding: 28px 32px; border: 1px solid var(--line-2); background: var(--bg-2); }
.sg-pfv-encart h2 { font: 720 24px/1.2 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-pfv-encart p { margin-top: 8px; max-width: 66ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.sg-pfv-encart .act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.sg-pfv-encart .act .mono { font-size: 13px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .sg-pfv-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sg-pfv-offres { grid-template-columns: 1fr; }
  .sg-pfv-encart { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .sg-pfv-encart .act { align-items: flex-start; }
}