/* meme gouttiere que les autres pages publiques : sans elle, header.css retombait sur 32 px et
   le logo de l'en-tete demarrait 40 px plus a gauche que sur index, annuaire ou la fiche. */
:root { --edge: clamp(20px, 5vw, 72px); }
/* BeandBus — page /statut (patron Solingua S66, transposé au design premium).
   Charge AVANT header/blocks/mobile, comme toute feuille de page.
   Couleurs d'état locales : le vert/rouge n'existent pas dans la palette
   marine+ambre — on les pose en oklch cohérents avec elle. */

:root {
  --st-vert: oklch(0.58 0.13 152);
  --st-vert-bg: oklch(0.95 0.035 152);
  --st-rouge: oklch(0.55 0.19 27);
  --st-rouge-bg: oklch(0.95 0.035 27);
  --st-ambre: var(--flash-deep, oklch(0.52 0.13 75));
  --st-ambre-bg: oklch(0.96 0.045 88);
  --st-gris: var(--ink-55, rgba(41, 43, 49, 0.55));
  --st-gris-bg: oklch(0.945 0.008 252);
}

/* Le bundle du design system pose un texte clair (thème sombre) que chaque
   feuille de page re-définit — celle-ci aussi, sinon tout sort blanc. */
body { color: var(--ink, #22262e); }

/* Le rail de la page : les autres feuilles définissent leur .wrap complet
   (max-width + margin auto + gouttière) — celle-ci aussi, sinon tout colle
   à gauche. Plus étroit que les 1240 du site : c'est une page de lecture. */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--edge, 20px); }

/* Le rituel de la maison, comme sur l'annuaire : le fil d'Ariane ne colle
   pas au header. */
.head { padding: calc(1.5 * var(--leading, 26px)) 0 var(--leading, 26px); }
.crumb { font-size: 13px; line-height: 20px; margin: 0 0 var(--space-3, 12px); color: var(--ink-55, #666); }
.head .sub { margin: 6px 0 0; }

/* --- héros d'état global --- */
.st-hero { display: flex; align-items: center; gap: 16px; border-radius: 16px;
  padding: 20px 22px; margin: 18px 0 16px; background: var(--color-neutral-100, #fff);
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1px rgba(60, 90, 180, 0.12); }
.st-hero h2 { margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.014em; }
.st-hero p { margin: 3px 0 0; font-size: 13px; color: var(--ink-55, #666); }
.st-hero-ic { width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.st-hero-ic svg { width: 24px; height: 24px; }
.st-hero.st-operational { box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1.5px var(--st-vert); }
.st-hero.st-operational .st-hero-ic { background: var(--st-vert-bg); color: var(--st-vert); }
.st-hero.st-degraded { box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1.5px var(--st-ambre); }
.st-hero.st-degraded .st-hero-ic { background: var(--st-ambre-bg); color: var(--st-ambre); }
.st-hero.st-down { box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05), inset 0 0 0 1.5px var(--st-rouge); }
.st-hero.st-down .st-hero-ic { background: var(--st-rouge-bg); color: var(--st-rouge); }
.st-hero.st-unknown .st-hero-ic { background: var(--st-gris-bg); color: var(--st-gris); }

/* --- carte des services --- */
.st-card { background: var(--color-neutral-100, #fff); border-radius: 16px;
  padding: 4px 20px 12px; box-shadow: 0 2px 10px rgba(20, 30, 60, 0.05),
  inset 0 0 0 1px rgba(60, 90, 180, 0.12); }
.st-row { padding: 15px 0 13px; border-bottom: 1px solid rgba(60, 90, 180, 0.09); }
.st-row:last-child { border-bottom: 0; }
.st-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-row-top b { font-size: 14.5px; letter-spacing: -0.01em; }
.st-ic { width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.st-ic svg { width: 15px; height: 15px; }
.st-ic.st-operational { background: var(--st-vert-bg); color: var(--st-vert); }
.st-ic.st-degraded { background: var(--st-ambre-bg); color: var(--st-ambre); }
.st-ic.st-down { background: var(--st-rouge-bg); color: var(--st-rouge); }
.st-ic.st-unknown { background: var(--st-gris-bg); color: var(--st-gris); }

.st-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.st-tag.st-operational { background: var(--st-vert-bg); color: var(--st-vert); }
.st-tag.st-degraded { background: var(--st-ambre-bg); color: var(--st-ambre); }
.st-tag.st-down { background: var(--st-rouge-bg); color: var(--st-rouge); }
.st-tag.st-unknown { background: var(--st-gris-bg); color: var(--st-gris); }
.st-detail { font-size: 12px; color: var(--ink-55, #666); margin-left: auto;
  white-space: nowrap; font-feature-settings: "tnum" 1; }
.st-hint { font-size: 12.5px; color: var(--ink-55, #666); margin: 5px 0 0 36px; line-height: 1.45; }

/* --- barre de disponibilité : 30 ticks, un par heure --- */
.up-bar { display: flex; gap: 2px; margin: 10px 0 0 36px; }
.up-tick { flex: 1; min-width: 2px; height: 26px; border-radius: 2.5px; display: inline-block; }
.up-ok { background: var(--st-vert); opacity: 0.68; }
.up-ko { background: var(--st-rouge); }
.up-na { background: var(--st-gris-bg); }
.up-legend { display: flex; align-items: center; gap: 16px; margin: 14px 4px 0;
  font-size: 11.5px; color: var(--ink-55, #666); flex-wrap: wrap; }
.up-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.up-legend .lg-ok { background: var(--st-vert); opacity: 0.68; }
.up-legend .lg-ko { background: var(--st-rouge); }
.up-legend .lg-na { background: var(--st-gris-bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.up-legend-r { margin-left: auto; }

/* --- accordéon des incidents --- */
.st-acc { font: inherit; display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 16px; padding: 13px 18px; border: 0; border-radius: 14px;
  background: var(--color-neutral-100, #fff); color: var(--ink, #222);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(60, 90, 180, 0.14); }
.st-acc-chev { margin-left: auto; display: flex; transition: transform 0.2s ease; color: var(--ink-55, #666); }
.st-inc-list { background: var(--color-neutral-100, #fff); border-radius: 14px;
  margin-top: 8px; padding: 6px 18px; box-shadow: inset 0 0 0 1px rgba(60, 90, 180, 0.1); }
.st-inc { padding: 10px 0; border-bottom: 1px solid rgba(60, 90, 180, 0.08);
  display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.st-inc:last-child { border-bottom: 0; }
.st-inc-d { color: var(--st-rouge); font-feature-settings: "tnum" 1; font-weight: 600; font-size: 12.5px; }
.st-inc-vide { font-size: 13px; color: var(--ink-55, #666); padding: 10px 0; margin: 0; }

.st-foot { text-align: center; font-size: 12px; color: var(--ink-55, #666);
  margin: 20px 0 34px; line-height: 1.5; }

/* --- onglets : Santé des services / Nouveautés --- */
.st-tabs { display: flex; gap: 8px; margin: 16px 0 14px; }
.st-tab { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 0;
  padding: 10px 18px; border-radius: 999px; color: var(--blue-hi, #34509d);
  background: color-mix(in srgb, var(--blue, #3563c8) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue, #3563c8) 16%, transparent); }
.st-tab:hover { background: color-mix(in srgb, var(--blue, #3563c8) 11%, transparent); }
.st-tab[aria-selected="true"] { background: var(--blue, #3563c8); color: var(--color-neutral-100, #fff);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--blue, #3563c8) 26%, transparent); }
.st-tab-ver { font-weight: 500; opacity: 0.75; font-size: 12px; margin-left: 2px;
  font-feature-settings: "tnum" 1; }

/* --- le journal des nouveautés --- */
.nv-hero h2 { margin: 0; font-size: 20px; line-height: 26px; letter-spacing: -0.014em; }
.nv-hero p { margin: 3px 0 0; font-size: 13px; color: var(--ink-55, #666); }
.nv-rel { margin-bottom: 14px; padding: 16px 20px 14px; }
.nv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nv-ver { font-size: 15px; letter-spacing: -0.01em; color: var(--blue-hi, #34509d);
  font-feature-settings: "tnum" 1; }
.nv-date { font-size: 12.5px; color: var(--ink-55, #666); }
.nv-now { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 8px; padding: 3px 9px; background: var(--st-vert-bg); color: var(--st-vert); }
.nv-rel h3 { margin: 8px 0 6px; font-size: 16px; line-height: 22px; letter-spacing: -0.012em; }
.nv-rel ul { margin: 0; padding: 0 0 0 19px; display: flex; flex-direction: column; gap: 6px; }
.nv-rel li { font-size: 13.5px; line-height: 1.5; }
.nv-rel li::marker { color: var(--flash-deep, #a8770f); }
/* pagination des nouveautés (01-10) : boutons ronds, la page courante en bleu, flèches en texte */
.nv-pag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 18px 0 6px; }
.nv-pg { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line, #e3e8f0);
  background: #fff; color: var(--ink, #0b1220); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  font-feature-settings: "tnum" 1; }
.nv-pg:hover:not([disabled]) { border-color: var(--blue, #3563c8); color: var(--blue, #3563c8); }
.nv-pg[aria-current="page"] { background: var(--blue, #3563c8); border-color: var(--blue, #3563c8); color: #fff; }
.nv-pg[disabled] { opacity: 0.4; cursor: default; }
.nv-pg:focus-visible { outline: 2px solid var(--blue, #3563c8); outline-offset: 2px; }
.nv-pg-txt { font-weight: 600; }
.nv-pg-sep { min-width: 18px; text-align: center; color: var(--ink-55, #666); }

@media (max-width: 640px) {
  .st-hint, .up-bar { margin-left: 0; }
  .st-detail { margin-left: 36px; flex-basis: 100%; }
}

/* — pied de page : même gabarit que l'annuaire (le markup vient de là) — */
footer { --leading: 28px; } /* le jeton vit dans les feuilles de page ; sans lui les calc() du pied tombaient à 0 */
footer { padding: calc(2 * var(--leading)) 0 var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent); }
.f-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--leading) var(--space-6); }
.f-b { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; letter-spacing: -0.01em; }
.f-brand p { font-size: 13px; line-height: 20px; color: var(--ink-55); margin: 10px 0 0; max-width: 34ch; }
.f-col h4 { font-size: 11.5px; line-height: 18px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 12px; font-weight: 500; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f-col a { font-size: 13.5px; line-height: 20px; color: var(--color-neutral-700); }
.f-col a:hover { color: var(--color-accent-700); }
.f-base { margin: calc(1.5 * var(--leading)) 0 0; padding-top: var(--leading);
  border-top: 1px solid color-mix(in srgb, var(--color-neutral-900) 8%, transparent);
  font-size: 12.5px; line-height: 19px; color: var(--ink-55); }
@media (max-width: 720px) { .f-cols { grid-template-columns: 1fr 1fr; } }