/* Accueil « Signal » (chantier 1311), version aérée du 08/10 : une idée par bloc, beaucoup d'air,
   prix d'appel seulement. Hero, deux portes, jeux, familles VPS, réseau, avis, FAQ, clôture. */
/* Taille du H1 réduite à la demande de Mathis (08/10 23:09), texte inchangé. */
.sg-hero { --h1: clamp(40px, 4.6vw, 68px); position: relative; z-index: 1; overflow: hidden; }
.sg-hero-visuel { position: absolute; top: 0; right: 0; width: 62%; height: 100%; margin: 0; pointer-events: none; }
.sg-hero-visuel img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: sg-allume 1.8s ease-out .15s both;
}
@keyframes sg-allume { from { opacity: 0; transform: scale(1.03); } }
/* LED de façade animées (chantier 1325) : le cadre refait le recadrage de l'image (cover, 30 % 50 %)
   pour que les points restent sur les LED mesurées à toutes les largeurs. Chaque LED s'éteint par
   brefs à-coups, rythmes et durées différents, façon activité disque ou réseau. */
.sg-leds { position: absolute; inset: 0; container-type: size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, #000 60%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: sg-leds-arrive .6s ease-out 1.7s both;
}
.sg-leds .cadre {
  --w: max(100cqw, 100cqh * 2200 / 1245); --h: max(100cqh, 100cqw * 1245 / 2200);
  position: absolute; width: var(--w); height: var(--h);
  left: calc((100cqw - var(--w)) * .3); top: calc((100cqh - var(--h)) * .5);
}
.sg-leds i { position: absolute; width: 1.3%; height: 2.5%; transform: translate(-50%, -50%); }
.sg-leds i::before, .sg-leds i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.sg-leds i::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--rose) 24%, var(--bg)) 60%, transparent); opacity: 0; animation: var(--a) var(--d) steps(1, end) var(--r) infinite; }
.sg-leds i::after { inset: -60% -90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rose) 55%, transparent), transparent); mix-blend-mode: screen; opacity: 0; animation: sg-led-halo var(--h-d) ease-in-out var(--r) infinite; }
.sg-leds i:nth-child(1) { left: 47.50%; top: 50.43%; --a: sg-led-disque; --d: 7.3s; --r: -1.1s; --h-d: 9.1s; }
.sg-leds i:nth-child(2) { left: 49.02%; top: 50.84%; --a: sg-led-reseau; --d: 4.7s; --r: -.4s; --h-d: 6.7s; }
.sg-leds i:nth-child(3) { left: 50.53%; top: 51.29%; --a: sg-led-disque; --d: 5.3s; --r: -2.9s; --h-d: 8.3s; }
.sg-leds i:nth-child(4) { left: 52.04%; top: 51.70%; --a: sg-led-reseau; --d: 6.1s; --r: -3.7s; --h-d: 7.9s; }
@keyframes sg-leds-arrive { from { opacity: 0; } }
@keyframes sg-led-disque { 0%, 14%, 18%, 50%, 82%, 87%, 100% { opacity: 0; } 12%, 16%, 47%, 81%, 84% { opacity: .9; } }
@keyframes sg-led-reseau { 0%, 8%, 23%, 27%, 41%, 62%, 64%, 69%, 90%, 100% { opacity: 0; } 5%, 22%, 25%, 38%, 60%, 63%, 66%, 88% { opacity: .9; } }
@keyframes sg-led-halo { 0%, 28%, 40%, 66%, 76%, 100% { opacity: 0; } 32% { opacity: .5; } 70% { opacity: .35; } }
@supports not (width: 1cqw) { .sg-leds { display: none; } }
/* Arrivée du serveur (chantier 1335) : il glisse depuis la droite en faisant sa mise au point, LED
   éteintes, puis elles s'allument une à une avant de reprendre leur activité. Transform, opacity et
   filter seulement : rien ne bouge dans la mise en page. */
@media (prefers-reduced-motion: no-preference) {
  .sg-hero-visuel:has(.sg-leds) { animation: sg-arrive 1.1s var(--ease) .1s both; }
  .sg-hero-visuel:has(.sg-leds) img, .sg-hero-visuel:has(.sg-leds) .sg-leds { animation: none; }
  .sg-leds i { --b: .85s; }
  .sg-leds i:nth-child(2) { --b: .93s; } .sg-leds i:nth-child(3) { --b: 1.01s; } .sg-leds i:nth-child(4) { --b: 1.09s; }
  .sg-leds i::before { animation: var(--a) var(--d) steps(1, end) var(--r) infinite, sg-led-eteinte var(--b) linear; }
  .sg-leds i::after { animation: sg-led-halo var(--h-d) ease-in-out var(--b) infinite backwards, sg-led-flash .5s ease-out var(--b) backwards; }
}
@keyframes sg-arrive { from { opacity: 0; transform: translateX(18%); filter: blur(14px); } }
@keyframes sg-led-eteinte { from, 90% { opacity: 1; transform: scale(1.7); filter: brightness(.4); } to { opacity: 0; transform: scale(1.7); filter: brightness(.4); } }
@keyframes sg-led-flash { from { opacity: 0; } 20% { opacity: .8; } to { opacity: 0; } }
.sg-hero-grille { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding-top: clamp(72px, 11vh, 128px); padding-bottom: clamp(96px, 14vh, 160px); }
.sg-hero h1 {
  grid-column: 1 / 10; font: 780 var(--h1)/.96 var(--f-display); font-stretch: 116%;
  letter-spacing: -.03em; text-wrap: balance; animation: sg-monte .9s var(--ease) .1s both;
}
/* n°1507 : le plus long mot du H1 tient dans sa colonne (--mot-h1, signal.css), la taille suit la largeur de la colonne.
   --h1-n : colonnes sur 12 occupées par le H1, à tenir avec son grid-column (variantes jeu, apropos, marque, comparateur,
   texte) ; --h1-col remplace le calcul quand la colonne n'est pas une portion de la grille (calculateur). */
.sg-hero-grille { container-type: inline-size; }
.sg-hero h1 { --h1-n: 9; }
@supports (width: 1cqi) { /* sans cqi (Safari 15), la règle serait invalide au calcul et le H1 retomberait à 16 px */
  .sg-hero h1 { font-size: min(var(--h1), calc(var(--h1-col, calc(var(--h1-n) / 12 * (100cqi + var(--gut)) - var(--gut))) / var(--mot-h1))); }
}
.sg-hero h1 em { font-style: normal; color: var(--rose); }
@keyframes sg-monte { from { opacity: 0; transform: translateY(18px); } }
.sg-chapo { grid-column: 1 / 7; margin-top: 40px; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.sg-chapo strong { color: var(--ink); font-weight: 600; }

/* Deux portes, même poids : serveurs de jeux et VPS (décision du 02/10, pas tout sur les jeux) */
.sg-portes { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; animation: sg-monte .9s var(--ease) .25s both; }
.sg-porte { position: relative; display: grid; grid-template-columns: 1fr 18px; align-items: center; row-gap: 10px; padding: 24px 24px 22px; background: rgba(15, 15, 19, .82); border: 1px solid var(--line-2); transition: border-color .2s ease, background-color .2s ease; }
.sg-porte::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sg-porte .t { font: 720 22px/1.1 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-porte .p { grid-column: 1; font-size: 12px; color: var(--ink-2); }
.sg-porte svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-porte:hover { border-color: var(--line-3); background: var(--bg-3); }
.sg-porte:hover::before, .sg-porte:focus-visible::before { transform: scaleX(1); }
.sg-porte:hover svg { transform: translateX(4px); }
.sg-preuve { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); transition: color .2s ease; }
.sg-hero .sg-preuve { grid-column: 1 / 8; justify-self: start; margin-top: 32px; }
.sg-preuve:hover { color: var(--ink); }

/* Sections : un titre, une phrase, un seul contenu */
/* n°1448 (#1520 A) : vide resserré (158 → 115 px à 1440 px) et plus de trait pleine largeur entre les sections. */
.sg-section { position: relative; z-index: 1; padding: var(--esp-section) 0; }
.sg-sec-tete { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: baseline; margin-bottom: var(--esp-l); }
.sg-sec-tete h2 { grid-column: 1 / 8; font: 760 var(--h2)/1.05 var(--f-display); font-stretch: 112%; letter-spacing: -.03em; }
.sg-sec-tete p { grid-column: 9 / 13; max-width: 42ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sg-sec-tete.ligne { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; align-items: end; }
.sg-sec-tete.ligne .sg-preuve { margin: 0 0 6px; }
/* n°1470 (#1620 A) : picto du texte de tête, dans la marge à sa gauche (sens du texte : panneau, info, bouclier, chrono),
   posé seulement quand le texte dit quelque chose. */
.sg-sec-tete p:has(> .sg-tete-picto) { position: relative; }
.sg-sec-tete .sg-tete-picto { position: absolute; left: -38px; top: 1px; width: 22px; height: 22px; }

/* Jeux : trois grandes cartes (visuels des pages jeux), puis les autres jeux en défilé comme les avis */
.sg-grands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.sg-grands 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-grands 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-grands img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: filter .3s ease; }
.sg-grands .corps { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; padding: 24px 26px 26px; }
.sg-grands .n { font: 760 30px/1.05 var(--f-display); font-stretch: 114%; letter-spacing: -.02em; }
.sg-grands .p { grid-column: 1; font-size: 12px; color: var(--ink-2); }
.sg-grands svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-grands .p .a, .sg-familles .p .a { color: var(--ink-3); }
.sg-grands a:hover { border-color: var(--line-3); }
.sg-grands a:hover::before { transform: scaleX(1); }
.sg-grands a:hover img { filter: brightness(1.08) saturate(1.08); }
.sg-grands a:hover svg { transform: translateX(4px); }
/* Autres jeux : rangée manuelle dans le gabarit, tuiles au format des grandes cartes, flèches au survol */
.sg-rangee { position: relative; margin-top: var(--gut); }
.sg-rangee-piste { display: flex; gap: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.sg-rangee-piste::-webkit-scrollbar { display: none; }
.sg-rangee-piste li { flex: 0 0 calc((100% - 4 * var(--gut)) / 5); scroll-snap-align: start; }
.sg-rangee-piste 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-rangee-piste 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-rangee-piste img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: filter .25s ease; }
.sg-rangee-piste .n { padding: 14px 16px 16px; font: 700 16px/1.2 var(--f-display); font-stretch: 110%; }
.sg-rangee-piste a:hover { border-color: var(--line-3); }
.sg-rangee-piste a:hover::before { transform: scaleX(1); }
.sg-rangee-piste a:hover img { filter: brightness(1.08) saturate(1.08); }
.sg-rangee-piste .tous a { flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.sg-rangee-piste .tous .n { padding: 0; }
.sg-rangee-piste .tous svg { width: 16px; height: 16px; color: var(--rose); }
.sg-rangee-fl { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--bg); border: 1px solid var(--line-3); color: var(--ink); cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .2s ease, border-color .2s ease; }
.sg-rangee-fl.prec { left: -22px; }
.sg-rangee-fl.suiv { right: -22px; }
.sg-rangee-fl.prec svg { transform: scaleX(-1); }
.sg-rangee-fl svg { width: 16px; height: 16px; }
.sg-rangee-fl:hover { border-color: var(--ink-3); }
.sg-rangee-fl:disabled { opacity: 0 !important; pointer-events: none; }
.sg-rangee-fl:focus-visible { opacity: 1; }
@media (hover: hover) { .sg-jeux:hover .sg-rangee-fl { opacity: 1; } }
/* Écran tactile : on fait défiler au doigt ; une flèche invisible ne doit pas intercepter le tap sur une carte. */
@media (hover: none), (max-width: 720px) { .sg-rangee-fl { display: none; } } /* audit n°4 : la flèche droite (right: -22px) faisait défiler la page de côté */

/* VPS : trois familles, leur boîte produit (visuels du site), le prix d'appel, le lien vers la gamme */
.sg-vps { background: var(--bg-2); }
.sg-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sg-familles a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 44px 40px 40px; background: var(--bg); border: 1px solid var(--line-2); transition: border-color .2s ease; }
.sg-familles a::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sg-familles img { width: 136px; height: 136px; object-fit: contain; margin-bottom: 36px; }
.sg-familles .n { font: 720 24px/1.1 var(--f-display); font-stretch: 112%; letter-spacing: -.015em; }
.sg-familles .d { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sg-familles .p { margin-top: auto; padding-top: 44px; font-size: 12px; color: var(--ink); }
.sg-familles .p small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.sg-familles .sg-lien { align-self: flex-start; justify-self: start; margin-top: 22px; }
.sg-familles a:hover { border-color: var(--line-3); }
.sg-familles a:hover::before { transform: scaleX(1); }

/* Réseau : mini-carte des 2 PoP et des pings (données de la page infrastructure), quatre atouts à droite */
.sg-reseau-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.sg-carte { margin: 0; }
.sg-carte svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg-carte .fr { fill: var(--bg-3); stroke: var(--line-3); stroke-width: 1; stroke-linejoin: round; }
.sg-carte .fils path { fill: none; stroke: rgba(226, 18, 57, .3); stroke-width: 1.2; }
.sg-carte .fils .comete { stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 7 93; animation: sg-comete 2.6s linear infinite; }
@keyframes sg-comete { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sg-carte .villes circle { fill: var(--ink-2); }
.sg-carte text { font: 500 11px/1 var(--f-mono); font-stretch: 87.5%; fill: var(--ink-2); }
.sg-carte text .ms { fill: var(--ink); font-weight: 650; }
.sg-carte .pop { fill: var(--rose); stroke: var(--bg); stroke-width: 2; }
.sg-carte .pouls { fill: none; stroke: var(--rose); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sg-pouls 2.4s ease-out infinite; }
@keyframes sg-pouls { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.9); } }
.sg-carte .pop-lbl { font-size: 12px; font-weight: 600; fill: var(--ink); }
.sg-carte figcaption { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.sg-atouts li { padding: 24px 0; border-top: 1px solid var(--line-2); }
.sg-atouts li:last-child { border-bottom: 1px solid var(--line-2); }
.sg-atouts h3 { font: 720 21px/1.2 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-atouts p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.sg-atouts .mono { color: var(--ink); font-size: 14px; }
.sg-reseau-liens { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: var(--esp-m); }
/* n°1378 (audit n°31) : hors accueil, la section réseau tient sur une bande : titre, une phrase, les deux liens. */
.sg-reseau-court { position: relative; z-index: 1; padding: var(--esp-bande) 0; background: var(--bg-2); }
.sg-reseau-court .sg-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 16px; align-items: center; }
.sg-reseau-court h2 { grid-column: 1 / 5; font: 720 24px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-reseau-court p { grid-column: 5 / 9; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.sg-reseau-court .liens { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* n°1484 (#1555 A) : rangée des quatre atouts sous la ligne réseau, pages produit seulement ($sg_reseau_preuves) */
.sg-reseau-court .sg-preuves { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 24px; }
.sg-reseau-court .sg-preuves li:last-child { border-bottom: 0; }

/* Avis : deux lignes qui défilent en sens opposé, pause au survol */
.sg-avis-defile { display: grid; gap: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sg-avis-ligne { overflow: hidden; }
.sg-avis-ligne .piste { display: flex; width: max-content; animation: sg-defile 120s linear infinite; }
.sg-avis-ligne.inverse .piste { animation-direction: reverse; animation-duration: 135s; }
.sg-avis-defile:hover .piste, .sg-avis-defile:focus-within .piste { animation-play-state: paused; }
.sg-avis-ligne .lot { display: flex; gap: 20px; padding-right: 20px; }
.sg-avis-carte { flex: none; width: 392px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 26px 28px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s ease; }
.sg-avis-carte:hover { border-color: var(--line-3); }
.sg-avis-carte blockquote p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.6; }
.sg-avis-carte figcaption { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; }
.sg-avis-carte img { width: 56px; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid var(--line-2); outline-offset: -1px; }
.sg-avis-tag { display: grid; place-items: center; min-width: 56px; height: 32px; padding: 0 6px; border: 1px solid rgba(226, 18, 57, .45); font: 600 12px/1 var(--f-mono); color: var(--rose-2); } /* « Dédié », « Dedicated » : largeur au texte (n°1378) */
.sg-avis-carte .qui b { display: block; font-size: 14px; line-height: 1.3; }
.sg-avis-carte .qui span { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.sg-avis-carte .etoiles svg { width: 11px; height: 11px; }
.sg-avis-trad { margin-top: 16px; font-size: 12px; line-height: 1.4; color: var(--ink-3); } /* n°1484 (#1554) : mention sous le défilé, hors du français */
.sg-avis-fixe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } /* n°1603 : avis sans défilement ($sg_avis_fixe) */
.sg-avis-fixe .sg-avis-carte { width: auto; }

/* Fin de page (#1600 B, 11/10 ; toutes les pages depuis le n°1550, gabarit fin-ress.php) : une seule section. Tête (titre,
   phrase, liens d'aide), FAQ sur deux colonnes aux rangées serrées, puis articles et liens « pour aller plus loin » en cartes
   courtes. Sous-titres : filet dessous, rien au-dessus (Mathis, 11/10 03:05) ; sans sous-titre, le filet passe sur la FAQ. */
.sg-jp-ress-tete { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: end; margin-bottom: 48px; }
.sg-jp-ress-tete > div { grid-column: 1 / 8; }
.sg-jp-ress-tete h2 { font: 760 var(--h2)/1.05 var(--f-display); font-stretch: 112%; letter-spacing: -.03em; }
.sg-jp-ress-tete > div > p { margin-top: 18px; max-width: 58ch; line-height: 1.6; color: var(--ink-2); }
.sg-jp-ress-tete .liens { grid-column: 8 / 13; justify-self: end; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.sg-jp-ress h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); font: 700 20px/1.2 var(--f-display); font-stretch: 110%; }
.sg-jp-faq + h3 { margin-top: var(--esp-l); }
.sg-jp-ress-tete + .sg-jp-faq { border-top: 1px solid var(--line-2); }
.sg-jp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } /* rangées étirées : les filets des deux colonnes tombent à la même hauteur */
.sg-jp-faq > details { border-bottom: 1px solid var(--line-2); }
.sg-jp-faq > details > summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 0; list-style: none; cursor: pointer; font: 600 16.5px/1.4 var(--f-text); }
.sg-jp-faq summary::-webkit-details-marker { display: none; }
.sg-jp-faq > details > summary > svg { flex: none; width: 12px; height: 12px; margin-top: 6px; color: var(--ink-3); transition: transform .3s var(--ease), color .2s ease; }
.sg-jp-faq > details > summary:hover > svg { color: var(--ink); }
.sg-jp-faq > details[open] > summary > svg { transform: rotate(180deg); color: var(--rose); }
.sg-jp-faq .rep { max-width: 66ch; padding: 0 32px 22px 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.sg-jp-faq .rep strong, .sg-jp-faq .rep b { color: var(--ink); font-weight: 600; }
.sg-jp-faq .rep a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }
.sg-jp-faq > .sg-jp-faq-plus { grid-column: 1 / -1; border-bottom: 0; }
.sg-jp-faq > .sg-jp-faq-plus > summary { display: block; width: max-content; max-width: 100%; margin-top: 22px; list-style: none; cursor: pointer; }
.sg-jp-faq > .sg-jp-faq-plus > summary .sg-lien svg { width: 12px; height: 12px; }
.sg-jp-faq > .sg-jp-faq-plus[open] > summary { display: none; }
.sg-jp-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); }
.sg-jp-cartes a { display: grid; grid-template-columns: 1fr 14px; grid-auto-rows: min-content; column-gap: 16px; row-gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.sg-jp-cartes .n { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ink); transition: color .2s ease; }
.sg-jp-cartes .d { grid-column: 1; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.sg-jp-cartes .s { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.sg-jp-cartes svg { grid-column: 2; grid-row: 1; margin-top: 4px; width: 14px; height: 14px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-jp-cartes a:hover .n { color: var(--rose-2); }
.sg-jp-cartes a:hover svg { transform: translateX(3px); }
.sg-jp-cartes.c1, .sg-jp-cartes.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* colonnes selon le nombre de cartes (hs_cartes_lp) */
.sg-jp-cartes.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .sg-jp-ress-tete > div, .sg-jp-ress-tete .liens { grid-column: 1 / -1; justify-self: start; }
  .sg-jp-ress-tete .liens { margin-top: 24px; }
  .sg-jp-faq { grid-template-columns: minmax(0, 1fr); }
  .sg-jp-cartes.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sg-jp-ress-tete { margin-bottom: 32px; }
  .sg-jp-faq > details > summary { padding: 16px 0; font-size: 16px; }
  .sg-jp-faq .rep { padding-right: 0; }
  .sg-jp-cartes, .sg-jp-cartes.c1, .sg-jp-cartes.c2, .sg-jp-cartes.c4 { grid-template-columns: minmax(0, 1fr); }
  .sg-jp-cartes a { padding: 16px 0 18px; }
}

/* Clôture : le seul aplat rose de la page */
.sg-fin { position: relative; z-index: 1; padding: var(--esp-l) 0; background: var(--rose); color: var(--on-rose); }
.sg-fin ::selection { background: var(--on-rose); color: var(--rose); }
.sg-fin-grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 24px; align-items: end; }
.sg-fin h2 { grid-column: 1 / 10; font: 800 var(--h2-fin)/1 var(--f-display); font-stretch: 116%; letter-spacing: -.035em; color: var(--on-btn); }
/* Le zéro barré de Hubot Sans se lit « 6θ » en très grand : les chiffres du titre passent en Mona Sans. */
.sg-fin h2 .chiffres { font-family: var(--f-text); font-stretch: 112%; }
.sg-fin p { grid-column: 1 / 7; max-width: 48ch; font-size: 18px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.sg-fin-actions { grid-column: 8 / 13; display: grid; gap: 12px; }
.sg-fin-btn { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg-0); color: var(--ink); font: 700 16px/1 var(--f-display); font-stretch: 112%; transition: background-color .2s ease; }
.sg-fin-btn .mono { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.sg-fin-btn svg { width: 18px; height: 18px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-fin-btn:hover { background: var(--noir); }
/* La flèche ne bouge qu'au survol et au focus (audit n°15 : jamais deux animations à l'écran) */
.sg-fin-btn:hover svg, .sg-fin-btn:focus-visible svg { transform: translateX(6px); }
.sg-fin-lien { justify-self: start; margin-top: 6px; color: var(--on-rose); border-bottom-color: currentColor; }
.sg-fin-lien svg { color: currentColor; }
.sg-rangee-fl[hidden] { display: none; }
.sg-lien .logo { width: 18px; height: 18px; color: var(--discord); fill: currentColor; }
.sg-fin :focus-visible { outline-color: var(--on-rose); }

/* Tablette et mobile */
@media (max-width: 1100px) {
  .sg-reseau-court .sg-preuves { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* n°1484 */
  .sg-hero-visuel { width: 72%; opacity: .55; }
  .sg-hero h1, .sg-chapo, .sg-portes, .sg-hero .sg-preuve { grid-column: 1 / -1; }
  .sg-hero h1 { --h1-n: 12; }
  .sg-sec-tete h2, .sg-sec-tete p { grid-column: 1 / -1; }
  .sg-sec-tete p { margin-top: 20px; }
  .sg-sec-tete p:has(> .sg-tete-picto) { padding-left: 36px; }
  .sg-sec-tete .sg-tete-picto { left: 0; }
  .sg-grands .corps { padding: 20px 20px 22px; }
  .sg-grands .n { font-size: 24px; }
  .sg-rangee-piste li { flex-basis: calc((100% - 3 * var(--gut)) / 4); }
  .sg-fin h2, .sg-fin p, .sg-fin-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sg-familles { grid-template-columns: 1fr; }
  .sg-familles a { display: grid; grid-template-columns: 88px 1fr; column-gap: 20px; padding: 28px 24px; }
  .sg-familles a > :not(img) { grid-column: 2; }
  .sg-familles img { grid-column: 1; grid-row: 1 / 6; width: 88px; height: 88px; margin: 0; }
  .sg-familles .p { padding-top: 20px; }
  .sg-reseau-grille { grid-template-columns: 1fr; gap: 40px; }
  .sg-carte { max-width: 520px; }
}
@media (max-width: 720px) {
  /* n°1470 : le visuel du héros revient sur téléphone (il y était masqué, premier écran tout en texte) : sous le texte,
     en bande fondue en haut et en bas dans le fond de la page. Mêmes images et même cadrage horizontal que sur ordinateur.
     Hors anti-ddos-pro : l'opérateur du NOC y a déjà son bandeau au-dessus du titre (n°1512, adpr.css). top et translate :
     les centrages verticaux du bureau (calculateur, tunnel-ip) faisaient remonter le visuel sur les boutons. Les visuels
     encore masqués sur téléphone (#1366 A : dédiés, à propos, infrastructure) gardent le bas du héros tel quel. */
  .sg-hero:has(> .sg-hero-visuel:not(.adpr-noc, .sg-mx-visuel, .sg-in-visuel, .sg-ap-visuel)) { display: flex; flex-direction: column; }
  .sg-hero:has(> .sg-hero-visuel:not(.adpr-noc, .sg-mx-visuel, .sg-in-visuel, .sg-ap-visuel)) .sg-hero-grille { width: 100%; padding-bottom: 0; } /* width : en flex, les marges auto rétrécissaient la grille */
  .sg-hero > .sg-hero-visuel:not(.adpr-noc) { order: 1; position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; opacity: 1; translate: none; }
  /* accueil : cadrage sur le serveur (à droite de l'image), voyants recalés sur le même cadrage. Le serveur est plat : en 4/3
     il flottait dans une centaine de px de noir dessus et dessous. Cadre en 16/9, image et voyants grossis ensemble depuis le
     bord droit (serveur à la même taille qu'en 4/3), fondu porté par le cadre pour ne pas être grossi avec eux. */
  .sg-hero > .sg-hero-visuel:has(.sg-leds) { aspect-ratio: 16 / 9; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .sg-hero > .sg-hero-visuel:has(.sg-leds) > img, .sg-hero > .sg-hero-visuel .sg-leds {
    -webkit-mask-image: none; mask-image: none; scale: 1.33; transform-origin: 100% 50%; }
  .sg-hero > .sg-hero-visuel:has(.sg-leds) img { object-position: 100% 50%; }
  .sg-hero > .sg-hero-visuel .sg-leds .cadre { left: calc(100cqw - var(--w)); }
  /* fondu haut et bas des visuels en image pleine ; les boîtes et la pile de serveurs (landing.css, vps.css) gardent leur détourage */
  .sg-hero:not(.sg-lp-boite, .sg-lp-boites, .sg-lp-noeuds) > .sg-hero-visuel:not(.adpr-noc, :has(.sg-leds)) > img:not(.perso),
  .sg-hero > .sg-hero-visuel picture img, .sg-hero > .sg-hero-visuel video {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%);
  }
  .sg-hero-grille { padding-top: 48px; padding-bottom: 72px; }
  .sg-hero { --h1: clamp(30px, 8.4vw, 38px); }
  .sg-hero h1 { font-stretch: 104%; }
  .sg-chapo { margin-top: 24px; font-size: 15.5px; }
  .sg-portes { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .sg-porte { padding: 20px; }
  .sg-hero .sg-preuve { margin-top: 26px; }
  .sg-sec-tete { margin-bottom: 40px; } /* sections : --esp-section vaut déjà 72 px ici (signal.css) */
  .sg-grands { grid-template-columns: 1fr; gap: 16px; }
  .sg-grands img { aspect-ratio: 16 / 9; }
  .sg-grands .corps { padding: 18px 20px 20px; }
  .sg-grands .n { font-size: 24px; }
  .sg-familles .p .a { display: block; margin-bottom: 4px; }
  .sg-rangee { margin-top: 16px; }
  .sg-rangee-piste { gap: 12px; }
  .sg-rangee-piste li { flex-basis: 44%; }
  .sg-rangee-piste .n { padding: 10px 12px 12px; font-size: 14px; }
  .sg-reseau-liens { flex-direction: column; align-items: flex-start; }
  .sg-reseau-court h2, .sg-reseau-court p, .sg-reseau-court .liens { grid-column: 1 / -1; }
  .sg-reseau-court .sg-preuves { grid-template-columns: 1fr; margin-top: 8px; }
  .sg-atouts li { padding: 20px 0; }
  .sg-atouts h3 { font-size: 19px; }
  /* La carte rétrécit avec l'écran : étiquettes agrandies pour rester lisibles (env. 11 px à l'affichage). */
  .sg-carte text, .sg-carte .pop-lbl { font-size: 14.5px; }
  .sg-atouts p { font-size: 15px; }
  .sg-avis-carte { width: 300px; padding: 20px; }
  .sg-avis-carte blockquote p { font-size: 14.5px; }
  .sg-fin { padding: 48px 0; }
  .sg-fin-btn { grid-template-columns: 1fr 18px; gap: 6px 14px; }
  .sg-fin-btn .mono { grid-row: 2; }
  .sg-fin-btn svg { grid-column: 2; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-fin-btn svg { animation: none; }
  .sg-avis-defile { -webkit-mask-image: none; mask-image: none; }
  .sg-avis-ligne { overflow-x: auto; scroll-snap-type: x mandatory; }
  .sg-avis-ligne .piste { animation: none !important; }
  .sg-avis-ligne .lot[aria-hidden] { display: none; }
  .sg-avis-carte { scroll-snap-align: start; }
  .sg-rangee-piste { scroll-behavior: auto; }
  .sg-carte .comete, .sg-carte .pouls { animation: none; opacity: 0; }
  .sg-leds { display: none; }
}