/* HelloServ « Signal » (chantier 1311) : base, bande, en-tête, menus, pied.
   Sources : tmp/1311/css/*.css, assemblées dans assets/css/signal/signal.css.
   Polices v2 (chantier 1485) : Mona Sans sans les largeurs sous 100 %, Martian Mono sans les graisses sous 400 (aucune
   règle ne les demande) ; point par défaut des axes gardé, donc mêmes chasses et mêmes coupures de ligne. 225 → 188 Ko.
   Hubot Sans reste entière : son point par défaut est au coin bas des axes, toute réduction décale les chasses. */
@font-face { font-family: 'Hubot Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(/assets/fonts/signal/hubot-sans-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 100% 125%; font-display: swap; src: url(/assets/fonts/signal/mona-sans-v2.woff2) format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400 800; font-stretch: 75% 112.5%; font-display: swap; src: url(/assets/fonts/signal/martian-mono-v2.woff2) format('woff2'); }
:root {
  --bg: #08080a; --bg-2: #0f0f13; --bg-3: #16161b; --bg-4: #202027;
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13); --line-3: rgba(255, 255, 255, .26);
  --ink: #f2f1f4; --ink-2: #b6b4be; --ink-3: #8c8a95;
  /* Un seul rouge (#1740 A, 12/10 03:09) : l accent prend le rouge du bouton ; --rose-2 = même teinte éclaircie pour le petit texte sur fond sombre (5,5:1). */
  --rose: #e21239; --rose-2: #f0485f; --rose-voile: rgba(226, 18, 57, .08); --on-rose: #fff;
  /* Boutons pleins : texte blanc (Mathis, 08/10 23:13), fond un cran plus foncé que --rose pour tenir le contraste AA (4,8:1). */
  --btn: #e21239; --btn-survol: #c90f33; --on-btn: #fff;
  --discord: #5865f2; /* logo Discord dans les menus et le bloc contact (#1343, 08/10 23:44) */
  --vert: #4cd387; --ambre: #e0a43a; /* stock « sur commande » des dédiés */
  --bg-0: #0b0b0e; --noir: #000; /* fonds des animations, survol du bouton de fin */
  /* Repli (polices web bloquées, mode Isolement iOS : chantier 1334) : police système plutôt que Helvetica générique */
  --f-display: 'Hubot Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --max: 1320px; --pad: clamp(20px, 4vw, 60px); --gut: 24px;
  /* Titres h2 (n°1440, proposition R du 1436) : sections, colonnes étroites (FAQ), CTA final rose ; plafond --h2-max : n°1507, plus bas */
  --h2: min(clamp(28px, 2.7vw, 38px), var(--h2-max, 100vw)); --h2-etroit: min(clamp(24px, 2vw, 28px), var(--h2-max, 100vw)); --h2-fin: min(clamp(30px, 3.4vw, 48px), var(--h2-max, 100vw));
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* Échelle d'espacement vertical (n°1470), la même pour toutes les pages Signal : section = padding des sections,
     xl à s = entre deux blocs d'une section, du plus grand au plus petit ; bande = padding des bandes à fond.
     Sur téléphone, les minimums s'appliquent d'eux-mêmes (section 72, xl 56, l 48, m 40, s 24) ; tête de section : 40. */
  --esp-section: clamp(72px, 8vw, 120px); --esp-xl: clamp(56px, 6vw, 88px); --esp-l: clamp(48px, 5vw, 72px);
  --esp-m: clamp(40px, 4vw, 56px); --esp-s: clamp(24px, 3vw, 40px); --esp-bande: 56px;
  color-scheme: dark;
}
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--bg-4) var(--bg); scroll-padding-top: 84px; }
body.sg {
  margin: 0; position: relative; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--rose);
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg ::selection { background: var(--rose); color: var(--on-rose); }
:where(.sg) a { color: inherit; text-decoration: none; }
:where(.sg) img { display: block; max-width: 100%; height: auto; }
/* Remise à zéro sans poids (:where) : les marges posées par les composants passent devant. */
:where(.sg) :is(h1, h2, h3, p, figure, blockquote, ul, ol) { margin: 0; }
:where(.sg) :is(ul, ol) { padding: 0; list-style: none; }
:where(.sg) :is(h1, h2, h3) { font-weight: inherit; font-size: inherit; text-wrap: balance; }
.sg :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
:where(.sg) button { font: inherit; color: inherit; }
.sg main { display: block; position: relative; z-index: 1; }
.mono { font-family: var(--f-mono); font-stretch: 87.5%; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sg-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.sg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sg-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-saut { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--rose); color: var(--on-rose); padding: 10px 14px; font-weight: 600; }
.sg-saut:focus { top: 12px; }

/* Boutons et liens */
.sg-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--btn); color: var(--on-btn); font: 700 14px/1 var(--f-display); font-stretch: 112%; letter-spacing: .01em;
  white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.sg-btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.sg-btn:hover { background: var(--btn-survol); }
.sg-btn:hover svg { transform: translateX(3px); }
.sg-btn:active { transform: translateY(1px); }
.sg-btn.petit { height: 36px; padding: 0 14px; font-size: 13px; }
@media (pointer: coarse), (max-width: 720px) { .sg-btn.petit { height: 44px; } }
.sg-btn.fantome { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.sg-btn.fantome:hover { box-shadow: inset 0 0 0 1px var(--rose); color: var(--ink); }
.sg-btn.large { width: 100%; height: 52px; justify-content: space-between; font-size: 15px; }
.sg-lien {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font: 600 14px/1.3 var(--f-text);
  color: var(--ink); border-bottom: 1px solid var(--rose); transition: color .2s ease;
}
.sg-lien svg { width: 13px; height: 13px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-lien:hover svg { transform: translateX(3px); }
/* n°1469 : lien posé dans une phrase ([[clé|ancre]] des traductions), souligné comme les notes du tunnel IP (.sg-tip-notes). */
.sg-lien-txt { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }
.sg-lien-txt:hover { text-decoration-thickness: 2px; }
.sg-icone { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.sg-icone svg { width: 18px; height: 18px; }
.sg-icone:hover { color: var(--ink); }
/* Pictos Signal (n°1447) : sprite assets/img/signal/pictos.svg, sg_picto() en PHP. Trait = color, carré rouge = --sg-picto-accent. */
.sg-picto { flex: none; display: block; width: 24px; height: 24px; color: var(--ink-2); --sg-picto-accent: var(--rose); }
.etoiles { display: inline-flex; gap: 2px; color: var(--rose); }
.etoiles svg { width: 13px; height: 13px; }

/* Bande du haut : promo de bienvenue + relevés qui défilent */
.sg-bande { position: relative; z-index: 45; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; height: 36px; border-bottom: 1px solid var(--line); background: var(--bg); }
.sg-promo { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 var(--pad); font: 500 13px/1 var(--f-text); color: var(--ink); }
.sg-promo .court { display: none; }
.sg-code { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; cursor: pointer; background: var(--rose-voile); border: 1px dashed rgba(226, 18, 57, .55); color: var(--rose-2); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; transition: border-color .2s ease, background-color .2s ease; }
.sg-code svg { width: 12px; height: 12px; }
.sg-code:hover { border-style: solid; background: rgba(226, 18, 57, .14); }
.sg-code.copie { color: var(--vert); border-color: rgba(76, 211, 135, .55); background: rgba(76, 211, 135, .08); }
.sg-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Croix de fermeture : colonne de droite, la colonne vide de gauche garde la promo centrée */
.sg-bande::before { content: ''; }
.sg-bande[hidden] { display: none; }
.sg-bande-x { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; transition: color .2s ease; }
.sg-bande-x svg { width: 12px; height: 12px; }
.sg-bande-x:hover { color: var(--ink); }

@keyframes sg-defile { to { transform: translateX(-50%); } }
/* En-tête : logo, navigation à menus déroulants (jaquettes, gammes VPS), langue, actions */
.sg-tete { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.sg-tete-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.sg-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--f-display); font-stretch: 125%; letter-spacing: -.01em; color: var(--ink); }
/* Voyant : un clignement au chargement, puis fixe (#1424, 09/10 20:41) */
.sg-logo .voyant { fill: var(--btn); animation: sg-voyant .9s steps(1) .5s 1 both; }
.sg-logo-svg { display: block; height: 22px; width: auto; } /* chantier 1328 : logo F1 « Hi » */
.sg-logo-svg.entete { width: 140px; height: auto; } /* chantier 1569 : viewBox équilibré, le mot centré sur le menu */
@keyframes sg-voyant { 0%, 30% { opacity: 1; } 31%, 70% { opacity: .25; } 71%, 100% { opacity: 1; } }
.sg-nav { display: flex; align-items: stretch; align-self: stretch; margin-left: 18px; }
.sg-nav-item { display: flex; align-items: center; }
/* À propos, Contact : bouton texte et courte liste sous l'entrée */
.sg-nav-item.liste { position: relative; }
.sg-nav-ouvrir.sg-nav-texte { width: auto; height: auto; margin: 0; gap: 7px; display: inline-flex; padding: 8px 12px; font: 500 14px/1 var(--f-text); color: var(--ink-2); }
.sg-deroule.sg-dd-liste { right: auto; min-width: 230px; padding: 6px; border: 1px solid var(--line-2); }
/* Portée limitée au menu : la liste des machines des dédiés porte aussi .sg-dd-liste (audit n°1, bouton gris sur rouge) */
.sg-deroule.sg-dd-liste a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; color: var(--ink-2); }
.sg-deroule.sg-dd-liste a:hover { background: var(--bg-3); color: var(--ink); }
.sg-nav-lien { position: relative; display: inline-flex; align-items: center; padding: 8px 12px; font: 500 14px/1 var(--f-text); white-space: nowrap; color: var(--ink-2); transition: color .2s ease; }
.sg-nav > .sg-nav-lien { align-self: center; }
.sg-nav-lien:hover, .sg-nav-item:hover > .sg-nav-lien, .sg-nav-item.ouvert > .sg-nav-lien { color: var(--ink); }
.sg-nav-lien::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sg-nav-lien:hover::after, .sg-nav-item:hover > .sg-nav-lien::after, .sg-nav-item.ouvert > .sg-nav-lien::after { transform: scaleX(1); }
.sg-nav-ouvrir { display: grid; place-items: center; width: 22px; height: 28px; margin-left: -8px; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; }
.sg-nav-ouvrir svg { width: 11px; height: 11px; transition: transform .25s var(--ease); }
.sg-nav-item:hover .sg-nav-ouvrir svg, .ouvert > .sg-nav-ouvrir svg { transform: rotate(180deg); color: var(--ink); }
.sg-deroule {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 41; padding: 28px 0 22px;
  background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .3s;
}
.sg-nav-item:hover > .sg-deroule, .sg-nav-item.ouvert > .sg-deroule, .sg-langue.ouvert > .sg-deroule {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: .06s, .06s, 0s;
}
.sg-dd-jeux { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px 18px; }
.sg-dd-jeux a { display: grid; gap: 6px; }
.sg-dd-jeux img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid var(--line-2); outline-offset: -1px; transition: filter .25s ease; filter: saturate(.92); }
.sg-dd-jeux .n { font: 600 13px/1.2 var(--f-text); transition: color .2s ease; }
.sg-dd-jeux .p { font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sg-dd-jeux a:hover img { filter: saturate(1.15) brightness(1.08); }
.sg-dd-jeux a:hover .n { color: var(--rose-2); }
.sg-dd-pied { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.sg-dd-pied a + a { margin-left: 28px; }
.sg-dd-vps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.sg-dd-vps a { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; row-gap: 4px; padding: 16px; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s ease; }
.sg-dd-vps .tuile { grid-row: 1 / 4; display: grid; place-items: center; width: 76px; height: 76px; }
.sg-dd-vps .tuile img { width: 76px; height: 76px; object-fit: contain; }
/* Dédiés : carte longue sous les trois box */
.sg-dd-dedies { display: grid; grid-template-columns: 96px auto 1fr 18px; align-items: center; column-gap: 20px; margin-top: var(--gut); padding: 12px 20px 12px 16px; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s ease; }
.sg-dd-dedies img { width: 96px; height: 64px; object-fit: contain; }
.sg-dd-dedies .n { font: 700 16px/1.2 var(--f-display); font-stretch: 112%; }
.sg-dd-dedies .d { font-size: 13px; color: var(--ink-3); }
.sg-dd-dedies svg { width: 16px; height: 16px; color: var(--rose); transition: transform .25s var(--ease); }
.sg-dd-dedies:hover { border-color: var(--line-3); }
.sg-dd-dedies:hover svg { transform: translateX(3px); }
/* n°1517 : Univers Réseau, deux cartes à fond photo, mêmes classes que la modale Commander (1333) ; pied de Cloud sans Tunnel IP */
.sg-dd-reseau { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.sg-dd-reseau .sg-cmd-carte { min-height: 230px; }
.sg-cmd-carte .d { max-width: 46ch; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sg-res-tunnel .sg-cmd-fond img { object-position: 50% 64%; }
.sg-res-fivem .sg-cmd-fond img { object-position: 72% 36%; } /* façade du datacenter : enseigne et porte gardée (n°1537) */
.sg-dd-pied > a:only-child { margin-left: auto; }
/* Liens externes et Discord dans les listes du menu */
.sg-dd-liste a, .sg-mob-liens a { display: flex; align-items: center; gap: 10px; }
.sg-dd-liste .ext, .sg-mob-liens .ext { width: 11px; height: 11px; color: var(--ink-3); }
.sg-dd-liste .logo, .sg-mob-liens .logo { width: 18px; height: 18px; color: var(--discord); fill: currentColor; }
.sg-dd-vps .n { font: 700 16px/1.2 var(--f-display); font-stretch: 112%; }
.sg-dd-vps .d { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.sg-dd-vps .p { align-self: end; font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink-3); }
.sg-dd-vps .p b { color: var(--ink); font-weight: 600; }
.sg-dd-vps a:hover { border-color: var(--line-3); }
.sg-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.sg-lien-discret { font-size: 14px; color: var(--ink-2); transition: color .2s ease; }
.sg-lien-discret:hover { color: var(--ink); }
.sg-langue { position: relative; }
.sg-langue-btn { width: auto; height: 34px; margin: 0; padding: 0 10px; gap: 8px; display: inline-flex; border: 1px solid var(--line-2); font: 500 12px/1 var(--f-mono); color: var(--ink-2); }
.sg-langue-btn:hover { border-color: var(--line-3); color: var(--ink); }
.sg-dd-langue { left: auto; right: 0; top: calc(100% + 10px); min-width: 210px; padding: 6px; border: 1px solid var(--line-2); }
.sg-dd-langue a, .sg-mob-langues a { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; padding: 9px 10px; font-size: 14px; color: var(--ink-2); }
.sg-dd-langue a:hover { background: var(--bg-3); color: var(--ink); }
.sg-dd-langue img, .sg-mob-langues img, .sg-langue-btn img { width: 22px; height: 16px; object-fit: cover; outline: 1px solid var(--line-2); outline-offset: -1px; }
.sg-dd-langue [aria-current], .sg-mob-langues [aria-current] { color: var(--ink); box-shadow: inset 2px 0 0 var(--rose); }
.sg-burger { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; place-items: center; }
.sg-burger svg { width: 20px; height: 20px; }

/* Menu mobile */
.sg-mobile { position: fixed; left: 0; right: 0; bottom: 0; top: var(--sg-haut, 104px); z-index: 39; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 8px 0 40px; }
.sg-mobile[hidden] { display: none; }
.sg-mob-titre a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 12px; font: 700 20px/1 var(--f-display); font-stretch: 112%; }
.sg-mob-titre svg { width: 16px; height: 16px; color: var(--rose); }
.sg-mob-jeux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-mob-jeux a { display: grid; gap: 5px; }
.sg-mob-jeux img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sg-mob-jeux .n { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sg-mob-jeux .p, .sg-mob-vps .p { font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink-3); }
.sg-mob-vps a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sg-mob-vps .tuile { display: grid; place-items: center; width: 44px; height: 44px; }
.sg-mob-vps .tuile img { width: 44px; height: 44px; object-fit: contain; }
.sg-mob-dedies { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 14px; margin-top: 12px; padding: 10px 12px 10px 8px; border: 1px solid var(--line); }
.sg-mob-dedies img { grid-row: 1 / 3; width: 64px; height: 44px; object-fit: contain; }
.sg-mob-dedies .n { font-weight: 600; align-self: end; }
.sg-mob-dedies .d { font-size: 13px; color: var(--ink-3); align-self: start; }
.sg-mob-vps .n { font-weight: 600; }
/* n°1517 : Univers Réseau (pas de page d'univers : titre sans lien), cartes du déroulé en plus compact */
.sg-mob-titre > span { display: block; padding: 22px 0 12px; font: 700 20px/1 var(--f-display); font-stretch: 112%; }
.sg-mob-reseau { display: grid; gap: 10px; }
.sg-mob-reseau .sg-cmd-carte { min-height: 128px; }
.sg-mob-reseau .sg-cmd-in { gap: 6px; padding: 16px; }
.sg-mob-reseau .sg-cmd-carte .n { font-size: 20px; }
.sg-mob-reseau .sg-cmd-carte .fl { right: 16px; bottom: 19px; }
@media (min-width: 721px) { .sg-mob-reseau { grid-template-columns: 1fr 1fr; } } /* tablette : côte à côte, comme dans l'en-tête */
.sg-mob-liens { margin: 18px 0 24px; border-top: 1px solid var(--line); }
.sg-mob-liens a { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.sg-mob-langues { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 24px; }
.sg-mob-langues a { border: 1px solid var(--line); }
body.sg-menu-ouvert { overflow: hidden; }

/* Suggestion de langue */
.sg-suggestion { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(440px, calc(100% - 40px)); display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start; padding: 16px 16px 16px 18px; background: var(--bg-2); border: 1px solid var(--line-2); border-top: 2px solid var(--rose); }
.sg-suggestion .t { font-weight: 600; font-size: 15px; }
.sg-suggestion p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sg-suggestion .sg-btn { grid-column: 1; justify-self: start; margin-top: 6px; }
.sg-suggestion .sg-icone { grid-column: 2; grid-row: 1; margin: -6px -6px 0 0; }
/* Pied de page */
.sg-pied { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line-2); padding-top: 72px; }
.sg-pied-haut { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 40px; }
.sg-pied-marque { grid-column: 1 / 6; }
.sg-pied-marque p { margin: 18px 0 22px; max-width: 40ch; font-size: 14.5px; color: var(--ink-2); }
.sg-pied-tp { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); transition: color .2s ease; }
.sg-pied-tp .ext, .sg-preuve .ext { width: 11px; height: 11px; color: var(--ink-3); }
.sg-pied-tp:hover { color: var(--ink); }
/* n°1516 : logo et étoiles officiels de Trustpilot (assets/img/trustpilot, 512 × 96), pied et héros (note-tp.php) */
.sg-tp-etoiles { display: block; width: 106.67px; height: 20px; }
.sg-pied-marque .sg-tp-etoiles { margin-top: 12px; }
.sg-preuve.sg-tp { flex-wrap: wrap; gap: 10px 14px; }
.sg-tp-marque { display: flex; align-items: center; gap: 12px; }
.sg-tp-logo { display: block; width: 81.43px; height: 20px; }
.sg-tp-chiffres { font-size: 13px; }
.sg-tp-chiffres b { font-weight: 500; color: var(--ink); }
.sg-tp-chiffres span { margin: 0 2px; color: var(--line-3); }
@media (max-width: 520px) { .sg-tp-chiffres { flex-basis: 100%; } } /* note sous le logo : même coupure dans les 6 langues */
.sg-pied-col { grid-column: span 2; }
.sg-pied-col:nth-of-type(1) { grid-column: 7 / 9; }
.sg-pied-col:nth-of-type(3) { grid-column: 11 / 13; }
.sg-pied-col h2 { margin-bottom: 14px; font: 500 10.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sg-pied-col a { display: inline-block; padding: 4px 0; font-size: 14px; color: var(--ink-2); transition: color .2s ease; }
.sg-pied-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 4px; }
.sg-pied-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 32px; margin-top: 64px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.sg-pied-bas .mono { font-size: 12px; }
.sg-paiements { display: flex; align-items: center; gap: 12px; }
.sg-paiements svg { width: 26px; height: 20px; color: var(--ink-3); fill: currentColor; }
.sg-paiements img { width: 28px; height: 21px; filter: grayscale(1) brightness(.8); }
.sg-pied-bas::before { content: ''; position: absolute; left: var(--pad); top: -1px; width: 48px; height: 1px; background: var(--rose); }

/* Respect du mouvement réduit : rien ne défile, rien ne s'anime en boucle */
@media (prefers-reduced-motion: reduce) {
  .sg *, .sg *::before, .sg *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Tablette et mobile : burger, menu plein écran. n°1517 : cinq entrées depuis Univers Réseau, sur une ligne il leur faut
   1 130 px en français et 1 250 px en allemand ; en dessous de 1 260 px, burger plutôt que des libellés coupés en deux lignes
   (signal.js ferme le menu au-delà de la même largeur). */
@media (max-width: 1260px) {
  .sg-nav, .sg-actions .sg-lien-discret, .sg-actions .sg-langue { display: none; }
  .sg-burger { display: grid; }
  .sg-actions { gap: 10px; }
}
@media (max-width: 1100px) {
  /* n°1507 : pied sur tablette, la marque sur sa ligne puis trois colonnes de liens (en 2/12, « DIENSTLEISTUNGEN » était coupé) */
  .sg-pied-marque { grid-column: 1 / -1; }
  .sg-pied-col, .sg-pied-col:nth-of-type(1), .sg-pied-col:nth-of-type(3) { grid-column: span 4; }
}
@media (max-width: 720px) {
  .sg-bande { height: 40px; grid-template-columns: minmax(0, 1fr) 40px; }
  .sg-bande::before { display: none; }
  .sg-promo { flex: 1; justify-content: space-between; padding-right: 0; border-right: 0; }
  .sg-promo .long { display: none; }
  .sg-promo .court { display: inline; }
  .sg-tete-in { height: 60px; gap: 12px; }
  .sg-logo-svg { height: 20px; }
  .sg-logo-svg.entete { width: 118px; height: auto; }
  .sg-actions .sg-btn { height: 40px; padding: 0 14px; font-size: 13px; }
  .sg-actions .sg-btn svg { display: none; }
  .sg-pied { padding-top: 56px; }
  .sg-pied-marque { grid-column: 1 / -1; }
  .sg-pied-col, .sg-pied-col:nth-of-type(1), .sg-pied-col:nth-of-type(3) { grid-column: span 6; }
  .sg-pied-col:nth-of-type(3) { grid-column: 1 / -1; }
  .sg-pied-bas { flex-direction: column; margin-top: 48px; }
}

/* Chantier 1333 : modale « Commander » (en-tête, menu mobile) : deux choix, jeux ou cloud. */
dialog.sg-cmd {
  display: none; position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--ink);
}
dialog.sg-cmd[open] { display: flex; align-items: center; justify-content: center; }
dialog.sg-cmd::backdrop { background: rgba(0, 0, 0, .7); transition: background-color .2s var(--ease); }
.sg-cmd-panneau {
  position: relative; width: 100%; max-width: 880px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line-2); padding: clamp(28px, 4vw, 48px);
  opacity: 1; transform: translateY(0); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.sg-cmd-fermer { position: absolute; top: 14px; right: 14px; }
.sg-cmd-titre { margin: 0 44px 24px 0; font: 760 clamp(22px, 3vw, 28px)/1.2 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
.sg-cmd-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.sg-cmd-carte { position: relative; display: block; min-height: 220px; border: 1px solid var(--line-2); overflow: hidden; transition: border-color .2s ease; }
.sg-cmd-carte:hover { border-color: var(--line-3); }
.sg-cmd-fond { position: absolute; inset: 0; display: flex; }
.sg-cmd-fond img { flex: 1; width: 100%; height: 100%; object-fit: cover; }
.sg-cmd-carte.cloud .sg-cmd-fond img { object-position: 78% 50%; } /* baie Dell des pages dédiés (chantier 1334), sujet dans la moitié droite */
.sg-cmd-masque { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 10, .3) 0%, rgba(8, 8, 10, .52) 45%, rgba(8, 8, 10, .92) 100%); }
.sg-cmd-in { position: absolute; left: 0; right: 56px; bottom: 0; display: grid; gap: 8px; padding: 20px; }
.sg-cmd-carte .n { font: 760 28px/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; color: var(--ink); }
.sg-cmd-carte .p { font-size: 13px; color: var(--ink-2); }
.sg-cmd-carte .fl { position: absolute; right: 20px; bottom: 24px; width: 16px; height: 16px; color: var(--ink); transition: transform .25s var(--ease); }
.sg-cmd-carte:hover .fl { transform: translateX(4px); }
.sg-mob-commander { margin-bottom: 20px; }

/* Entrée de la modale : fondu + léger glissement, natif (@starting-style), rien à faire au JS */
@starting-style {
  .sg-cmd-panneau { opacity: 0; transform: translateY(8px); }
  dialog.sg-cmd::backdrop { background-color: rgba(0, 0, 0, 0); }
}

@media (max-width: 720px) {
  .sg-cmd-cartes { grid-template-columns: 1fr; gap: 14px; }
  .sg-cmd-panneau { padding: 24px 20px; }
  .sg-cmd-carte { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-cmd-panneau { transition: none; }
  dialog.sg-cmd::backdrop { transition: none; }
  .sg-logo .voyant { animation: none; }
}

/* n°1507 (Mathis, 11/10) : un titre ne se coupe plus au milieu d'un mot. Sa taille est plafonnée à la largeur de sa colonne
   divisée par --mot-h1 ou --mot-h2 : le plus long mot relevé sur toute la beta le 11/10, en em, marge de 5 % comprise
   (« communautaire » 8,7 em en H1, « dimensionamiento » 10 em en H2 ; en allemand « Gemeinschaftskasse » 11,6 em et
   « Erkennungsalgorithmus » 13 em). H1 du héros : accueil.css ; h2 de section : --h2-max, pleine largeur sur téléphone.
   La coupure de l'audit n°4 et la césure allemande du n°1389 ne restent qu'en dernier recours, sous 360 px. */
:root { --mot-h1: 9.2; --mot-h2: 10.6; }
:root:lang(de) { --mot-h1: 12.2; --mot-h2: 13.6; }
@media (max-width: 720px) { :root { --h2-max: calc((100vw - 2 * var(--pad)) / var(--mot-h2)); } }
@media (max-width: 359.98px) { .sg :is(h1, h2, h3) { overflow-wrap: break-word; } .sg :is(h1, h2, h3):lang(de) { hyphens: auto; } }
/* Audit n°32 : menu mobile ouvert, un seul « Commander » à l'écran (celui du menu). */
.sg-tete:has(.sg-burger[aria-expanded="true"]) .sg-actions > .sg-btn { visibility: hidden; }
/* Audit n°5 : cibles de 44 px au doigt. Les liens texte gardent leur dessin, la zone de toucher déborde (::after). */
@media (pointer: coarse), (max-width: 720px) {
  .sg-bande { height: 44px; grid-template-columns: minmax(0, 1fr) 44px; }
  .sg-code { position: relative; }
  .sg-code::after { content: ''; position: absolute; inset: -10px -4px; }
  .sg-burger, .sg-icone { width: 44px; height: 44px; }
  .sg-actions .sg-btn { height: 44px; }
  :is(.sg-lien, .sg-preuve, .sg-pied-tp) { position: relative; }
  :is(.sg-lien, .sg-preuve, .sg-pied-tp)::after { content: ''; position: absolute; inset: -12px -4px; }
  .sg-pied-col a { padding: 11px 0; }
  .sg-pied-bas a { display: inline-block; padding: 12px 0; }
  .sg .sg-jp-onglets button { padding-top: 10px; } /* onglets des faux écrans : 34 → 44 px */
}

/* n°1521 (Mathis, 11/10 09:13) : carte Tunnel IP de l'Univers Réseau, boucle du flux de /tunnel-ip par-dessus l'image fixe
   (composée sur la même image, donc même cadrage), fondu à la première image jouée comme dans le héros (tunnel.css). */
.sg-cmd-fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.sg-cmd-fond.joue video { opacity: 1; }
.sg-res-tunnel .sg-cmd-fond :is(img, video) { object-position: 50% 30%; } /* faisceau gardé sur les cartes très larges (721 à 1259 px) */

/* n°1521 (Mathis, 11/10 09:14 et 09:15) : sans police web (mode Isolement d'iOS, police bloquée, chargement lent), une pile
   propre par système : Apple, Windows, Android, Linux, puis Arial. Les titres demandent 720 à 780 : sans les faces
   « Signal Repli », Windows et Android prendraient la graisse Black (900) de Segoe UI ou de Roboto ; 600 à 900 → gras. */
@font-face { font-family: 'Signal Repli'; font-weight: 100 599; src: local('Segoe UI'), local('SegoeUI'), local('Roboto'), local('Roboto-Regular'), local('Ubuntu'), local('Ubuntu-Regular'), local('Cantarell'), local('Cantarell-Regular'), local('Noto Sans'), local('NotoSans-Regular'), local('DejaVu Sans'), local('DejaVuSans'), local('Liberation Sans'), local('LiberationSans'), local('Arial'), local('ArialMT'); }
@font-face { font-family: 'Signal Repli'; font-weight: 600 900; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Ubuntu Bold'), local('Ubuntu-Bold'), local('Cantarell Bold'), local('Cantarell-Bold'), local('Noto Sans Bold'), local('NotoSans-Bold'), local('DejaVu Sans Bold'), local('DejaVuSans-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arial Bold'), local('Arial-BoldMT'); }
:root {
  --f-display: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Signal Repli', 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', 'DejaVu Sans', 'Liberation Sans', Arial, sans-serif;
  --f-text: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Signal Repli', 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', 'DejaVu Sans', 'Liberation Sans', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
/* Police du système (html.sg-repli, posé par signal.js) : les largeurs 87,5 à 112 % sont réglées pour Hubot et Martian ;
   Safari peut les appliquer à San Francisco (titres élargis) : on lui garde sa largeur normale. */
.sg-repli * { font-stretch: 100% !important; }
/* n°1531 : switch Mensuel / Annuel au-dessus des grilles d'offres (includes/signal/duree.php) */
.sg-duree { display: flex; gap: 2px; width: max-content; margin: 0 0 16px auto; padding: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-duree button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font: 600 14px/1.2 var(--f-text); color: var(--ink-3); background: none; border: 0; cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.sg-duree button:hover { color: var(--ink-2); }
.sg-duree button[aria-pressed="true"] { color: var(--ink); background: var(--bg-4); }
.sg-duree button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.sg-duree .r { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--rose-2); }
.sg-duree-zone .da, .sg-duree-zone[data-sg-duree="12"] .dm { display: none; }
.sg-duree-zone[data-sg-duree="12"] .da { display: block; }
.sg-duree-zone .v s { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ink-3); } /* annuel : mensuel normal barré à côté du mensuel remisé */
.sg-duree-zone .f { font: 400 12px/1.45 var(--f-text); color: var(--ink-3); } /* « facturé X € TTC par an » */
.sg-duree-zone s { color: var(--ink-3); text-decoration-thickness: 1px; }
.sg-txt-a, [data-sg-duree-sec="12"] .sg-txt-m { display: none; }
[data-sg-duree-sec="12"] .sg-txt-a { display: inline; }
@media (max-width: 720px) {
  .sg-duree { margin-left: 0; }
  .sg-duree button { padding: 11px 16px; }
}
/* Mathis 12/10 00:55 (A) : dans l'en-tête des carrousels d'avis, le badge Trustpilot en plus grand que dans les héros. */
.sg-sec-tete .sg-tp .sg-tp-logo { width: 101.8px; height: 25px; }
.sg-sec-tete .sg-tp .sg-tp-etoiles { width: 133.3px; height: 25px; }
.sg-sec-tete .sg-tp .sg-tp-chiffres { font-size: 15px; }