/* n°1378 : tunnel IP en « Signal » (faits du héros, étapes, configurateur, offres BGP, cas d'usage).
   Filets fins, rouge en petit accent (numéros, coches, choix sélectionné), couleurs en variables de signal.css. */
.sg-tip-faits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 44px; }
.sg-tip-faits li { display: flex; flex-direction: column; gap: 4px; }
.sg-tip-faits strong { font-size: 18px; font-weight: 600; color: var(--ink); }
.sg-tip-faits span { font-size: 13px; color: var(--ink-3); }

.sg-tip-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); border-top: 1px solid var(--line-2); }
.sg-tip-etapes li { padding-top: 24px; }
.sg-tip-etapes .n, .sg-tip-bloc h3 .n { font-size: 13px; color: var(--rose-2); }
.sg-tip-etapes h3 { margin-top: 12px; font: 720 20px/1.25 var(--f-display); font-stretch: 112%; }
.sg-tip-etapes p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Configurateur : trois étapes à gauche, récapitulatif collant à droite */
.sg-tip-cfg { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 24px; align-items: start; }
.sg-tip-cfg .etapes { grid-column: 1 / 9; display: grid; gap: 24px; }
.sg-tip-bloc { min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--line-2); background: var(--bg-2); }
.sg-tip-bloc h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 18px/1.3 var(--f-display); font-stretch: 108%; }
.sg-tip-bloc .note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.sg-tip-bloc .note.alerte { color: var(--ambre); }
.sg-tip-cfg .hidden { display: none; }
.sg-tip-paliers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-tip-bgpopt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sg-tip-choix { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: border-color .2s ease; }
.sg-tip-choix:hover { border-color: var(--line-3); }
.sg-tip-choix.on, .sg-tip-choix:has(input:checked) { border-color: var(--ink-3); box-shadow: inset 0 -2px 0 var(--rose); }
.sg-tip-choix:has(input:focus-visible) { outline: 2px solid var(--rose); outline-offset: 2px; }
.sg-tip-choix.desactive { opacity: .55; cursor: not-allowed; }
.sg-tip-choix .c { padding-right: 20px; font: 700 18px/1.2 var(--f-display); font-stretch: 108%; color: var(--ink); }
.sg-tip-choix .s { font-size: 12px; color: var(--ink-3); }
.sg-tip-choix .port { align-self: flex-start; margin: 6px 0; padding: 2px 6px; font-size: 12px; color: var(--vert); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-tip-choix .p { font-size: 17px; font-weight: 600; color: var(--ink); }
.sg-tip-choix .d { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sg-tip-choix svg { position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; color: var(--rose); }
.sg-tip-case { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; }
.sg-tip-case input { margin-top: 3px; accent-color: var(--rose); }
.sg-tip-case b { display: block; font-size: 14px; color: var(--ink); }
.sg-tip-case span span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.sg-tip-ip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-tip-ip > div { padding: 16px; border: 1px solid var(--line-2); background: var(--bg); }
.sg-tip-ip b, .sg-tip-ip label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.sg-tip-ip .d { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.sg-tip-compteur { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sg-tip-compteur button { width: 44px; height: 44px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font-size: 18px; cursor: pointer; }
.sg-tip-compteur button:hover { border-color: var(--line-3); }
.sg-tip-compteur input { width: 64px; height: 44px; text-align: center; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 600 16px var(--f-mono); }
.sg-tip-ip select { width: 100%; height: 44px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 14px var(--f-text); }
.sg-tip-recap { grid-column: 9 / 13; position: sticky; top: 100px; padding: 24px; border: 1px solid var(--line-3); background: var(--bg-2); }
.sg-tip-recap .tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.sg-tip-recap h3 { font: 700 18px/1.3 var(--f-display); font-stretch: 108%; }
#tip-sum-lines { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
#tip-sum-lines li { display: flex; justify-content: space-between; gap: 12px; }
#tip-sum-lines .v { flex: none; color: var(--ink); }
#tip-sum-lines .v.inclus { color: var(--vert); }
.sg-tip-recap .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
#tip-total-ht { font-size: 26px; font-weight: 600; color: var(--ink); }
.sg-tip-recap .ttc { margin-top: 4px; text-align: right; font-size: 12px; color: var(--ink-3); }
.sg-tip-ddos { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sg-tip-ddos svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: currentColor; }
.sg-tip-ddos.ok { color: var(--vert); }
.sg-tip-ddos.bh { color: var(--ambre); }
.sg-tip-recap .note { margin-top: 12px; font-size: 12px; text-align: center; color: var(--ink-3); }
.sg-tip-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--gut); margin-top: 40px; }
.sg-tip-points li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sg-tip-points svg, .sg-tip-bgp li svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--rose); }
.sg-tip-notes { display: grid; gap: 8px; margin-top: 24px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.sg-tip-notes a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }

/* Offres BGP : deux colonnes à filet fin */
.sg-tip-bgp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.sg-tip-bgp article { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line-2); background: var(--bg-2); }
.sg-tip-bgp .badge { align-self: flex-start; padding: 3px 8px; font-size: 12px; color: var(--rose-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-tip-bgp h3 { font: 720 22px/1.2 var(--f-display); font-stretch: 112%; }
.sg-tip-bgp .prix { font-size: 14px; color: var(--ink-3); }
.sg-tip-bgp .prix .mono { font-size: 24px; font-weight: 600; color: var(--ink); }
.sg-tip-bgp ul { display: grid; gap: 10px; flex: 1; }
.sg-tip-bgp li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sg-tip-bgp .sg-btn { align-self: flex-start; }

/* Cas d'usage : lignes à filet fin, deux colonnes */
.sg-tip-uc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); margin: 0; border-top: 1px solid var(--line-2); }
.sg-tip-uc div { padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.sg-tip-uc dt { font: 700 18px/1.3 var(--f-display); font-stretch: 108%; color: var(--ink); }
.sg-tip-uc dd { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Pages anti-DDoS Layer 7 et Pro (app/includes/signal/ddos-page.php) : schéma, 4 étapes. n°1561 : les étiquettes d'attaques
   sont devenues des cartes (challenge.css). */
.sg-dp-mention { grid-column: 1 / -1; margin-top: 28px; font-size: 12px; color: var(--ink-3); }
.sg-dp-fig { margin: 0; }
.sg-dp-fig img { width: 100%; height: auto; border: 1px solid var(--line); }
.sg-dp-fig figcaption { margin-top: 14px; max-width: 70ch; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.sg-tip-etapes.sg-dp-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .sg-tip-etapes.sg-dp-4 { grid-template-columns: 1fr 1fr; }
  .sg-tip-cfg .etapes, .sg-tip-recap { grid-column: 1 / -1; }
  .sg-tip-recap { position: static; }
  .sg-tip-paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sg-tip-etapes, .sg-tip-etapes.sg-dp-4, .sg-tip-bgpopt, .sg-tip-ip, .sg-tip-points, .sg-tip-bgp, .sg-tip-uc { grid-template-columns: 1fr; } /* .sg-dp-4 : n°1510, restait sur 2 colonnes (débordement de 56 px en allemand) */
  .sg-tip-bloc { padding: 18px; }
}
/* n°1389 : visuel du hero (serveur hébergé ailleurs relié à notre baie par le tunnel), texte sur la moitié gauche. */
.sg-tip-visuel { top: 50%; width: 60%; height: auto; aspect-ratio: 2200 / 1228; translate: 0 -44%; }
.sg-tip-visuel img { object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); }
/* n°1443, n°1452 (#1523 B) : boucle du flux entre la baie et le serveur distant (app/includes/signal/tunnel-anim.php),
   recadrée en 16:9 dans la source (32 px retirés à gauche, 3 en haut et en bas). Le calque couvre l'image (même rapport,
   même masque) ; la vidéo se pose sur sa zone et n'apparaît qu'une fois lancée. */
.sg-tip-video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.sg-tip-visuel.joue .sg-tip-video { opacity: 1; }
.sg-tip-video video { position: absolute; left: 1.163%; top: .195%; width: 98.837%; height: 99.609%; object-fit: fill; }
.sg-tip-hero h1 { --h1: clamp(32px, 3.9vw, 58px); }
.sg-tip-hero .sg-nw { white-space: nowrap; }
@media (min-width: 1101px) { .sg-tip-hero .sg-hero-grille { display: block; } .sg-tip-hero .sg-hero-grille > * { max-width: min(700px, 50%); } .sg-tip-hero .sg-hero-grille > .sg-tip-faits { max-width: min(800px, 62%); } }
/* n°1570 : lien « Discuter avec un expert » sous les offres BGP */
.sg-tip-expert { margin-top: 20px; }