/* Landings Univers Game, Univers Cloud et VPS en « Signal » (chantier 1318). Chargée après accueil.css,
   dont elle reprend les composants (hero, cartes, réseau, avis, FAQ, clôture) ; ici seulement ce qui est propre aux landings. */

/* Hero : même gabarit que l'accueil, un seul bouton et le prix d'appel à côté */
.sg-lp-hero .sg-hero-visuel img { object-position: 50% 50%; }
.sg-lp-hero .sg-leds .cadre { left: calc((100cqw - var(--w)) * .5); } /* LED du 1325 : même recadrage que l'image ci-dessus */
.sg-lp-hero .sg-hero-grille { padding-bottom: clamp(88px, 12vh, 140px); }
/* n°1538 (#1668 B) : Univers Game, groupe de personnages sur calque transparent (game-universe-persos.webp, 1920x1086, cadré
   comme l'ancien décor). Comme les personnages des pages jeux (jeu.css) : ombre portée, arrivée en mise au point ; pas de
   fondu à gauche (il effaçait Steve), le bas du groupe est fondu dans l'image. Sur téléphone, cadrage centré sur le groupe. */
.sg-gu-hero .sg-hero-visuel .perso { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: no-preference) {
  .sg-gu-hero .sg-hero-visuel .perso { animation: sg-arrive 1.1s var(--ease) .3s both; }
}
/* Tablette : comme les personnages des pages jeux (jeu.css), masqués entre 721 et 1100 px, où ils passaient sous le texte */
@media (min-width: 721px) and (max-width: 1100px) {
  .sg-gu-hero .sg-hero-visuel .perso { display: none; }
}
@media (max-width: 720px) {
  /* groupe centré, à 88 % de la hauteur du cadre comme les personnages des pages jeux (70 % sans le zoom) */
  .sg-gu-hero .sg-hero-visuel .perso { object-position: 80% 50%; scale: 1.25; }
}
.sg-lp-actions { grid-column: 1 / 8; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 48px; animation: sg-monte .9s var(--ease) .25s both; }
.sg-lp-actions .sg-btn { height: 50px; padding: 0 22px; font-size: 15px; }
.sg-lp-actions .mono { font-size: 12px; color: var(--ink-2); }
.sg-lp-hero .sg-preuve { grid-column: 1 / 8; justify-self: start; margin-top: 32px; }

/* Catalogue des jeux : tous visibles, en grille sous les trois grands */
.sg-catalogue { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--gut); }
.sg-catalogue a { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .2s ease; }
.sg-catalogue a::before { content: ''; position: absolute; z-index: 1; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sg-catalogue img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: filter .25s ease; }
.sg-catalogue .n { padding: 14px 16px 0; font: 700 16px/1.2 var(--f-display); font-stretch: 110%; }
.sg-catalogue .p { margin-top: auto; padding: 8px 16px 16px; font-size: 12px; color: var(--ink-3); }
.sg-catalogue a:hover { border-color: var(--line-3); }
.sg-catalogue a:hover::before { transform: scaleX(1); }
.sg-catalogue a:hover img { filter: brightness(1.08) saturate(1.08); }

/* Fiche matériel : quatre colonnes séparées par des filets, pas de cartes */
.sg-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.sg-specs > div { padding: 28px 24px 30px; border-left: 1px solid var(--line-2); }
.sg-specs > div:first-child { border-left: 0; padding-left: 0; }
.sg-specs dt { font: 500 11px/1.4 var(--f-mono); /* n°1470 : à 1, un libellé sur deux lignes collait */ font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sg-specs dd { margin: 14px 0 0; font: 720 24px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-specs dd.d { margin-top: 6px; font: 400 15px/1.5 var(--f-text); color: var(--ink-2); }
/* Chantier 1341 : visuel de chaque composant au-dessus de son libellé ; son fond noir se fond dans la page (lighten).
   La section (z-index, donc groupe à part) prend la couleur de la page : sans fond à elle, lighten n'a rien à mélanger.
   Chantier 1435 : venu de jeu.css, pour servir aussi à game-universe. */
.sg-materiel { background: var(--bg); }
.sg-materiel .sg-specs dt img { display: block; width: auto; max-width: 100%; height: clamp(88px, 12vw, 160px); margin: -6px 0 16px;
  object-fit: contain; object-position: left center; mix-blend-mode: lighten; } /* même hauteur partout : libellés alignés d'une colonne à l'autre */
.sg-sec-tete p strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1100px) {
  .sg-lp-actions, .sg-lp-hero .sg-preuve { grid-column: 1 / -1; }
  .sg-catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-specs > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .sg-specs > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 720px) {
  .sg-lp-actions { margin-top: 32px; }
  .sg-lp-actions .sg-btn { width: 100%; justify-content: space-between; }
  .sg-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .sg-catalogue .n { padding: 10px 12px 0; font-size: 14px; }
  .sg-catalogue .p { padding: 6px 12px 12px; font-size: 12px; }
  .sg-specs > div { padding: 20px 14px 22px; }
  .sg-specs dd { font-size: 19px; }
  .sg-specs dd.d { font-size: 13.5px; }
  .sg-specs dt { min-height: 2.8em; } /* n°1470 : deux lignes réservées, les valeurs d'une rangée restent alignées quand un libellé passe à la ligne */
}

/* Cloud : serveurs dédiés, une photo à gauche et les gammes en lignes à droite */
.sg-dedies-grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: center; }
.sg-dedies-visuel { grid-column: 1 / 6; margin: 0; padding: var(--esp-s); background: var(--bg-2); border: 1px solid var(--line-2); }
.sg-dedies-visuel img { width: 100%; height: auto; }
.sg-gammes { grid-column: 7 / 13; border-top: 1px solid var(--line-2); }
.sg-gammes a { position: relative; display: grid; grid-template-columns: 1fr 18px; column-gap: 20px; row-gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.sg-gammes .n { font: 720 22px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; transition: color .2s ease; }
.sg-gammes .b { margin-left: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); vertical-align: 3px; }
.sg-gammes .d { grid-column: 1; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.sg-gammes .p { grid-column: 1; margin-top: 6px; font-size: 12px; color: var(--ink); }
.sg-gammes .p .a { color: var(--ink-3); }
.sg-gammes .p small { margin-left: 12px; font-size: 12px; color: var(--ink-3); }
.sg-gammes svg { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 18px; height: 18px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-gammes a:hover .n { color: var(--rose-2); }
.sg-gammes a:hover svg { transform: translateX(4px); }
.sg-dedies .sg-reseau-liens { margin-top: 40px; }

/* Cloud : les quatre gammes du texte de référencement, en colonnes à filets ; tunnel IP en ligne simple */
.sg-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.sg-points li { padding: 28px 24px 4px; border-left: 1px solid var(--line-2); }
.sg-points li:first-child { border-left: 0; padding-left: 0; }
.sg-points h3 { font: 720 19px/1.25 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-points p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sg-tunnel { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 8px; margin-top: var(--esp-xl); padding: 28px 32px; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .2s ease; }
.sg-tunnel .b { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-2); }
.sg-tunnel .n { grid-column: 1; font: 720 21px/1.2 var(--f-display); font-stretch: 112%; }
.sg-tunnel .d { grid-column: 1; max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sg-tunnel .sg-lien { grid-column: 2; grid-row: 1 / 4; align-self: center; }
/* n°1545 : carte sans surtitre (carte du tunnel IP) : le lien couvre les deux lignes, pas une troisième vide. */
@media (min-width: 721px) { .sg-tunnel:not(:has(> .b)) .sg-lien { grid-row: 1 / 3; } }
.sg-tunnel:hover { border-color: var(--line-3); }

@media (max-width: 1100px) {
  .sg-dedies-visuel { grid-column: 1 / 6; }
  .sg-gammes { grid-column: 6 / 13; }
  .sg-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-points li:nth-child(3) { border-left: 0; padding-left: 0; }
  .sg-points li:nth-child(n+3) { border-top: 1px solid var(--line-2); margin-top: 24px; }
}
@media (max-width: 720px) {
  .sg-dedies-visuel { grid-column: 1 / -1; max-width: 360px; padding: 20px; margin-bottom: 32px; }
  .sg-gammes { grid-column: 1 / -1; }
  .sg-gammes a { padding: 22px 0; }
  .sg-gammes .n { font-size: 19px; }
  .sg-gammes .b { display: block; margin: 6px 0 0; vertical-align: 0; }
  .sg-gammes .p small { display: block; margin: 4px 0 0; }
  .sg-points { grid-template-columns: 1fr; }
  .sg-points li, .sg-points li:nth-child(n) { padding: 22px 0 6px; border-left: 0; border-top: 1px solid var(--line-2); margin-top: 0; }
  .sg-points li:first-child { border-top: 0; }
  .sg-tunnel { grid-template-columns: 1fr; padding: 22px 20px; }
  .sg-tunnel .sg-lien { grid-column: 1; grid-row: auto; margin-top: 12px; }
}

/* VPS : hero illustré par les trois box produit existantes, posées en escalier à droite */
.sg-lp-boites .sg-hero-visuel { display: flex; align-items: center; justify-content: flex-end; gap: 0; width: 48%; padding: 40px var(--pad) 40px 0; }
.sg-lp-boites .sg-hero-visuel img { width: 33.3%; height: auto; object-fit: contain; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.sg-lp-boites .sg-hero-visuel .b-intel { transform: translateY(26px); }
.sg-lp-boites .sg-hero-visuel .b-ryzen { position: relative; z-index: 1; width: 38%; margin: 0 -4%; transform: translateY(-18px); }
.sg-lp-boites .sg-hero-visuel .b-windows { transform: translateY(34px); }

/* Univers Cloud (n°1508, Mathis 11/10 02:49 et 03:14) : les trois serveurs qui démarrent des pages de gamme VPS
   (noeuds-vps.php, styles et animation dans vps.css) à la place de la baie Dell du #1447. La pile occupe les colonnes
   8 à 12 de la grille du contenu (--cl : marge de .sg-wrap), bord droit sur celui du contenu, et se cale sur le bas du
   bloc de texte (bottom = padding-bottom de .sg-lp-hero .sg-hero-grille) : elle reste sous le H1 dans les six langues,
   le titre pouvant aller jusqu'à la 9e colonne. Le fondu d'arrivée porte sur la figure entière (image et voyants). */
.sg-lp-noeuds .sg-hero-visuel {
  --cl: max(var(--pad), (100% - var(--max)) / 2 + var(--pad));
  --l: calc(((100% - 2 * var(--cl)) * 5 / 12 - var(--gut) * 7 / 12) / .902); /* la pile fait 90,2 % de la largeur de l'image */
  top: auto; bottom: clamp(88px, 12vh, 140px); right: calc(var(--cl) - var(--l) * .049);
  width: var(--l); height: auto; aspect-ratio: 16 / 9; translate: 0 6%;
}
.sg-lp-noeuds .sg-vg-noeuds { animation: sg-allume 1.8s ease-out .15s both; }
.sg-lp-noeuds .sg-vg-noeuds img { -webkit-mask-image: none; mask-image: none; animation: none; }
/* Les trois box au premier plan, par-dessus le bas de la pile : même échelle, même ligne de sol, écarts égaux. Marges
   et décalage de chaque image retirent ses bords transparents (mesurés) : le flex aligne et espace les boîtes visibles. */
.sg-lp-noeuds .boites { position: absolute; left: 16%; width: 52%; bottom: 6%; /* = translate du cadre : sol des box sur le bas du texte */ display: flex; align-items: flex-end; justify-content: space-between; }
.sg-lp-noeuds .boites img {
  width: 38%; height: auto; object-fit: contain; -webkit-mask-image: none; mask-image: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)) drop-shadow(-12px -8px 24px rgba(0, 0, 0, .9));
  animation-delay: .5s; /* fondu du hero lancé après celui de la pile, chargée en différé */
}
.sg-lp-noeuds .boites .b-intel { margin: 0 -4.48% 0 -4.07%; translate: 0 4.5%; }
.sg-lp-noeuds .boites .b-ryzen { margin: 0 -1.44% 0 -2.13%; translate: 0 8.8%; }
.sg-lp-noeuds .boites .b-windows { margin: 0 -5.97% 0 -6.08%; }

/* VPS : cartes de gammes avec les trois caractéristiques, puis le texte de référencement en deux colonnes */
.sg-familles-lp .f { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 12px; color: var(--ink-3); }
.sg-familles-lp .f span::before { content: '+ '; color: var(--rose); }
.sg-prose2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gut) * 2); margin-top: var(--esp-xl); }
.sg-prose2 p { font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.sg-prose2 strong { color: var(--ink-2); font-weight: 600; }

/* VPS : six usages en grille à filets (3 x 2), puis Intel ou Ryzen en une ligne */
.sg-points-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-points-6 li { padding-bottom: 28px; }
.sg-points-6 li:nth-child(4) { border-left: 0; padding-left: 0; }
.sg-points-6 li:nth-child(n+4) { border-top: 1px solid var(--line-2); }
.sg-choix { display: grid; grid-template-columns: 4fr 4fr 4fr; column-gap: var(--gut); margin-top: var(--esp-xl); }
.sg-choix .t h3 { font: 720 26px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-choix .t p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sg-choix a { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .2s ease; }
.sg-choix a .n { font: 720 19px/1.2 var(--f-display); font-stretch: 112%; }
.sg-choix a .d { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sg-choix a .sg-lien { margin-top: auto; }
.sg-choix a:hover { border-color: var(--line-3); }

@media (max-width: 1100px) {
  .sg-lp-boites .sg-hero-visuel { width: 52%; opacity: .5; }
  .sg-lp-noeuds .sg-hero-visuel { display: none; } /* texte sur toute la largeur : plus de place à côté sans le recouvrir */
  .sg-points-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-points-6 li:nth-child(n) { border-left: 1px solid var(--line-2); padding-left: 24px; border-top: 1px solid var(--line-2); }
  .sg-points-6 li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sg-points-6 li:nth-child(-n+2) { border-top: 0; }
  .sg-choix { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .sg-choix .t { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sg-prose2 { grid-template-columns: 1fr; row-gap: 16px; }
  .sg-points-6 { grid-template-columns: 1fr; }
  .sg-points-6 li:nth-child(n) { padding: 22px 0 6px; border-left: 0; border-top: 1px solid var(--line-2); }
  .sg-points-6 li:first-child { border-top: 0; }
  .sg-choix { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .sg-lp-boites .sg-hero-visuel { display: none; } }
@media (max-width: 720px) { .sg-dedies-visuel { max-width: 280px; } }
.sg-choix a .sg-lien { align-self: flex-start; }
.sg-adp-lien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sg-adp-lien .b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-2); }
.sg-adp-lien span:nth-child(2) { flex: 1 1 40ch; }
/* n°1484 : tête de section d'avis avec sous-titre et lien Trustpilot hors pages jeu (même rendu que .sg-jp-avis-tete de jeu.css). */
.sg-avis-tete { grid-column: 9 / 13; }
.sg-avis-tete .sg-preuve { margin-top: 18px; }
@media (max-width: 1100px) { .sg-avis-tete { grid-column: 1 / -1; margin-top: 20px; } }
/* n°1470 : sur téléphone, les trois boîtes (/vps) et la pile de serveurs (Univers Cloud) reviennent sous le texte, comme
   les visuels des autres héros (accueil.css), au lieu d'être masquées. */
@media (max-width: 720px) {
  .sg-hero.sg-lp-boites > .sg-hero-visuel { display: flex; justify-content: center; width: 100%; aspect-ratio: auto; padding: 28px var(--pad) 40px; opacity: 1; }
  .sg-hero.sg-lp-noeuds > .sg-hero-visuel { display: block; top: auto; bottom: auto; right: auto; width: auto; margin: 16px var(--pad) 0; aspect-ratio: 16 / 9; translate: none; }
  /* héros sans visuel sur téléphone : même bas que les autres héros (accueil.css), 12vh y laissait une centaine de px */
  .sg-lp-hero .sg-hero-grille { padding-bottom: 72px; }
}