/* Page d'état OPTGateway. Couleurs et police du site optgateway.com.
   Élément distinctif : l'indicateur de réseau à quatre barres, le langage du mobile money. */
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url(fonts/public-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url(fonts/public-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url(fonts/public-sans-latin-700-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --ink: #0b1b33;
  --ink-2: #13294b;
  --sky: #8ec5ff;
  --canvas: #f4f5f7;
  --panel: #ffffff;
  --text: #0b1b33;
  --slate: #5b6472;
  --line: #e1e5eb;
  --off: #d5dae2;
  --ok: #1b8a55;
  --warn: #b26a00;
  --down: #c0392b;
  --brand: #0b5cd5;
  --warn-soft: #fff4dc;
  --down-soft: #fdecea;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0e1726;
    --panel: #13203a;
    --text: #e7edf6;
    --slate: #9aa7ba;
    --line: #22314d;
    --off: #2a3a58;
    --ok: #3fbf80;
    --warn: #f0b94d;
    --down: #f07167;
    --brand: #8ec5ff;
    --warn-soft: #2b2311;
    --down-soft: #2c1a1c;
  }
  .band { border-bottom: 1px solid #22314d; background: #08142a; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas); color: var(--text);
  font: 400 16px/1.55 "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* Bandeau : la réponse à « peut-on payer maintenant ? » */
.band { background: var(--ink); color: #fff; padding-bottom: 44px; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand img { display: block; height: 26px; width: auto; }
.bar-link { color: #c9d6ea; font-size: 15px; text-decoration: none; }
.bar-link:hover { color: #fff; }
.hero { display: flex; align-items: center; gap: 28px; padding-top: 28px; }
.hero h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.hero-sub { margin: 10px 0 0; font-size: 18px; color: #c9d6ea; max-width: 56ch; }
.hero-meta { margin: 16px 0 0; font-size: 14px; color: #93a5c2; display: flex; align-items: center; gap: 10px; }
.sep { width: 4px; height: 4px; border-radius: 50%; background: #4a5f82; }

/* Indicateur de réseau : quatre barres croissantes */
.signal { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; flex: none; color: var(--ok); position: relative; }
.signal i { display: block; width: 4px; border-radius: 1.5px; background: var(--off); }
.signal i:nth-child(1) { height: 25%; }
.signal i:nth-child(2) { height: 50%; }
.signal i:nth-child(3) { height: 75%; }
.signal i:nth-child(4) { height: 100%; }
.signal.big { height: 72px; gap: 9px; }
.signal.big i { width: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.s-operational i { background: currentColor !important; }
.s-operational { color: var(--ok); }
.s-degraded { color: var(--warn); }
.s-degraded i:nth-child(-n+2) { background: currentColor !important; }
.s-partial_outage { color: var(--down); }
.s-partial_outage i:nth-child(1) { background: currentColor !important; }
.s-major_outage, .s-unreachable { color: var(--down); }
.signal.s-major_outage::after, .signal.s-unreachable::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px;
  background: currentColor; transform: rotate(-32deg); border-radius: 2px;
}
.big.s-major_outage::after, .big.s-unreachable::after { height: 5px; }
.band .s-operational { color: #4cd38f; }
.band .s-degraded { color: #f7c25c; }
.band .s-partial_outage, .band .s-major_outage, .band .s-unreachable { color: #ff8a80; }
.s-loading i { animation: scan 1.4s ease-in-out infinite; }
.s-loading i:nth-child(2) { animation-delay: .15s; }
.s-loading i:nth-child(3) { animation-delay: .3s; }
.s-loading i:nth-child(4) { animation-delay: .45s; }
@keyframes scan { 0%, 100% { background: rgba(255, 255, 255, 0.14); } 40% { background: var(--sky); } }
@media (prefers-reduced-motion: reduce) { .s-loading i { animation: none; } }

main { padding-bottom: 24px; }
h2 { font-size: 20px; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: -0.01em; }

/* Message de l'équipe */
.notice { margin-top: 28px; padding: 16px 20px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--brand); }
.notice[hidden] { display: none; }
.notice strong { display: block; margin-bottom: 4px; }

/* Incidents en cours */
#active:empty { display: none; }
#active { margin-top: 28px; }
#active h2 { margin-bottom: 12px; }
.incident { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.incident + .incident { margin-top: 12px; }
.incident.live { border-left: 4px solid var(--down); }
.incident.live.minor { border-left-color: var(--warn); }
.incident h3 { margin: 0; font-size: 17px; font-weight: 700; }
.incident .meta { margin: 4px 0 0; font-size: 14px; color: var(--slate); }
.steps { list-style: none; margin: 16px 0 0; padding: 0; }
.steps li { position: relative; padding: 0 0 14px 22px; font-size: 15px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.steps li::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li:first-child::before { background: var(--text); }
.steps .step { font-weight: 600; }
.steps time { color: var(--slate); font-size: 13.5px; margin-left: 8px; }
.steps p { margin: 2px 0 0; }

/* Moyens de paiement, pays par pays */
.block { margin-top: 40px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legend { margin: 0; font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.legend .day { display: inline-block; flex: none; width: 6px; height: 14px; margin-left: 8px; }
.legend .day:first-child { margin-left: 0; }
.group { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.group-name { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 20px 6px; font-size: 15px; font-weight: 700; }
.group-name img { width: 22px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(11 27 51 / .12); }
.row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 360px) 150px; align-items: center; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--line); }
.group-name + .row { border-top: 0; }
.row .name { font-weight: 600; }
.row .why { display: block; font-size: 13px; font-weight: 400; color: var(--slate); }
.state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 14.5px; font-weight: 600; }
.state.s-operational, .state.s-degraded, .state.s-partial_outage, .state.s-major_outage { background: none; }
.days { display: flex; gap: 1px; height: 26px; }
.day { flex: 1 1 0; min-width: 0; border-radius: 1px; background: var(--off); }
.day:hover { opacity: .7; }
.day.i-minor { background: var(--warn); }
.day.i-major { background: var(--down); }
.scale { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 360px) 150px; gap: 20px; margin: 8px 0 0; padding: 0 21px; font-size: 12.5px; color: var(--slate); }
.scale-days { grid-column: 2; display: flex; justify-content: space-between; }

/* Historique */
.history { margin-top: 14px; }
.history .incident { border-radius: 10px; }
.empty { margin: 14px 0 0; color: var(--slate); }
.calm { margin-top: 14px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--slate); }

.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--slate); }
.foot p { margin: 0 0 12px; max-width: 72ch; }
.foot a { margin-right: 18px; }

/* Plateforme injoignable : pas de frise, donc ni légende ni repères */
.is-down .legend, .is-down .scale { display: none; }

@media (max-width: 680px) {
  .hero { gap: 20px; align-items: flex-start; }
  .signal.big { height: 52px; gap: 6px; }
  .signal.big i { width: 11px; }
  .row { grid-template-columns: 1fr auto; }
  .days, .scale { display: none; }
  .legend { display: none; }
}