/* ============================================================================
   UptimeEZ : feuille de style unique, sans dépendance externe.

   Parti pris : tableau de bord dense mais lisible. La hiérarchie passe par la
   taille, l'espace et le contraste : jamais par la couleur seule. Le rouge et
   l'orange sont réservés aux états qui demandent une action.
   ========================================================================== */

:root {
  /* --- Surfaces et texte ------------------------------------------------- */
  --bg: #f4f6fa;
  --bg-soft: #eaeef5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;
  --border: #e4e9f1;
  /* WCAG 1.4.11, MEASURED AND NOT ESTIMATED. This is the visual boundary of a control —
     inputs, selects, buttons, the command palette, the segmented switch — and the standard
     asks 3:1 against the surface behind it, because a control you cannot find is a control
     that does not exist. It measured 1.48:1 on white. Lightened hue kept (213°, 26%), only
     the lightness moved, so the interface stays as calm as it was: 3.04:1 now.
     --border, above, stays soft on purpose: the edge of a CARD is decorative, the card is
     identified by its shadow and its content. Only controls fall under the clause. */
  --border-strong: #7e96b4;
  --text: #0d1526;
  --text-soft: #445067;
  --muted: #5c677c;

  /* --- Couleurs sémantiques --------------------------------------------- */
  --accent: #2b52d8;
  --accent-hover: #2043b8;
  --accent-soft: #e8edfd;
  --ok: #0d8f56;
  --ok-soft: #e3f6ec;
  --warn: #b8690a;
  --warn-soft: #fdf0dc;
  --bad: #ce2233;
  --bad-soft: #fdeaec;

  /* Un aplat et un texte n'ont pas les mêmes contraintes : une pastille verte
     peut être vive, le mot « opérationnel » écrit dans ce vert-là tombe à
     4,1:1 sur blanc et 3,7:1 sur fond teinté, sous le minimum de 4,5:1. D'où
     ces trois encres, mesurées sur les deux fonds où elles servent. */
  --ok-ink: #077a46;
  --warn-ink: #96560a;
  --bad-ink: #c01f2f;
  /* Texte posé sur l'accent : blanc en thème clair, presque noir en sombre où
     l'accent s'éclaircit pour rester visible sur fond foncé. */
  --on-accent: #ffffff;

  /* --- Échelles ---------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
  --r-lg: 14px; --r: 10px; --r-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(13, 21, 38, .05);
  --shadow: 0 1px 2px rgba(13, 21, 38, .05), 0 6px 20px -14px rgba(13, 21, 38, .28);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #080b12;
  --bg-soft: #0c1019;
  --surface: #121722;
  --surface-2: #171d2a;
  --surface-3: #1e2635;
  --border: #232c3d;
  /* Same clause, other direction: on a dark surface the boundary has to get LIGHTER.
     Measured 1.79:1, now 3.01:1, hue kept. */
  --border-strong: #516581;
  --text: #e9eef8;
  --text-soft: #b6c2d4;
  --muted: #8494ab;

  --accent: #6b90ff;
  --accent-hover: #85a3ff;
  --accent-soft: #17224a;
  --ok: #34c785;
  --ok-soft: #0d2a1e;
  --warn: #f0ad3c;
  --warn-soft: #2c2113;
  --bad: #f8666f;
  --bad-soft: #2f1418;

  /* En thème sombre, les couleurs vives sont déjà claires : elles servent
     directement de texte sur fond foncé. */
  --ok-ink: #4bd694;
  --warn-ink: #f4b954;
  --bad-ink: #ff8b92;
  --on-accent: #0b1020;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 26px -18px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 21px; }
h2 { font-size: 15.5px; }
h3 { font-size: 14.5px; }
p { margin: 0 0 var(--s3); }
code, .mono { font-family: var(--mono); font-size: .9em; }
svg { flex: 0 0 auto; }

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--s4) var(--s7); }
.row { display: flex; gap: var(--s2); align-items: center; }
.row-between { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.small { font-size: 13px; }
.tiny { font-size: 12px; line-height: 1.45; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt { margin-top: var(--s4); }
.mt-lg { margin-top: var(--s5); }
.mb0 { margin-bottom: 0; }
.center { text-align: center; }
.hidden { display: none !important; }
.prose { max-width: 68ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ Barre supérieure ============================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-in { max-width: 1400px; margin: 0 auto; padding: 8px var(--s4); display: flex; align-items: center; gap: var(--s3); }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; letter-spacing: -.02em; font-size: 15.5px; color: var(--text); }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-sm);
  color: var(--text-soft); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }

/* ================================ Boutons ================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  min-height: 36px; padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 550; font-family: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s; text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--bad-ink); border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: var(--surface); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 13px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); }
.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }
.btn-icon { padding: 0; width: 34px; min-height: 34px; }
.btn-sm.btn-icon { width: 30px; min-height: 30px; }
.btn .spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Bandeau de synthèse (en tête) ===================== */
.band {
  margin: var(--s4) 0; border-radius: var(--r); padding: var(--s3) var(--s4);
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
  /* Trois zones : l'état, le pouls de la journée, l'action. Sur un écran
     étroit, elles s'empilent dans cet ordre de priorité. */
  display: grid; gap: var(--s3) var(--s4); align-items: center;
  grid-template-columns: 32px minmax(0, 1fr) minmax(180px, 300px) auto;
  grid-template-areas: "icon text pulse cta";
}
.band > .band-icon { grid-area: icon; }
.band > .grow { grid-area: text; }
.band > .band-pulse { grid-area: pulse; min-width: 0; }
.band > .band-cta { grid-area: cta; }
@media (max-width: 1000px) {
  .band { grid-template-columns: 32px minmax(0, 1fr) auto;
          grid-template-areas: "icon text cta" ". pulse pulse"; }
}
@media (max-width: 620px) {
  .band { grid-template-columns: 32px minmax(0, 1fr);
          grid-template-areas: "icon text" "pulse pulse" "cta cta"; }
  .band > .band-cta { justify-self: stretch; }
  .band > .band-cta .btn { width: 100%; justify-content: center; }
}

/* Le pouls : la journée en une bande. Aucune légende, la couleur suffit. */
.band-pulse svg.pulse { display: block; width: 100%; height: 20px; }
/* La bande se dessine de gauche à droite une fois, à l'arrivée sur la page :
   le mouvement dit « voilà comment la journée s'est déroulée ». L'état final
   est l'état normal, donc rien ne peut rester caché si l'animation ne joue
   pas, et prefers-reduced-motion la réduit à néant. */
@keyframes pulse-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.band-pulse svg.pulse { animation: pulse-in .7s cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .band-pulse svg.pulse { animation: none; } }
.pulse .pl-up   { fill: var(--ok); }
.pulse .pl-degraded { fill: var(--warn); }
.pulse .pl-down { fill: var(--bad); }
.pulse .pl-none { fill: var(--border-strong); }
.band-pulse-scale {
  display: flex; margin-top: 5px; font-size: 12px; color: var(--muted);
  letter-spacing: .02em;
}
/* Le bandeau résume, il ne crie pas : c'est la carte du dessous qui doit
   attirer l'œil en premier. Un liseré coloré suffit à dire l'état. */
.band-ok   { border-color: var(--border); border-inline-start: 4px solid var(--ok); }
.band-bad  { border-color: var(--border); border-inline-start: 4px solid var(--bad); }
.band-warn { border-color: var(--border); border-inline-start: 4px solid var(--warn); }
.band-icon {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.band-ok .band-icon   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: var(--ok-soft); }
.band-bad .band-icon  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: var(--bad-soft); }
.band-warn .band-icon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: var(--warn-soft); }
.band-title { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.band-sub { color: var(--text-soft); font-size: 13.5px; margin-top: 3px; }
.band-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s3); }
.band > .band-cta { margin-left: auto; flex: 0 0 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong); font-size: 13px;
  font-weight: 550; color: var(--text); max-width: 260px;
}
.chip:hover { border-color: var(--muted); text-decoration: none; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-bad  { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); color: var(--bad-ink); background: var(--surface); }
.chip-warn { border-color: color-mix(in srgb, var(--warn) 48%, var(--border)); color: var(--warn-ink); background: var(--surface); }

/* ============================== Indicateurs ============================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--s3) var(--s4); box-shadow: var(--shadow-sm);
}
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; line-height: 1.15; }
.stat-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.v-ok { color: var(--ok-ink); } .v-warn { color: var(--warn-ink); } .v-bad { color: var(--bad-ink); }

/* ================================ Filtres ================================ */
.toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: var(--s5) 0 var(--s3); }
.search { position: relative; flex: 1 1 240px; max-width: 380px; }
.search input {
  width: 100%; min-height: 36px; padding: 8px 34px 8px 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.search .ico-l { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font: 12px var(--mono); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; }
.segmented a, .segmented button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 11px;
  font-size: 13px; font-weight: 550; color: var(--text-soft); border: 0; background: transparent;
  cursor: pointer; border-right: 1px solid var(--border); font-family: inherit;
}
.segmented > :last-child { border-right: 0; }
.segmented a:hover, .segmented button:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.segmented [aria-selected="true"], .segmented .on { background: var(--accent); color: var(--on-accent); }
.segmented .n { opacity: .75; font-size: 12px; }
select, .select {
  min-height: 36px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}

/* ============================ Grille de cartes ============================ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s3) var(--s4) 10px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .12s, box-shadow .15s; overflow: hidden;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--border-strong); }
.card.s-up::before { background: var(--ok); }
.card.s-degraded::before { background: var(--warn); }
.card.s-down::before { background: var(--bad); }
.card.s-paused::before, .card.s-unknown::before { background: var(--muted); }
.card.s-down { border-color: color-mix(in srgb, var(--bad) 32%, var(--border)); }
.card.s-degraded { border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.card-head { display: flex; gap: var(--s2); align-items: center; }
.card-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.card-name:hover { text-decoration: none; color: var(--accent); }
.card-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.card-msg { font-size: 13px; color: var(--text-soft); margin-top: 7px; min-height: 18px; }
.card.s-down .card-msg { color: var(--bad-ink); font-weight: 550; }
.card.s-degraded .card-msg { color: var(--warn-ink); }
.card-foot { display: flex; gap: var(--s3); align-items: center; margin-top: 8px; }
.card-num { font-weight: 650; font-size: 13.5px; }
.card-num small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.card-actions { display: flex; gap: 2px; margin-left: auto; opacity: .62; transition: opacity .15s; }
.card:hover .card-actions, .card-actions:focus-within { opacity: 1; }

/* =========================== Pastilles / badges =========================== */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-up { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
.dot-degraded { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 16%, transparent); }
.dot-down { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.dot-paused, .dot-unknown { background: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px;
  font-size: 12px; font-weight: 620; white-space: nowrap;
  background: var(--surface-3); color: var(--text-soft); border: 1px solid transparent;
}
.badge-ok   { background: var(--ok-soft);   color: var(--ok-ink);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge-bad  { background: var(--bad-soft);  color: var(--bad-ink);  border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.badge-info { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ============================== Graphiques ============================== */
.spark { width: 100%; height: 34px; display: block; }
.spark-empty { font-size: 12px; color: var(--muted); height: 34px; display: flex; align-items: center; }
.spark rect.b-up { fill: color-mix(in srgb, var(--ok) 55%, transparent); }
.spark rect.b-degraded { fill: var(--warn); }
.spark rect.b-down { fill: var(--bad); }
.spark rect.b-none { fill: var(--border); }
.chart { width: 100%; height: 240px; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 12px; font-family: var(--mono); }
.chart .area { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.chart .pt { fill: var(--accent); }
.chart .downband { fill: color-mix(in srgb, var(--bad) 30%, transparent); }
.chart .warnband { fill: color-mix(in srgb, var(--warn) 24%, transparent); }
.chart-empty { padding: var(--s6) var(--s3); text-align: center; color: var(--muted); font-size: 14px; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: var(--s3); }
.legend i { display: inline-block; width: 11px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.daystrip { display: flex; gap: 2px; align-items: stretch; }
.daystrip i { flex: 1 1 auto; height: 24px; border-radius: 2px; background: var(--border); min-width: 3px; }
.daystrip i.d-up { background: var(--ok); }
.daystrip i.d-degraded { background: var(--warn); }
.daystrip i.d-down { background: var(--bad); }

/* ================================ Panneaux ================================ */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm); margin-top: var(--s3); overflow: hidden;
}
.panel-head {
  padding: 11px var(--s4); border-bottom: 1px solid var(--border); display: flex;
  align-items: center; gap: var(--s2); justify-content: space-between; flex-wrap: wrap;
}
.panel-body { padding: var(--s4); }
.panel-body.tight { padding: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s3); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3) var(--s4); }
.section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 700; margin: var(--s5) 0 var(--s2);
}

/* ======================== Accordéons (details/summary) ==================== */
.acc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm); margin-top: var(--s2); overflow: hidden;
  scroll-margin-top: 64px;   /* la barre supérieure ne doit pas masquer le titre */
}
.acc + .acc { margin-top: 8px; }
.acc > summary {
  display: flex; align-items: center; gap: var(--s3); padding: 13px var(--s4);
  cursor: pointer; list-style: none; user-select: none; min-height: 48px;
  transition: background .15s;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-2); }
.acc > summary .chev { color: var(--muted); transition: transform .18s ease; margin-left: auto; }
.acc[open] > summary .chev { transform: rotate(90deg); }
.acc[open] > summary { border-bottom: 1px solid var(--border); }
.acc-title { font-weight: 620; font-size: 14.5px; letter-spacing: -.01em; }
.acc-note { font-size: 12.5px; color: var(--muted); }
.acc-body { padding: var(--s4); }
.acc-body.tight { padding: 0; }
.acc-attn { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.acc-attn > summary { background: var(--bad-soft); }
.acc-attn > summary:hover { background: color-mix(in srgb, var(--bad-soft) 80%, var(--surface)); }
.acc-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.acc-warn > summary { background: var(--warn-soft); }
.acc-icon { color: var(--muted); display: grid; place-items: center; }
.acc-attn .acc-icon { color: var(--bad); }
.acc-warn .acc-icon { color: var(--warn); }

/* ============================== Diagnostic =============================== */
.diag { display: flex; gap: var(--s4); align-items: flex-start; }
.diag-body { min-width: 0; }
.diag-cause { font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; }
.diag-detail { color: var(--text-soft); font-size: 14px; margin-top: 5px; }
.diag-evidence {
  font-family: var(--mono); font-size: 12px; background: var(--surface-3); color: var(--text-soft);
  padding: 9px 11px; border-radius: var(--r-sm); margin-top: var(--s3); overflow-x: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border);
}
.diag-fix { font-size: 13.5px; margin-top: var(--s3); color: var(--text-soft); }
.diag-fix strong { color: var(--text); }

/* ================================ Tableaux ================================ */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 650; padding: 9px var(--s4); border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
table.tbl td { padding: 10px var(--s4); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

dl.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 9px var(--s4); margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
dl.kv dd .hint { margin-top: 2px; }

/* ============================== Formulaires ============================== */
.field { margin-bottom: var(--s4); }
.field > label, .f-label {
  display: block; font-size: 13.5px; font-weight: 620; margin-bottom: 5px; color: var(--text);
}
.field .req { color: var(--bad-ink); margin-left: 2px; }
.hint { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 5px; line-height: 1.45; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], textarea {
  width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; font-family: var(--mono); font-size: 13px; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.field-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 150px; margin-bottom: var(--s4); }
.field-inline { display: flex; align-items: center; gap: var(--s2); }
.field-inline input[type=number] { max-width: 110px; }
.unit { font-size: 13px; color: var(--muted); white-space: nowrap; }

.switchrow {
  display: flex; gap: var(--s3); align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.switchrow:last-of-type { border-bottom: 0; }
.switchrow input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.switchrow .sw-text { min-width: 0; }
.switchrow .sw-title { font-size: 14px; font-weight: 550; }
.switchrow:hover .sw-title { color: var(--accent); }
.check { display: flex; gap: var(--s2); align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
fieldset > legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 700; padding: 0; margin-bottom: var(--s3);
}
.form-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--s6); }

/* Barre d'enregistrement qui n'apparaît qu'en cas de modification */
.savebar {
  position: sticky; bottom: 0; z-index: 20; margin: var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4));
  padding: var(--s3) var(--s4); background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--border);
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  transform: translateY(0); transition: opacity .18s, transform .18s;
}
.savebar[hidden] { display: none; }
.savebar .sb-note { font-size: 13px; color: var(--warn-ink); font-weight: 550; }

/* ================================ Messages ================================ */
.alert {
  padding: 11px var(--s4); border-radius: var(--r-sm); border: 1px solid var(--border);
  margin: var(--s4) 0 0; font-size: 14px; display: flex; gap: 10px; align-items: flex-start;
}
.alert-ok   { background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 32%, transparent);   color: var(--ok-ink); }
.alert-bad  { background: var(--bad-soft);  border-color: color-mix(in srgb, var(--bad) 32%, transparent);  color: var(--bad-ink); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn-ink); }
.alert-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); }
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }
.empty h3 { color: var(--text); margin-bottom: 6px; }

#toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: 10px var(--s4); box-shadow: var(--shadow); font-size: 14px;
  max-width: 380px; animation: slidein .18s ease;
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }

/* ========================= Rapport de ressources ========================= */
.res-list { font-size: 13px; }
.res {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.res:last-child { border-bottom: 0; }
.res-ico { margin-top: 1px; }
.res-ok .res-ico { color: var(--ok); }
.res-warn .res-ico { color: var(--warn); }
.res-bad .res-ico { color: var(--bad); }
.res-url { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; color: var(--text-soft); }
.res-bad .res-url { color: var(--text); }
.res-note { color: var(--bad-ink); font-weight: 550; margin-top: 2px; font-size: 12.5px; }
.res-warn .res-note { color: var(--warn-ink); }
.res-meta { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.console {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; background: #0d1117; color: #e6edf3;
  border-radius: var(--r-sm); padding: 11px var(--s3); overflow-x: auto; border: 1px solid #22272e;
}
html[data-theme="light"] .console { background: #131a26; }
.console .c-err { color: #ff7b72; }
.console .c-warn { color: #f0b849; }
.console .c-dim { color: #8b949e; }
.meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.meter.warn i { background: var(--warn); }
.meter.bad i { background: var(--bad); }
.gauge { display: flex; align-items: baseline; gap: 7px; }
.gauge b { font-size: 17px; font-weight: 700; }

/* ========================= Progression d'import ========================= */
.prog { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: var(--s3) 0; }
.prog i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .3s ease; }
.setup-log { max-height: 300px; overflow: auto; font-size: 13px; border-top: 1px solid var(--border); }
.setup-log div { padding: 7px 2px; border-bottom: 1px solid var(--border); display: flex; gap: var(--s2); align-items: center; }

/* =============================== Responsive =============================== */
@media (max-width: 900px) {
  .wrap { padding: 0 var(--s3) var(--s6); }
  .topbar-in { padding: 8px var(--s3); gap: var(--s2); flex-wrap: wrap; }
  .topbar-actions { order: 2; }
  .nav {
    order: 3; flex: 1 0 100%; gap: 3px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .band { padding: var(--s4) var(--s3); flex-wrap: wrap; }
  .band-title { font-size: 17px; }
  .band > .band-cta { margin-left: 0; flex: 1 0 100%; }
  .band > .band-cta .btn { width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 21px; }
  .grid-2, .grid-3, .form-cols { grid-template-columns: 1fr; }
  h1 { font-size: 19px; }
  .card-actions { opacity: 1; }
  .search { flex: 1 0 100%; max-width: none; }
  table.tbl th, table.tbl td { padding: 9px 11px; }
  dl.kv { grid-template-columns: 1fr; gap: 2px var(--s3); }
  dl.kv dt { margin-top: 9px; }
  .savebar { margin: var(--s4) calc(-1 * var(--s3)) calc(-1 * var(--s3)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .topbar, .toolbar, .card-actions, #toasts, .savebar, .band-cta { display: none !important; }
  body { background: #fff; }
  .acc > summary { display: none; }
  .acc-body { display: block !important; }
}

/* ============================================================================
   Écran « Aujourd'hui » : la liste de tâches. Chaque bloc porte sa cause, sa
   conduite à tenir et ses actions ; rien ne renvoie vers un écran de réglages.
   ========================================================================== */
/* Sur l'accueil, l'action du bandeau devient secondaire : le bouton principal
   de l'écran est celui de la carte. Deux boutons bleus se disputeraient l'œil. */
#band .btn-primary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
#band .btn-primary:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }

/* ===========================================================================
   Écran d'accueil : un foyer d'attention, puis une file
   -------------------------------------------------------------------------
   Le parti pris tient en une phrase : à tout instant, une seule chose demande
   d'être lue en premier. La panne la plus urgente occupe une carte large, les
   suivantes tiennent sur une ligne. La hiérarchie passe par la taille et
   l'espace, jamais par la couleur seule.
   ========================================================================= */
.hero-task {
  display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 5px solid var(--muted);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--s5); margin-bottom: var(--s5);
}
.hero-bad  { border-inline-start-color: var(--bad); }
.hero-warn { border-inline-start-color: var(--warn); }
.hero-body { min-width: 0; }

/* Ligne d'identité : qui, où, depuis quand. Petit, en haut, pas au centre. */
.hero-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
             font-size: 13px; color: var(--muted); }
.hero-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
            background: var(--surface-2); border: 1px solid var(--border); }
.hero-bad  .hero-ico { color: var(--bad-ink);  border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); background: var(--bad-soft); }
.hero-warn .hero-ico { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 32%, var(--border)); background: var(--warn-soft); }
.hero-site a { font-weight: 650; font-size: 14.5px; color: var(--text); }
.hero-site a:hover { color: var(--accent); }
.hero-dom { font-size: 12.5px; }
/* La durée est un fait, pas un titre : discrète, mais toujours à la même place. */
.hero-since { margin-inline-start: auto; font-variant-numeric: tabular-nums;
              font-weight: 620; font-size: 13px; }
.hero-bad .hero-since  { color: var(--bad-ink); }
.hero-warn .hero-since { color: var(--warn-ink); }

/* Le point d'entrée du regard : la cause, en grand, seule sur sa ligne. */
.hero-cause { font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
              margin: var(--s3) 0 0; }
.hero-why { font-size: 14.5px; color: var(--text-soft); margin: 7px 0 0; max-width: 62ch;
            line-height: 1.5; }

/* Le remède se distingue du diagnostic par une étiquette, pas par une colonne. */
.hero-fix { display: flex; gap: var(--s2); align-items: baseline; margin: var(--s4) 0 0;
            font-size: 14.5px; max-width: 68ch; line-height: 1.5; }
.hero-fix-tag { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; color: var(--accent);
                background: var(--accent-soft); border-radius: 999px; padding: 3px 8px;
                position: relative; top: -1px; }

.hero-tech { margin-top: var(--s4); font-size: 13px; }
.hero-tech > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.hero-tech > summary:hover { color: var(--text); }
.hero-tech > div { margin-top: var(--s2); }

/* La preuve : une image vaut la lecture, mais elle ne prend pas la parole. */
.hero-proof { margin: 0; min-width: 0; }
.hero-proof figcaption { margin-top: 6px; font-size: 12px; color: var(--text-soft);
                         text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
.hero-proof figcaption .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hero-proof-view { border: 1px solid var(--border-strong); border-radius: var(--r-sm);
                   overflow: hidden; background: #fbfcfe; max-height: 168px; }
html[data-theme="dark"] .hero-proof-view { background: #dde3ec; }
.hero-proof-view svg { display: block; width: 100%; height: auto; }
.hero-bad .hero-proof-view { border-color: color-mix(in srgb, var(--bad) 38%, var(--border)); }
.hero-proof-spark { border: 1px solid var(--border); border-radius: var(--r-sm);
                    padding: var(--s3); background: var(--surface-2); }

/* Un bouton principal, le reste replié derrière trois points. */
.act { display: flex; gap: 6px; align-items: center; margin-top: var(--s4); }
.q-row .act { margin-top: 0; }
.act-more { position: relative; display: inline-flex; }
/* Le bouton « autres actions » : une cible carrée, pas trois points perdus. */
.act-more > summary {
  list-style: none; width: 30px; min-height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-soft);
  font-size: 15px; line-height: 1; letter-spacing: .06em; cursor: pointer;
}
.hero-body .act-more > summary { width: 36px; min-height: 36px; }
.act-more > summary:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }
.act-more > summary::-webkit-details-marker, .act-more > summary::marker { display: none; content: ''; }
.act-more[open] > summary { background: var(--surface-3); }
.act-menu {
  position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 4px);
  min-width: 220px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 5px; display: grid; gap: 1px;
}
.act-menu > a, .act-menu > button {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: start;
  padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 13.5px;
  color: var(--text); border-radius: 5px; cursor: pointer; min-height: 36px;
}
.act-menu > a:hover, .act-menu > button:hover { background: var(--surface-2); text-decoration: none; }

/* « Ce n'est pas un problème ici » : une ligne de menu qui se déplie en formulaire.
   Le repli compte : ce geste éteint une alerte, il ne doit pas être à un clic distrait,
   et il ne doit pas non plus occuper le menu de tout le monde en permanence. */
.act-excuse > summary {
  display: flex; align-items: center; gap: var(--s2); padding: 8px 10px;
  font-size: 13.5px; border-radius: 5px; cursor: pointer; min-height: 36px;
  list-style: none;
}
.act-excuse > summary::-webkit-details-marker, .act-excuse > summary::marker { display: none; content: ''; }
.act-excuse > summary:hover { background: var(--surface-2); }
.act-excuse svg { color: var(--muted); flex: 0 0 auto; }
.act-excuse[open] > summary { color: var(--text); font-weight: 600; }
.act-excuse .exception-form { display: grid; gap: 6px; padding: 4px 10px 10px; }
.act-excuse .exception-form input[type=text] { width: 100%; }
.act-excuse .exception-form label { display: grid; gap: 3px; }
.act-menu svg { color: var(--muted); flex: 0 0 auto; }

/* La file : une ligne par panne. Trente lignes se lisent, trente cartes non. */
.queue { list-style: none; margin: 0 0 var(--s5); padding: 0;
         border: 1px solid var(--border); border-radius: var(--r); overflow: visible;
         background: var(--surface); box-shadow: var(--shadow-sm); }
.q-row {
  display: grid; align-items: center; gap: var(--s3);
  grid-template-columns: 26px minmax(120px, 1.1fr) minmax(0, 2fr) 72px auto;
  padding: 10px var(--s4); border-bottom: 1px solid var(--border); min-height: 52px;
}
.q-row:last-child { border-bottom: 0; }
.q-row:hover { background: var(--surface-2); }
/* La gravité tient au pictogramme : cinq lignes rouges ne hiérarchisent rien. */
.q-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
         background: var(--surface-2); border: 1px solid var(--border); }
.q-bad  .q-ico { color: var(--bad-ink);  border-color: color-mix(in srgb, var(--bad) 28%, var(--border)); background: var(--bad-soft); }
.q-warn .q-ico { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); background: var(--warn-soft); }
.q-site a { font-weight: 620; font-size: 14px; color: var(--text); }
.q-site a:hover { color: var(--accent); }
.q-cause { font-size: 13.5px; color: var(--text-soft); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.q-since { font-size: 13px; font-variant-numeric: tabular-nums; text-align: end; color: var(--muted); }
.q-bad .q-since { color: var(--bad-ink); font-weight: 600; }

@media (max-width: 1000px) {
  .hero-task { grid-template-columns: minmax(0, 1fr); }
  .hero-proof { max-width: 420px; }
}
@media (max-width: 720px) {
  .hero-task { padding: var(--s4); }
  .hero-cause { font-size: 21px; }
  .hero-since { margin-inline-start: 0; }
  /* Sur un téléphone, la file passe en deux lignes plutôt qu'en colonnes
     écrasées : le nom et la cause d'abord, la durée et l'action ensuite. */
  .q-row { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 4px; }
  .q-cause { grid-column: 2 / -1; white-space: normal; }
  .q-since { grid-column: 2; text-align: start; }
}

/* Ce qui va casser bientôt */
.fore { display: flex; gap: var(--s3); align-items: flex-start; padding: 12px var(--s4);
  border-bottom: 1px solid var(--border); }
.fore:last-child { border-bottom: 0; }
.fore-icon { color: var(--muted); margin-top: 1px; }
.fore-warn .fore-icon { color: var(--warn); }
.fore-title { font-size: 14px; font-weight: 580; }
.fore-why { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 92ch; }
.fore-more > summary { cursor: pointer; padding: 11px var(--s4); font-size: 13px;
                       color: var(--muted); border-top: 1px solid var(--border); }
.fore-more > summary:hover { color: var(--text); background: var(--surface-2); }
.fore-more[open] > summary { border-bottom: 1px solid var(--border); }

/* ============================ Palette de commandes ======================== */
.pal-back {
  position: fixed; inset: 0; z-index: 300; background: rgba(8, 11, 18, .45);
  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--s4) var(--s4);
}
.pal {
  width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); overflow: hidden;
  animation: palin .14s ease;
}
@keyframes palin { from { opacity: 0; transform: translateY(-8px); } }
.pal input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 15px var(--s4); font-size: 16px; background: transparent; min-height: 54px;
}
.pal input:focus { outline: none; border-color: var(--border); }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-item {
  display: flex; gap: var(--s3); align-items: center; padding: 9px 11px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 14px;
}
.pal-item[aria-selected="true"] { background: var(--accent-soft); }
.pal-item .pal-ico { color: var(--muted); display: grid; place-items: center; }
.pal-item[aria-selected="true"] .pal-ico { color: var(--accent); }
.pal-item .pal-sub { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.pal-empty { padding: var(--s5); text-align: center; color: var(--muted); font-size: 14px; }
.pal-foot { padding: 8px var(--s4); border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--muted); display: flex; gap: var(--s4); flex-wrap: wrap; }
kbd { font: 12px var(--mono); border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; color: var(--text-soft); background: var(--surface); }

/* Bandeau d'annulation */
.undo { display: flex; gap: var(--s3); align-items: center; }
.undo button { text-decoration: underline; background: none; border: 0; color: var(--accent);
  cursor: pointer; font: inherit; padding: 0; }

@media (max-width: 900px) {
  .task { padding: var(--s3) var(--s4); }
  .task-cause { font-size: 15.5px; }
  .task-actions .btn { flex: 1 1 auto; }
  .pal-back { padding: 4vh var(--s2) var(--s2); }
}
.pal-hint { }
@media (max-width: 1100px) { #palette-open .pal-hint, #palette-open kbd { display: none; } }

/* ===========================================================================
   Langue, niveau de détail, aides contextuelles
   ========================================================================= */

/* Sélecteur segmenté : deux états, un clic, pas de menu. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm);
       overflow: hidden; background: var(--surface-2); }
.seg-i { padding: .34rem .6rem; font-size: .78rem; font-weight: 600; color: var(--text-soft);
         text-decoration: none; line-height: 1.2; white-space: nowrap; }
.seg-i + .seg-i { border-inline-start: 1px solid var(--border); }
.seg-i:hover { background: var(--surface-3); color: var(--text); }
.seg-on, .seg-on:hover { background: var(--accent); color: var(--on-accent); }

.lang-pick { display: inline-flex; align-items: center; }
.lang-pick select { appearance: none; border: 1px solid var(--border); background: var(--surface-2);
                    color: var(--text-soft); border-radius: var(--r-sm); padding: .34rem 1.4rem .34rem .5rem;
                    font-size: .78rem; font-weight: 600; cursor: pointer;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
                    background-repeat: no-repeat; background-position: right .45rem center; }
[dir="rtl"] .lang-pick select { padding: .34rem .5rem .34rem 1.4rem; background-position: left .45rem center; }
.lang-pick select:hover { color: var(--text); background-color: var(--surface-3); }
.lang-float { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 5; }

/* Aide « ? » : au survol comme au clavier, jamais un simple title=. */
.hint { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: .28rem; }
.hint { z-index: 40; }
.hint-b { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border);
          text-transform: none; letter-spacing: normal;
          background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 700;
          line-height: 1; cursor: help; padding: 0; display: inline-flex; align-items: center;
          justify-content: center; }
.hint-b:hover, .hint-b:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* La bulle est positionnée en « fixed » par le script dès son ouverture : elle
   échappe ainsi à tout parent en overflow:hidden et à toute pile de z-index.
   text-transform et letter-spacing sont remis à zéro : un titre de section en
   capitales ne doit pas contaminer le texte de l'aide. */
.hint-t { position: absolute; bottom: calc(100% + 8px); inset-inline-start: -8px;
          z-index: 2147483000;
          width: max-content; max-width: min(340px, 82vw); padding: .6rem .75rem;
          background: var(--tip-bg, #1b2030); color: #f2f4f8; border-radius: var(--r-sm);
          font-size: .78rem; font-weight: 400; line-height: 1.5; text-align: start;
          text-transform: none; letter-spacing: normal; font-variant: normal;
          white-space: normal; text-indent: 0;
          box-shadow: 0 10px 30px rgb(0 0 0 / .32);
          /* Fermée, la bulle ne doit occuper aucune place : sur un écran de
             téléphone, une bulle en visibility:hidden élargit encore la page. */
          display: none; }
/* Ouverte, la bulle est détachée du flux : coordonnées calculées en JavaScript. */
.hint-t.hint-fixed { position: fixed; bottom: auto; inset-inline-start: auto; }
.hint-t.hint-fixed::after { display: none; }
.hint-t::after { content: ''; position: absolute; top: 100%; inset-inline-start: 12px;
                 border: 5px solid transparent; border-top-color: var(--tip-bg, #1b2030); }
.hint-b:hover + .hint-t, .hint-b:focus-visible + .hint-t, .hint.open .hint-t {
  display: block; animation: hint-in .13s ease both; }
@keyframes hint-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* Près du bord haut, la bulle passe dessous. */
.hint-down .hint-t { bottom: auto; top: calc(100% + 8px); }
.hint-down .hint-t::after { top: auto; bottom: 100%; border-top-color: transparent;
                            border-bottom-color: var(--tip-bg, #1b2030); }

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

/* --- Écriture de droite à gauche (arabe, ourdou) ------------------------- */
[dir="rtl"] .task, [dir="rtl"] .fore, [dir="rtl"] .band { text-align: start; }
[dir="rtl"] .acc summary .acc-chev { transform: scaleX(-1); }
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: start; }
[dir="rtl"] .tbl .num { text-align: end; }
[dir="rtl"] kbd { direction: ltr; display: inline-block; }
/* Les mesures, URL et extraits de code restent lus de gauche à droite. */
[dir="rtl"] .mono, [dir="rtl"] .num, [dir="rtl"] pre, [dir="rtl"] code,
[dir="rtl"] .task-evidence, [dir="rtl"] .stat-val { direction: ltr; text-align: start; unicode-bidi: embed; }

/* Sur petit écran la barre d'outils doit tenir : le niveau de détail et la
   langue se réduisent à l'essentiel plutôt que de pousser la page en largeur. */
@media (max-width: 900px) {
  .seg-i { padding: .3rem .4rem; font-size: .75rem; }
  .lang-pick select { padding-block: .3rem; font-size: .75rem; max-width: 88px; }
  .topbar-actions { flex-wrap: wrap; row-gap: 5px; flex: 1 1 100%; margin-left: 0;
                    justify-content: flex-end; min-width: 0; }
}
@media (max-width: 560px) {
  /* Le nom du site suffit à identifier la page : le libellé du bouton part. */
  #palette-open .pal-hint, #palette-open kbd { display: none; }
  .lang-pick select { max-width: 74px; text-overflow: ellipsis; }
  .topbar-actions .btn-ghost.btn-sm:last-child { padding-inline: .45rem; }
}

/* Bandeau du mode démonstration : discret mais impossible à manquer, et
   présent sur les captures d'écran de la documentation. */
.demo-flag { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
             margin: 0 0 var(--s4); padding: .5rem .75rem; border-radius: var(--r-sm);
             background: color-mix(in srgb, var(--warn) 12%, var(--surface));
             border: 1px dashed color-mix(in srgb, var(--warn) 45%, var(--border));
             color: var(--text-soft); font-size: .8rem; line-height: 1.45; }
.demo-flag strong { color: var(--text); }
.demo-flag code { margin-inline-start: auto; font-size: .75rem; padding: .1rem .4rem;
                  border-radius: 4px; background: var(--surface-3); color: var(--text-soft); }
@media (max-width: 640px) { .demo-flag code { margin-inline-start: 0; } }

/* ===========================================================================
   Silhouette de page : la comparaison avant/après
   ========================================================================= */
.sil-wrap { margin: 0 0 var(--s5); }
.sil-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .55rem;
            font-size: .82rem; }
.sil-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
.sil-pair.sil-solo { grid-template-columns: minmax(0, 420px); }
.sil { margin: 0; min-width: 0; }
.sil figcaption { display: flex; gap: .4rem; align-items: baseline; margin-bottom: .3rem;
                  font-size: .75rem; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .04em; color: var(--text-soft); }
.sil figcaption .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.sil-view { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
            background: #fbfcfe; max-height: 320px; }
.sil-view svg { display: block; width: 100%; height: auto; }
/* Une silhouette qui a dérivé se signale au premier regard. */
.sil-bad .sil-view { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 18%, transparent); }
@media (max-width: 720px) { .sil-pair { grid-template-columns: 1fr; } }
@media print {
  .sil-pair { grid-template-columns: 1fr 1fr; }
  .sil-view { max-height: none; break-inside: avoid; }
}

/* Liste d'avis de sécurité : compacte, un identifiant cliquable par ligne. */
.adv-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.adv-list li { font-size: .78rem; line-height: 1.35; }
.adv-list a { font-family: var(--mono, ui-monospace, monospace); font-size: .75rem; }

/* ===========================================================================
   Mode agence : la liste des clients et l'espace en lecture seule
   ========================================================================= */
.page-head { display: flex; justify-content: space-between; align-items: flex-start;
             gap: var(--s4); margin: var(--s5) 0 var(--s4); flex-wrap: wrap; }
.page-head p { margin: .35rem 0 0; max-width: 68ch; font-size: 13.5px; }

/* Une cellule qui porte un formulaire n'a pas à réagir au survol comme une
   ligne de données : le repère visuel doit rester sur la ligne du client. */
table.tbl td.cell-form { padding: 0 var(--s4) var(--s4); background: var(--surface); }
table.tbl tr:hover td.cell-form { background: var(--surface); }

.txt-bad { color: var(--bad-ink); } .txt-warn { color: var(--warn-ink); }

fieldset.fs { border: 1px solid var(--border); border-radius: var(--r-sm);
              padding: var(--s3) var(--s4); margin: var(--s4) 0 0; }
fieldset.fs legend { padding: 0 6px; font-size: 12.5px; font-weight: 650;
                     text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Rattachement des sites : des cases à cocher qui restent lisibles à trente
   lignes, et cliquables au doigt (44 px de hauteur utile). */
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
             gap: 2px var(--s4); margin-top: var(--s2); }
.checkrow { display: flex; gap: var(--s3); align-items: baseline; padding: 9px 4px;
            border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; min-height: 40px; }
.checkrow:hover { background: var(--surface-2); }
.checkrow input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.checkrow .tiny { display: block; }
/* Un site déjà pris par un autre client : visible, mais clairement pas dispo. */
.checkrow.is-taken { opacity: .55; cursor: not-allowed; }
.checkrow.is-taken input { cursor: not-allowed; }

/* L'espace client : sobre, sans action, lisible sur un téléphone. */
.cli-head { text-align: center; margin: var(--s6) 0 var(--s4); }
.cli-head h1 { font-size: 25px; }
.cli-head p { margin: .4rem 0 0; color: var(--text-soft); font-size: 13.5px; }
.cli-site { display: grid; grid-template-columns: 26px 1fr 220px 110px; gap: var(--s4);
            align-items: center; padding: var(--s4); border-bottom: 1px solid var(--border); }
.cli-site:last-child { border-bottom: 0; }
.cli-site .cli-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cli-site .cli-dom { font-size: 12.5px; color: var(--muted); }
.cli-foot { text-align: center; margin-top: var(--s5); font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) {
  .cli-site { grid-template-columns: 26px 1fr; row-gap: var(--s2); }
  .cli-site > :nth-child(3), .cli-site > :nth-child(4) { grid-column: 2; }
}

/* ===========================================================================
   Vitesse ressentie : les mesures, puis les causes, puis le remède
   ========================================================================= */
.vit-kv dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.vit-kv dd .hint { flex: 1 1 100%; margin-top: 2px; }

.vit-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.vit-f {
  display: grid; gap: .2rem; padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  /* La gravité se lit sur le bord : l'œil trie la liste sans lire. */
  border-inline-start: 3px solid var(--border-strong);
  background: var(--surface);
}
.vit-f strong { font-size: 13.5px; font-weight: 620; }
.vit-f .vit-why { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }
.vit-f .vit-fix { font-size: 12.5px; display: flex; gap: .35rem; align-items: baseline; color: var(--text); }
.vit-f .vit-fix svg { flex: 0 0 auto; color: var(--accent); position: relative; top: 2px; }
.vit-f .vit-ev { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.vit-high { border-inline-start-color: var(--bad); }
.vit-medium { border-inline-start-color: var(--warn); }
.vit-low { border-inline-start-color: var(--border-strong); }

/* Reprise d'un autre outil : ce qui n'a pas pu être repris se lit sans être
   dramatisé. Ce n'est pas une erreur, c'est une limite annoncée. */
.imp-skip { padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
            background: var(--surface-2); font-size: 13px; }
.imp-skip > strong { display: block; margin-bottom: 6px; }
.imp-skip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.imp-skip li { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 12.5px; }
.imp-skip-name { font-weight: 600; min-width: 12ch; }

/* ------------------------------------------------------------------
   Retour d'exploitation sur un incident.

   Le panneau est REPLIÉ par défaut, et c'est une décision et non un
   choix d'encombrement : déplié, il proposerait quatre motifs à chaque
   ligne du tableau et ferait de l'avis un geste attendu. Or on veut
   l'avis de qui a vraiment regardé, pas de qui veut faire disparaître
   une ligne rouge.

   Le bouton n'est pas rouge non plus. Un « Ignorer » écarlate serait
   cliqué pour ce qu'il a l'air de faire, et il ne le fait pas.
   ------------------------------------------------------------------ */
details.retour { display: inline-block; text-align: left; }
details.retour > summary { list-style: none; cursor: pointer; }
details.retour > summary::-webkit-details-marker { display: none; }
details.retour[open] > summary { opacity: .7; }

.retour-form {
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
  padding: .75rem;
  min-width: 15rem;
  max-width: 22rem;
  border: 1px solid var(--border, #d8dee6);
  border-radius: .5rem;
  background: var(--panel, #fff);
  white-space: normal;
}
.retour-form label { display: grid; gap: .2rem; }
.retour-form select,
.retour-form input[type=text] { width: 100%; }

/* ------------------------------------------------------------------
   MINIMUM TEXT SIZE: 12px.

   Measured with a real browser on a live 200-monitor instance on 2026-08-02:
   badges and table headers rendered at 11.5px, keyboard hints at 11px, the
   button hint at 10.88px and the fix tag at 10.5px.

   Contrast, by the way, came out CLEAN on all five screens once the measuring
   script stopped mis-parsing `color(srgb 1 1 1 / .9)` as near-black. The small
   sizes are the only real finding of that audit.

   Why 12px and not smaller: this interface is read by people scanning two
   hundred rows for the one that is red. Below 12px an uppercase, letter-spaced
   label stops being scanned and starts being decoded, which is slower and
   tiring -- and these labels are exactly the ones telling you WHICH column you
   are looking at. The gain in density was never worth that.
   ------------------------------------------------------------------ */