/* Option Anti-DDoS Plus en « Signal » (chantier 1328) : aperçu du DM Discord et du journal du panel,
   comparatif inclus / option. Chargée après landing.css et dedies.css (.sg-dd-vs). */

.sg-adp-hero .sg-hero-grille { display: block; }
.sg-adp-hero .sg-hero-grille > * { max-width: 880px; }
.sg-adp-pour { margin-bottom: 22px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-2); }
.sg-adp-hero h1 { max-width: 14ch; }
.sg-adp-hero .sg-chapo { max-width: 62ch; }

.sg-adp-fens { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sg-adp-fen { min-width: 0; padding: 0 0 20px; background: var(--bg-2); border: 1px solid var(--line-2); }
.sg-adp-fen figcaption { padding: 12px 20px; margin-bottom: 18px; font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }

.sg-adp-msg { padding: 0 20px; }
.sg-adp-msg + .sg-adp-msg { margin-top: 22px; }
.sg-adp-msg .tete { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink); }
.sg-adp-msg .bot { padding: 1px 5px; font-size: 9px; color: var(--on-btn); background: var(--btn); }
.sg-adp-msg .h { font-size: 12px; color: var(--ink-3); }
.sg-adp-msg .embed { margin-top: 8px; padding: 12px 14px; background: var(--bg-3); border-left: 3px solid var(--rose); }
.sg-adp-msg.fin .embed { border-left-color: var(--vert); }
.sg-adp-msg .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.sg-adp-msg .d { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }

.sg-adp-etat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 20px; font-size: 14px; color: var(--ink); }
.sg-adp-etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.sg-adp-etat span { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.sg-adp-lbl { margin: 20px 20px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sg-adp-jr li { display: grid; grid-template-columns: 1.3fr .9fr 1.5fr; gap: 10px; padding: 10px 20px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); }
.sg-adp-jr li:first-child span { color: var(--ink); }
.sg-adp-jr dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 6px; background: var(--line); }
.sg-adp-jr dl div { padding: 8px 10px; background: var(--bg-3); }
.sg-adp-jr dt { font-size: 10px; color: var(--ink-3); }
.sg-adp-jr dd { margin: 3px 0 0; text-align: left; color: var(--ink); overflow-wrap: anywhere; }

.sg .sg-adp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-adp-vs { margin-top: var(--esp-l); }
.sg-adp-vs ul { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-2); }
.sg-adp-vs li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 12px; background: var(--line-3); vertical-align: 2px; }
.sg-adp-vs .ici li::before { background: var(--rose); }
.sg-adp-prix { margin-top: 14px; font-size: 18px; color: var(--ink); }
/* n°1482 : sous le comparatif, la phrase FiveM et son lien vers le relais (remplace la carte FiveM) */
.sg-adp-fivem { margin-top: var(--esp-m); font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Page /anti-ddos (protection incluse et réseau). */
.sg-ad-chiffres { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 4px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.sg-ad-chiffres li { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sg-ad-chiffres strong { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sg-ad-netrix { margin-top: var(--esp-m); }
.sg-ad-note { margin-top: 18px; max-width: 90ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.sg-ad-urgence { margin-top: 32px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .sg-adp-fens, .sg .sg-adp-3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sg-adp-jr li { grid-template-columns: 1fr 1fr; }
  .sg-adp-jr li span:last-child { grid-column: 1 / -1; }
  .sg-adp-jr dl { grid-template-columns: 1fr 1fr; }
  .sg-ad-chiffres { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
}

/* n°1389 : la baie derrière son filtre, à droite du hero (app/includes/signal/ddos-anim.php), dans le cadre du serveur de
   l'accueil (.sg-hero-visuel, accueil.css). La boucle vidéo se pose sur l'image fixe et n'apparaît qu'une fois lancée. */
.sg-ad-visuel { width: 58%; }
/* n°1394 : fondu de gauche plus long que celui de l'accueil, les traînées rouges s'éteignent avant la colonne de texte */
.sg-ad-visuel img, .sg-ad-visuel video {
  object-position: 100% 15%; /* n°1428 : le haut de la baie reste entier (cadrage validé, n°1445) */
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 50%), linear-gradient(180deg, #000 60%, transparent 98%);
          mask-image: linear-gradient(90deg, transparent 10%, #000 50%), linear-gradient(180deg, #000 60%, transparent 98%);
}
.sg-ad-visuel video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.sg-ad-visuel.joue video { opacity: 1; }
.sg-ad-visuel picture { display: contents; } /* n°1449 : l'image garde la taille du figure malgré le <picture> */
/* n°1445 : landing.css (.sg-lp-hero) recentrait l'image fixe, la boucle apparaissait décalée de ~80 px au fondu */
.sg-lp-hero .sg-ad-visuel img { object-position: 100% 15%; }
@media (min-width: 1101px) { .sg-ad-hero .sg-hero-grille > * { max-width: min(880px, 48%); } }
/* n°1544 (#1684) : le couloir va du plafond aux serveurs du bas. En cover dans un cadre bien plus large que haut (835 x 605 à
   1440, 1485 x 669 à 2560), le bas de la baie tombait hors cadre. Sur ordinateur, l'image ne dépasse pas 1,25 fois la hauteur du
   cadre et reste calée à droite : on voit d'où arrivent les fibres et les serveurs où elles repartent. Fondus recalés sur cette
   largeur (haut rogné : fondu en haut aussi) ; tablette et téléphone gardent les règles communes. */
@media (min-width: 1101px) {
  .sg-ad-visuel.sg-ad-plein { container-type: size; }
  .sg-ad-visuel.sg-ad-plein img, .sg-ad-visuel.sg-ad-plein video {
    display: block; width: min(100%, 125cqh); margin-left: auto; object-position: 100% 70%;
    -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 35%), linear-gradient(180deg, transparent 0, #000 8%, #000 85%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 8%, #000 35%), linear-gradient(180deg, transparent 0, #000 8%, #000 85%, transparent 100%);
  }
  .sg-ad-visuel.sg-ad-plein video { left: auto; right: 0; }
}
/* n°1389 : visuel à côté du texte Netrix (section « Comment fonctionne notre mitigation ? »), bords fondus ;
   n°1428 : la boucle « fibre » devient une image fixe, ports SFP d'un switch (switch-sfp.webp). */
.sg-ad-netrix-grille { display: grid; grid-template-columns: 5fr 7fr; gap: calc(var(--gut) * 2); align-items: center; margin-top: var(--esp-m); }
.sg-ad-netrix-grille .sg-ad-netrix { display: block; margin-top: 0; }
.sg-ad-netrix-grille .sg-ad-netrix p + p { margin-top: 20px; }
.sg-ad-fibre { margin: 0; aspect-ratio: 960 / 542; }
.sg-ad-fibre img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 900px) { .sg-ad-netrix-grille { grid-template-columns: 1fr; } }
/* n°1389 : en portugais le bouton d'urgence dépassait de l'écran (421 px pour 390) : retour à la ligne permis sur téléphone. */
@media (max-width: 560px) { .sg-ad-urgence .sg-btn { white-space: normal; text-align: left; } }
/* n°1389 : /anti-ddos-plus garde le H1 complet de la prod (environ 80 caractères) : corps réduit, trois lignes au plus. */
.sg-adp-plus h1 { --h1: clamp(30px, 3.5vw, 52px); max-width: 21ch; }
.sg-adp-plus .sg-adp-visuel img { object-position: 85% 50%; }
@media (min-width: 1101px) { .sg-adp-plus .sg-hero-grille > * { max-width: min(880px, 52%); } }
/* n°1469 : les pages de la famille au-dessus du double algorithme. Titre à gauche comme les « Pour aller plus loin »
   (landing.css), quatre lignes à filets sur deux colonnes ; le lien étiré rend toute la ligne cliquable. */
.sg-ad-pages .sg-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: start; }
.sg-ad-pages h2 { grid-column: 1 / 5; padding-top: 18px; font: 760 var(--h2-etroit)/1.1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
.sg-ad-pages ul { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gut) * 2); }
.sg-ad-pages li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-content: start; padding: 18px 0 22px; border-top: 1px solid var(--line-2); }
.sg-ad-pages li img { grid-row: 1 / 3; width: 40px; height: 40px; } /* icônes générées n°1469 (data/visuels-anim/antiddos-1469) */
.sg-ad-pages li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-2); }
.sg-ad-pages h3 { font: 720 19px/1.25 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; }
.sg-ad-pages h3 a { display: inline-flex; align-items: center; gap: 10px; }
.sg-ad-pages h3 a::after { content: ''; position: absolute; inset: 0; }
.sg-ad-pages h3 svg { flex: none; width: 13px; height: 13px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-ad-pages p { margin-top: 8px; max-width: 58ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); transition: color .2s ease; }
.sg-ad-pages li:hover p { color: var(--ink); }
.sg-ad-pages li:hover svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .sg-ad-pages h2, .sg-ad-pages ul { grid-column: 1 / -1; }
  .sg-ad-pages h2 { padding-top: 0; margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .sg-ad-pages ul { grid-template-columns: 1fr; }
  .sg-ad-pages li:nth-last-child(2) { border-bottom: 0; }
}