/* Page de statut status.helloserv.fr (chantier 1661) : charte de la vitrine (couleurs et polices de signal.css,
   cartes de la grille d'offres 2b : fond bg-2, filet intérieur, angles droits). Le rouge ne sert qu'à « en panne ».
   Une seule colonne étroite et centrée, sans historique des incidents (Mathis, 14/10 06:03). */
@font-face { font-family: 'Hubot Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(fonts/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(fonts/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(fonts/martian-mono-v2.woff2) format('woff2'); }
:root {
  --bg: #08080a; --bg-2: #0f0f13; --bg-3: #16161b;
  --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
  --ink: #f2f1f4; --ink-2: #b6b4be; --ink-3: #8c8a95;
  --rose-2: #f0485f; --btn: #e21239; --vert: #4cd387; --ambre: #e0a43a;
  --f-display: 'Hubot Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-text: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cadre { width: 100%; max-width: 720px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.n-ok { --c: var(--vert); } .n-perturbe { --c: var(--ambre); } .n-panne { --c: var(--rose-2); } .n-inconnu { --c: var(--ink-3); }

/* En-tête : logo, langue, retour au site */
.tete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.logo { display: block; color: var(--ink); }
.logo svg { display: block; width: 132px; height: auto; }
.logo .voyant { fill: var(--btn); }
.outils { display: flex; align-items: center; gap: 20px; font: 500 12px/1 var(--f-mono); }
.langues { display: flex; box-shadow: inset 0 0 0 1px var(--line-2); }
.langues a { padding: 8px 10px; color: var(--ink-3); text-decoration: none; }
.langues a[aria-current] { color: var(--ink); background: var(--bg-3); }
.retour { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; }
.retour .f { width: 10px; height: 10px; fill: currentColor; }
.langues a:hover, .retour:hover { color: var(--ink); }

main { flex: 1; display: grid; align-content: center; gap: 14px; padding-top: 40px; padding-bottom: 40px; } /* centré en hauteur entre en-tête et pied ; sans effet quand le contenu dépasse */
.carte { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }

/* Résumé : l'état global en une phrase */
.resume { padding: 34px 24px 30px; text-align: center; }
.sur { margin: 0 0 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.resume h1 { margin: 0; font: 720 clamp(24px, 3vw, 30px)/1.15 var(--f-display); font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.resume h1 .ico { display: inline-block; width: .86em; height: .86em; margin-right: .4em; vertical-align: -.1em; fill: var(--c); } /* dans le fil du texte : suit la 1re ligne quand le titre passe sur deux */
.verif { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); }
.direct { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); animation: pouls 2.4s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(76, 211, 135, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(76, 211, 135, 0); } }
.perime { margin: 16px 0 0; padding: 10px 12px; font-size: 13px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.perime[hidden] { display: none; }
.en-cours { display: grid; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.en-cours li { display: flex; align-items: baseline; gap: 10px; }
.en-cours i, .etat i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.en-cours i { transform: translateY(-1px); }

/* Blocs Infrastructure et Services, l'un sous l'autre : une ligne par groupe */
.blocs { display: grid; gap: 14px; }
.bloc { padding: 22px 24px 8px; }
.bloc h2 { margin: 0 0 8px; font: 720 17px/1.2 var(--f-display); font-stretch: 112%; }
.liste { margin: 0; padding: 0; list-style: none; }
.liste li { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 8px 0; border-top: 1px solid var(--line); }
.liste li:first-child { border-top: 0; }
.liste .p { width: 15px; height: 15px; fill: var(--ink-3); }
.nom { min-width: 0; color: var(--ink); }
.compte { margin-left: 10px; font: 500 11px/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
.etat { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.n-perturbe .etat, .n-panne .etat { color: var(--c); }

.pied { border-top: 1px solid var(--line); }
.pied .cadre { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding-top: 22px; padding-bottom: 28px; font: 500 11px/1.4 var(--f-mono); color: var(--ink-3); }
.pied p { margin: 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pied a { color: var(--ink-2); text-decoration: none; }
.pied a:hover { color: var(--ink); }

/* Mono comme la DA (signal.css .mono) : resserrée, chiffres de même largeur */
.outils, .sur, .verif, .compte, .pied .cadre { font-stretch: 87.5%; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  main { padding-top: 4px; }
  .resume { padding: 24px 16px 22px; }
  .bloc { padding: 18px 16px 6px; }
  .liste li { min-height: 46px; }
}
@media (max-width: 420px) {
  .tete .cadre { padding-top: 18px; padding-bottom: 18px; }
  .logo svg { width: 112px; }
  .outils { gap: 14px; }
  .langues a { padding: 7px 8px; }
  body { font-size: 14px; }
  .etat { font-size: 13px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .direct { animation: none; } }