/* ══════════════════════════════════════════════════════════════════════════
   ÉTAT DE L'INFRASTRUCTURE — feuille de la page « /status »

   LA PAGE PARLE DÉSORMAIS LA LANGUE DE L'ACCUEIL. Elle servait jusqu'ici la
   maquette « État des serveurs CBR-Cloud » : Montserrat, JetBrains Mono, fond
   #eceff1, accent cyan #06b6d4, et un balisage entièrement en style EN LIGNE
   peint côté navigateur par support.js. Rien de tout cela n'appartenait au
   reste du site — un visiteur passait de l'accueil à l'état des serveurs et
   changeait de marque au passage.

   Cette feuille reprend donc, valeur pour valeur, le nuancier et la trame de
   public/accueil-style.css :

       polices      Poppins (titres) · DM Sans (corps)
       encres       #0B1F44 titres · #5C6E8A texte · #7E90A8 notes
       bleu         #1257F0 · #0B63F6 · #5B9BFF sur fond sombre
       fonds        #fff · #F7FAFD · #F7FAFF · #F0F5FC · #EAF1FE
       filets       #E8EEF6 · #DCE6F2 · #EDF2F8
       sombre       dégradé 155° #0A1B3D → #071227 → #050E1E (héros)
       trame        conteneur 1240 px, gouttière 32 px, sections 88/72 px

   ── CE QUE L'ACCUEIL N'AVAIT PAS, ET QU'IL A FALLU AJOUTER ────────────────

   UN NUANCIER D'ÉTAT. L'accueil ne dit jamais « en panne » : il n'a ni vert, ni
   ambre, ni rouge. Une page d'état ne peut pas s'en passer, et repeindre les
   pastilles en bleu de marque reviendrait à ne plus distinguer « ça marche »
   de « je n'ai pas regardé ». Quatre teintes ont donc été ajoutées, choisies
   pour tenir à côté du bleu #1257F0 et mesurées sur fond blanc :

       ok            texte #067647 (5,61:1)   pastille #12B76A
       dégradé       texte #B54708 (5,43:1)   pastille #F79009
       hors ligne    texte #B42318 (6,62:1)   pastille #F04438
       inconnu       texte #69778F (4,53:1)   pastille #98A6BC

   #69778F n'est pas neuf : c'est le gris que l'accueil emploie déjà pour les
   mentions de son pied de page, retenu là-bas pour ces mêmes 4,53:1.

   LES BARRES QUOTIDIENNES, elles, restent BLEUES et non vertes : la pastille
   dit l'état, la barre dit la quantité. C'est la transposition directe du
   cyan translucide de la maquette — `rgba(18,87,240,.55)` au lieu de
   `rgba(6,182,212,.55)` — et quatre-vingt-dix barres vertes en file feraient
   un tapis qui avale le bleu de la marque.

   ── LE PRÉFIXE ────────────────────────────────────────────────────────────

   Tout est préfixé `st-` et vit sous `.st`. La page est servie dans le gabarit
   public, à côté de Bootstrap 3, z-style.css, elements.css, fp-universal.css et
   fp-responsive.css : rien ici ne doit fuir vers le reste du site, et rien du
   reste du site ne doit entrer sans qu'on l'ait voulu. Les gardes qui suivent
   (police, interligne, marges de paragraphe, couleur des liens) sont celles de
   l'accueil, pour les mêmes raisons — elles y sont documentées en détail.
   ══════════════════════════════════════════════════════════════════════════ */

/* LE FOND DU SITE EST SOMBRE — z-style.css pose `body { background: #181a1b }`
   et trois dégradés radiaux par-dessus. Cette page est CLAIRE de la première
   section au pied. Le fond est donc neutralisé ici, comme le font l'accueil,
   /service/domaines et /service/web. Règle globale et non préfixée : elle vise
   `body`, qui n'est pas sous `.st` — et cette feuille n'est chargée que par
   cette page. */
body {
    background-color: #fff !important;
    background-image: none !important;
}

.st {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #4C5F7D;
    background: #fff;
    letter-spacing: normal;

    /* assets/css/fp-universal.css pose `body { font-size: 14px !important }`.
       Le `!important` d'en face vise `body` et ne peut rien contre une valeur
       posée ici, sur un autre élément. 16 px est la base de l'accueil. */
    font-size: 16px;

    /* `normal`, et pas une valeur : c'est ce que l'accueil emploie partout où
       la maquette ne dit rien. Le site, lui, pose `line-height: 1.6 !important`
       (fp-universal.css) et `1.5` (z-style.css) — les deux visent `body`, donc
       ils ne touchent pas `.st`, qui reprend la main pour toute sa descendance. */
    line-height: normal;
}

.st *,
.st *::before,
.st *::after { box-sizing: border-box; }

/* LA POLICE SE REDIT, PARCE QU'ELLE NE SE TRANSMET QUE PAR HÉRITAGE — et
   l'héritage perd contre n'importe quelle règle qui vise l'élément. z-style.css
   pose `body, h1..h6, a, p { font-family: 'Montserrat' }`, cinq sélecteurs de
   TYPE. Sans la garde ci-dessous, ils reprennent la main sur le titre, tous les
   intertitres, tous les liens et tous les paragraphes.

   `:where()` ramène la règle à la spécificité de `.st` seul, soit (0,1,0) :
   assez pour battre un sélecteur de type, trop peu pour gêner une classe. */
.st :where(a, p, b, strong, em, li, label, blockquote, span, div, button) {
    font-family: inherit;
}

.st :where(h1, h2, h3, h4, h5, h6) {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #0B1F44;
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: pretty;

    /* Bootstrap 3 pose `h1..h6 { line-height: 1.1 }` — un sélecteur de TYPE,
       donc (0,0,1), contre lequel l'héritage depuis `.st` ne pèse rien. Sans
       cette ligne, tous les intertitres sont serrés à 1,1 au lieu du `normal`
       de l'accueil. */
    line-height: normal;
}

/* `:where()` ET PAS `.st p`. Écrite `.st p`, la règle pèse (0,1,1) — une classe
   PLUS un type — et bat donc toutes les classes de cette feuille qui posent une
   marge de paragraphe : elles tomberaient à zéro en silence, et ce n'est pas le
   paragraphe qui bougerait, c'est le bloc SUIVANT qui remonterait contre lui.
   Le piège est documenté en long dans accueil-style.css, où il s'est payé. */
.st :where(p) { margin: 0; text-wrap: pretty; }

/* MÊME PIÈGE SUR LA COULEUR DES LIENS : écrite `.st a`, elle pèserait (0,1,1)
   et repeindrait en bleu le texte des boutons qui sont des <a> — bleu sur bleu
   sur un bouton plein, contraste 1,00. */
:where(.st) a { color: #1257F0; text-decoration: none; }
:where(.st) a:hover,
:where(.st) a:focus { color: #0B44C4; text-decoration: none; }

.st ::selection { background: rgba(18, 87, 240, .18); }
.st :focus-visible { outline: 2px solid #1257F0; outline-offset: 2px; border-radius: 4px; }
.st :where(img, svg) { max-width: 100%; }
.st [hidden] { display: none !important; }

.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRAME COMMUNE
   ══════════════════════════════════════════════════════════════════════════ */

.st-conteneur {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* CHAQUE COLONNE EST ÉCRITE `minmax(0, 1fr)` ET JAMAIS `1fr`. `1fr` est un
   raccourci pour `minmax(auto, 1fr)`, et ce `auto` est un plancher de CONTENU
   MINIMAL : la colonne refuse de descendre sous la largeur du plus long mot
   insécable qu'elle contient, et déborde alors sans rien signaler — le
   garde-fou `body { overflow-x: hidden }` de fp-responsive.css le rattrape en
   silence. `minmax(0, 1fr)` retire ce plancher. */

.st-surtitre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #1257F0;
    margin-bottom: 14px;
}

.st-h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.st-lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: #5C6E8A;
    margin-top: 12px;
    max-width: 560px;
}

/* La ligne de tête d'une section : titres à gauche, pastille d'appoint à
   droite, et l'une passe sous l'autre quand la place manque. */
.st-tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.st-tete-bloc { max-width: 620px; }

/* La carte blanche, commune aux trois sections claires. */
.st-carte-bloc {
    background: #fff;
    border: 1px solid #E8EEF6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(11, 31, 68, .07);
}

/* Le bandeau de bas de carte, qui porte une phrase d'explication. */
.st-bandeau {
    padding: 14px 24px;
    background: #F5F9FF;
    border-top: 1px solid #E8EEF6;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5C6E8A;
}

/* ── PASTILLES ET ÉTIQUETTES D'ÉTAT ───────────────────────────────────────
   `--st-point` porte la teinte, posée par une classe de ton. Une variable
   plutôt que quatre règles de fond : la pastille, l'auréole et rien d'autre. */
.st-point {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--st-point, #98A6BC);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-point, #98A6BC) 18%, transparent);
}

/* Repli pour les navigateurs sans color-mix : l'auréole disparaît, la pastille
   reste. Aucune information n'en dépend. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .st-point { box-shadow: none; }
}

.st-ton-ok       { --st-point: #12B76A; --st-encre: #067647; }
.st-ton-degrade  { --st-point: #F79009; --st-encre: #B54708; }
.st-ton-hs       { --st-point: #F04438; --st-encre: #B42318; }
.st-ton-inconnu  { --st-point: #98A6BC; --st-encre: #69778F; }

.st-etat {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--st-encre, #69778F);
}

/* ══════════════════════════════════════════════════════════════════════════
   1. HÉROS
   Le dégradé, la lueur d'angle et les tailles de titre sont ceux de
   `.ac-hero` : les deux pages s'ouvrent sur le même bleu nuit.
   ══════════════════════════════════════════════════════════════════════════ */

.st-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #0A1B3D 0%, #071227 60%, #050E1E 100%);
}

/* `pointer-events: none` : la lueur couvre 620 px et passerait sinon devant la
   carte des sondes. */
.st-hero::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 87, 240, .20), transparent 65%);
    pointer-events: none;
}

.st-hero .st-conteneur { position: relative; }
.st-hero-inner { padding: 80px 0 88px; }

/* La colonne de droite est FIXE : la carte des sondes est un encadré de
   relevés, pas une illustration qui gagnerait à s'étirer. */
.st-hero-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

/* La pastille d'état prend la place du surtitre de l'accueil : c'est la
   première information de la page, et deux libellés empilés au-dessus du titre
   alourdiraient l'entrée. */
.st-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    margin-bottom: 20px;
}

.st-badge .st-point { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-point) 26%, transparent); }

/* LE BATTEMENT EST UNE ANIMATION, PAS UNE INFORMATION : il dit « la mesure est
   vivante », et sa suppression ne retire rien (voir prefers-reduced-motion en
   bas de feuille). */
@keyframes st-battement {
    0%, 100% { opacity: .4; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.35); }
}

.st-badge .st-point,
.st-sonde-tete .st-point { animation: st-battement 2s ease-in-out infinite; }

.st-hero-titre {
    font-size: clamp(36px, 3.6vw, 50px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    margin-bottom: 20px;
    max-width: 640px;
}

.st-hero-texte {
    font-size: 17px;
    line-height: 1.65;
    color: #B7C6DE;
    max-width: 560px;
    margin-bottom: 40px;
}

/* ── LES QUATRE CHIFFRES ───────────────────────────────────────────────────
   Mêmes filets verticaux que les trois preuves du héros de l'accueil. Ils
   passent à deux colonnes sous 1024 px, où quatre libellés de deux lignes ne
   tiennent plus côte à côte. */
.st-chiffres {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 26px;
}

.st-chiffre { padding-right: 20px; }
.st-chiffre:last-child { padding-right: 0; }
.st-chiffre + .st-chiffre {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.st-chiffre-valeur {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 6px;
}

.st-chiffre-libelle {
    font-size: 13.5px;
    line-height: 1.45;
    color: #8FA3C2;
}

/* ── LA CARTE DES SONDES ───────────────────────────────────────────────────
   Le pendant sombre de `.ac-suivi` : même rayon, même rythme de lignes, mais
   posée sur le dégradé du héros plutôt que sur du blanc. */
.st-sonde {
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .04);
    border-radius: 14px;
    overflow: hidden;
}

.st-sonde-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    font-size: 12.5px;
    font-weight: 500;
    color: #8FA3C2;
}

.st-sonde-corps { padding: 4px 18px 14px; }

.st-sonde-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.st-sonde-ligne:last-child { border-bottom: 0; }
.st-sonde-cle { font-size: 13px; color: #8FA3C2; }
.st-sonde-valeur { font-size: 13.5px; font-weight: 700; color: #fff; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   2. OÙ TOURNE VOTRE SERVICE — la carte et les deux nœuds
   ══════════════════════════════════════════════════════════════════════════ */

.st-noeuds {
    background: #F7FAFD;
    border-bottom: 1px solid #E8EEF6;
}

.st-noeuds-inner { padding: 72px 0; }

.st-liaison {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #EAF1FE;
    color: #0B63F6;
    border: 1px solid #CFE0FE;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 999px;
    flex: 0 1 auto;
}

.st-liaison-point {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #0B63F6;
}

/* LE CADRE DE LA CARTE EST UN GABARIT À HAUTEUR RÉSERVÉE.

   `aspect-ratio` reprend le rapport du SVG que dessine status-carte.js
   (1000 × 430). Sans lui, la place de la carte vaut zéro tant que d3 et le fond
   de carte ne sont pas arrivés, et toute la page remonte puis redescend d'un
   bloc quand ils atterrissent — un décalage de mise en page de 400 px sur la
   première impression. */
.st-carte {
    position: relative;
    border-bottom: 1px solid #E8EEF6;
    background: #EAF1FB;
    aspect-ratio: 1000 / 430;
}

.st-carte cbr-status-map {
    display: block;
    width: 100%;
}

.st-carte-absent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 28px;
    font-size: 14px;
    font-weight: 500;
    color: #5C6E8A;
    text-align: center;
}

.st-noeuds-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px;
    padding: 18px;
    background: #F9FBFE;
}

/* Une carte de nœud est un BOUTON : elle sélectionne le nœud sur la carte.
   `aria-pressed` porte l'état — c'est ce que lit une aide technique, et c'est
   aussi ce que cette feuille stylise, plutôt qu'une classe que le script
   devrait tenir à jour en double. */
.st-noeud {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid #DCE6F2;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.st-noeud:hover { border-color: #B9CDF6; }

.st-noeud[aria-pressed="true"] {
    border-color: #1257F0;
    background: #F5F9FF;
    box-shadow: 0 0 0 3px rgba(18, 87, 240, .10);
}

.st-noeud-haut {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.st-noeud-ville {
    flex: 1;
    min-width: 0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0B1F44;
}

.st-noeud-latence {
    font-size: 12.5px;
    font-weight: 700;
    color: #0B63F6;
    white-space: nowrap;
}

.st-noeud-region {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #7E90A8;
    margin-bottom: 12px;
}

.st-noeud-bas {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.st-noeud-charge { font-size: 12.5px; color: #7E90A8; }

/* La jauge de charge n'apparaît QUE si la charge est mesurée : rien ne la
   mesure aujourd'hui, et une barre remplie au hasard décrédibiliserait toute
   la page le jour où quelqu'un la vérifie. */
.st-jauge {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #E3EBF5;
    overflow: hidden;
    margin-bottom: 8px;
}

.st-jauge > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1257F0;
}

.st-jauge--haute > span { background: #F79009; }

/* ══════════════════════════════════════════════════════════════════════════
   3. DISPONIBILITÉ DES SERVICES
   ══════════════════════════════════════════════════════════════════════════ */

.st-services { background: #fff; }
.st-services-inner { padding: 72px 0; }

.st-service {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 150px);
    gap: 24px;
    align-items: center;
    padding: 17px 24px;
    border-top: 1px solid #EDF2F8;
}

.st-service:first-child { border-top: 0; }

.st-service-nom {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.st-service-nom h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.st-service-detail { font-size: 13px; line-height: 1.5; color: #7E90A8; }

/* ── LES BARRES QUOTIDIENNES ───────────────────────────────────────────────
   UNE BARRE PAR JOURNÉE RÉELLEMENT RELEVÉE, et pas une de plus : la vue n'en
   fabrique aucune. La hauteur vient du taux du jour, entre 12 et 30 px — l'œil
   compare les hauteurs, il faut donc qu'elles veuillent dire quelque chose.

   `data-fpr-garder` N'EST PAS DÉCORATIF. fp-responsive.js mesure les rangées
   flex et pose `flex-wrap: wrap` sur celles qui débordent : quatre-vingt-dix
   barres à 320 px déborderaient, et la rangée se replierait en trois lignes
   superposées — un graphique qui ne veut plus rien dire. L'attribut exclut
   cette rangée de la mesure ; les barres, elles, rétrécissent d'elles-mêmes
   (`min-width` tombe à 1 px sous 720 px, voir l'adaptation en bas). */
.st-barres {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
}

.st-barre {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: var(--st-barre, #DCE6F2);
}

.st-barre--pleine  { --st-barre: rgba(18, 87, 240, .55); }
.st-barre--creuse  { --st-barre: #F79009; }
.st-barre--tombee  { --st-barre: #F04438; }
.st-barre--entretien { --st-barre: #F79009; }
.st-barre--absente { --st-barre: #DCE6F2; }

.st-service-droite { text-align: right; }

.st-uptime {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0B1F44;
    margin-bottom: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. HISTORIQUE DES INCIDENTS
   ══════════════════════════════════════════════════════════════════════════ */

.st-incidents { background: #F7FAFF; }
.st-incidents-inner { padding: 72px 0 88px; }

.st-incident {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    gap: 26px;
    padding: 24px;
    border-top: 1px solid #EDF2F8;
}

.st-incident:first-child { border-top: 0; }

.st-incident-quand {
    border-right: 1px solid #EDF2F8;
    padding-right: 22px;
}

.st-incident-date {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0B1F44;
    margin-bottom: 4px;
}

.st-incident-plage { font-size: 13px; color: #7E90A8; margin-bottom: 12px; }

.st-etiquette {
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    color: #067647;
    background: #E6F6EE;
    border: 1px solid #BCE7D2;
}

.st-etiquette--info {
    color: #0B63F6;
    background: #EAF1FE;
    border-color: #CFE0FE;
}

.st-etiquette--ouvert {
    color: #B42318;
    background: #FEECEB;
    border-color: #FBD3D0;
}

.st-incident-titre-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* `flex-basis: 60%` ET NON `auto`, ET C'EST LA PASTILLE QUI EN DÉPEND.

   Avec `auto`, la base du titre vaut sa largeur de contenu maximale — la phrase
   entière sur une ligne. Sur téléphone elle dépasse forcément, la rangée
   s'enroule, et c'est la PASTILLE qui se retrouve seule sur sa ligne,
   au-dessus du titre : un point vert orphelin, sans rien à qualifier.

   Une base en pourcentage laisse la pastille et le titre tenir ensemble, le
   titre se replier tout seul, et c'est la durée d'impact qui passe à la ligne
   suivante — ce qui est l'ordre de lecture voulu. Sur écran large, les trois
   tiennent de toute façon et `flex-grow` repousse la durée à droite. */
.st-incident-titre-ligne h3 {
    font-size: 17px;
    font-weight: 700;
    flex: 1 1 60%;
    min-width: 0;
}

.st-incident-duree {
    font-size: 12.5px;
    font-weight: 600;
    color: #0B63F6;
    white-space: nowrap;
}

.st-incident-resume {
    font-size: 14.5px;
    line-height: 1.75;
    color: #5C6E8A;
    margin-bottom: 14px;
}

.st-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.st-tags-titre { font-size: 12.5px; font-weight: 600; color: #7E90A8; }

.st-tag {
    font-size: 12.5px;
    font-weight: 600;
    color: #0B63F6;
    background: #EAF1FE;
    border: 1px solid #CFE0FE;
    padding: 4px 10px;
    border-radius: 999px;
}

.st-tag--neutre {
    color: #0B1F44;
    background: #F1F5FA;
    border-color: #DCE6F2;
}

.st-tags-filet {
    width: 1px;
    height: 16px;
    background: #DCE6F2;
    margin: 0 4px;
}

/* Le cas « rien à raconter » : la carte ne reste pas vide, elle le dit. */
.st-vide {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 26px 24px;
}

.st-vide-fort { font-size: 14.5px; font-weight: 600; color: #0B1F44; }
.st-vide-note { font-size: 14px; color: #7E90A8; }

/* ══════════════════════════════════════════════════════════════════════════
   ADAPTATION — les deux seuils de l'accueil

     ≤ 1024 px   Héros en une colonne, carte des sondes centrée ; chiffres en
                 deux colonnes ; ligne de service et ligne d'incident dépliées.
     ≤ 720 px    Gouttière et sections réduites, titre du héros à 34 px, barres
                 quotidiennes resserrées à 1 px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .st-hero-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .st-hero-titre { font-size: 44px; }
    .st-sonde { max-width: 420px; }

    /* Deux colonnes, et les filets suivent : celui de la colonne de gauche
       disparaît, celui de la colonne de droite reste. La règle `+` de la mise
       en page large poserait sinon un filet sur le troisième chiffre, qui ouvre
       désormais une rangée. */
    .st-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-chiffre,
    .st-chiffre + .st-chiffre {
        padding-right: 20px;
        padding-left: 0;
        border-left: 0;
    }
    .st-chiffre:nth-child(even) {
        padding-left: 24px;
        padding-right: 0;
        border-left: 1px solid rgba(255, 255, 255, .12);
    }

    /* La ligne de service se déplie : nom, barres, puis disponibilité — la
       colonne de droite cesse d'être alignée à droite au milieu du vide. */
    .st-service {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .st-service-droite {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }
    .st-uptime { margin-bottom: 0; }

    /* Le filet de séparation de la date passe sous elle. */
    .st-incident {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .st-incident-quand {
        border-right: 0;
        padding-right: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid #EDF2F8;
    }
}

@media (max-width: 720px) {
    .st-conteneur { padding: 0 20px; }

    .st-hero-inner { padding: 56px 0 64px; }
    .st-noeuds-inner { padding: 48px 0; }
    .st-services-inner { padding: 48px 0; }
    .st-incidents-inner { padding: 48px 0 56px; }

    .st-hero-titre { font-size: 34px; line-height: 1.15; }
    .st-hero-texte { font-size: 16px; margin-bottom: 32px; }
    .st-h2 { font-size: 26px; }
    .st-chiffre-valeur { font-size: 23px; }

    .st-service { padding: 16px 18px; }
    .st-incident { padding: 20px 18px; }
    .st-bandeau { padding: 14px 18px; }
    .st-vide { padding: 22px 18px; }
    .st-noeuds-liste { padding: 14px; }

    /* Quatre-vingt-dix barres dans 280 px : 1 px de barre et 1 px d'écart font
       179 px, qui tiennent. C'est ce qui évite le repli en plusieurs lignes. */
    .st-barres { gap: 1px; height: 30px; }
    .st-barre { min-width: 1px; border-radius: 1px; }
}

/* Le battement des pastilles est une respiration, pas une information : il
   s'arrête pour qui a demandé moins d'animation, et rien ne se perd. */
@media (prefers-reduced-motion: reduce) {
    .st-badge .st-point,
    .st-sonde-tete .st-point {
        animation: none;
        opacity: 1;
    }
}