/* ==========================================================================
   TRS — Titan Reliability System · Design system
   DNA : Comp AI recalibrée reliability. Dark teal-black + emerald chirurgical.
   Couleur = état système (jamais décoratif). Voir TRS_design_and_integrations.md.
   ========================================================================== */

/* Inter self-hostée (déposez les .woff2 dans static/fonts/ ; fallback système). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

:root {
  /* Core sémantique (hérité Comp AI) */
  --background: #001A14;
  --foreground: #E8EDE6;
  --card: #002C22;
  --card-foreground: #E8EDE6;
  --popover: #002C22;
  --primary: #00BB7F;
  --primary-foreground: #FFFFFF;
  --secondary: #0A3D2E;
  --muted: #0A2E24;
  --muted-foreground: #7A9B8E;
  --accent: #0A3D2E;
  --destructive: #FB2C36;
  --border: #1A3D32;
  --input: #1A3D32;
  --ring: #00BB7F;
  --sidebar: #001510;
  --sidebar-border: #1A3D32;

  /* Status ops (spécifique TRS) */
  --status-healthy:  #00BB7F;
  --status-degraded: #F99C00;
  --status-incident: #FB2C36;
  --status-resolved: #009767;
  --status-info:     #00B7D7;

  --radius: 0.625rem;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --wrap: 1152px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* --- typographie utilitaire ---------------------------------------------- */
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted-foreground); }
.tiny { font-size: 0.75rem; }
.sm { font-size: 0.875rem; }
.lg { font-size: 1.125rem; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.1; font-weight: 600; }

/* --- boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background: transparent;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn--sm { height: 2rem; padding: 0 .75rem; font-size: .8rem; }
.btn--primary {
  background: linear-gradient(to bottom, #00CC8A, #00BB7F);
  color: var(--primary-foreground); border-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover { filter: brightness(1.05); background: linear-gradient(to bottom, #00CC8A, #00BB7F); }
.btn--danger { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); color: #ff8a90; }
.btn--danger:hover { background: color-mix(in srgb, var(--destructive) 12%, transparent); }
.btn--google { background: #fff; color: #1a1a1a; border-color: transparent; font-weight: 600; }
.btn--google:hover { background: #f2f2f2; }
.btn--block { width: 100%; justify-content: center; }

/* --- cartes --------------------------------------------------------------- */
.card {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  backdrop-filter: blur(8px);
}
.card__title { font-size: .95rem; font-weight: 600; }

/* --- pills d'état système ------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .375rem;
  border-radius: 999px; border: 1px solid var(--border);
  padding: .25rem .625rem; font-size: .75rem; font-weight: 500;
}
.pill .dot { width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; }
.pill--healthy  { color: #6ee7b7; border-color: color-mix(in srgb, var(--status-healthy) 30%, transparent);  background: color-mix(in srgb, var(--status-healthy) 10%, transparent); }
.pill--degraded { color: #fbbf24; border-color: color-mix(in srgb, var(--status-degraded) 30%, transparent); background: color-mix(in srgb, var(--status-degraded) 10%, transparent); }
.pill--incident { color: #ff8a90; border-color: color-mix(in srgb, var(--status-incident) 30%, transparent); background: color-mix(in srgb, var(--status-incident) 10%, transparent); }
.pill--resolved { color: #6ee7b7; border-color: color-mix(in srgb, var(--status-resolved) 30%, transparent); background: color-mix(in srgb, var(--status-resolved) 10%, transparent); }
.pill--info     { color: #67e8f9; border-color: color-mix(in srgb, var(--status-info) 30%, transparent);     background: color-mix(in srgb, var(--status-info) 10%, transparent); }
.pill--incident .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- jauge SLO / budget d'erreur ----------------------------------------- */
.gauge { }
.gauge__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.gauge__val { font-family: var(--font-mono); font-size: .85rem; }
.gauge__track { height: .5rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.gauge__fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.is-healthy  { background: var(--status-healthy); color: #6ee7b7; }
.is-degraded { background: var(--status-degraded); color: #fbbf24; }
.is-incident { background: var(--status-incident); color: #ff8a90; }

/* --- carte incident (bordure = sévérité) --------------------------------- */
.incident {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border); border-left-width: 2px;
  border-radius: .75rem; padding: 1rem;
}
.incident--sev1, .incident--sev2 { border-left-color: var(--status-incident); }
.incident--sev3 { border-left-color: var(--status-degraded); }
.incident--sev4 { border-left-color: var(--muted-foreground); }
.incident__sev { font-family: var(--font-mono); font-size: .75rem; color: #ff8a90; }
.status-glow { box-shadow: 0 0 0 1px var(--status-incident), 0 0 20px -4px var(--status-incident); }

/* --- fil d'activité agent ------------------------------------------------- */
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.feed-badge {
  flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.feed-badge--info   { background: color-mix(in srgb, var(--status-info) 14%, transparent); color: #67e8f9; }
.feed-badge--human  { background: var(--muted); color: var(--muted-foreground); }
.feed-body { min-width: 0; }
.feed-meta { font-family: var(--font-mono); font-size: .7rem; color: color-mix(in srgb, var(--muted-foreground) 75%, transparent); }

/* --- app shell (cockpit) -------------------------------------------------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100dvh; }
.sidebar {
  background: var(--sidebar); border-right: 1px solid var(--sidebar-border);
  padding: 1rem .75rem; position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: .25rem;
}
.brand { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem 1rem; }
.brand__mark {
  width: 1.75rem; height: 1.75rem; border-radius: .5rem; flex: none;
  background: linear-gradient(135deg, #00CC8A, #007a53); display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .8rem; color: #001510;
}
.brand__name { font-weight: 700; letter-spacing: -.02em; }
.nav-link {
  display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem;
  border-radius: .5rem; color: var(--muted-foreground); font-size: .875rem; font-weight: 500;
}
.nav-link:hover { background: var(--muted); color: var(--foreground); }
.nav-link.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: #6ee7b7; }
.nav-link .ico { width: 1rem; height: 1rem; flex: none; opacity: .9; }
.nav-sep { margin: .5rem .5rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
.sidebar__foot { margin-top: auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 4rem; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: blur(14px);
}
.topbar h1 { font-size: 1.05rem; }
.topbar__spacer { flex: 1; }
.content { padding: 1.5rem 1.25rem 4rem; }

/* --- tuiles de stats ------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.tile { background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem 1.1rem; }
.tile__k { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.tile__l { font-size: .8rem; color: var(--muted-foreground); margin-top: .15rem; }

/* --- grille de sections --------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.section-title { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: .75rem; font-family: var(--font-mono); }
.stack > * + * { margin-top: .75rem; }

/* --- tableaux ------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { text-align: left; font-weight: 500; color: var(--muted-foreground); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.table td { padding: .625rem .75rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.table tr:hover td { background: color-mix(in srgb, var(--muted) 40%, transparent); }

/* --- board agile ---------------------------------------------------------- */
.board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; }
.col { flex: 0 0 260px; background: color-mix(in srgb, var(--sidebar) 70%, transparent); border: 1px solid var(--border); border-radius: .75rem; padding: .625rem; display: flex; flex-direction: column; }
.col__head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .375rem .625rem; }
.col__name { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-mono); color: var(--muted-foreground); }
.wip { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-foreground); }
.wip--over { color: #ff8a90; }
.col__body { display: flex; flex-direction: column; gap: .5rem; min-height: 2.5rem; }
.col.drop-target { outline: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: -3px; }
.ticket-card {
  background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--border);
  border-radius: .5rem; padding: .625rem .7rem; cursor: grab;
}
.ticket-card:active { cursor: grabbing; }
.ticket-card.dragging { opacity: .5; }
.ticket-card__title { font-size: .85rem; font-weight: 500; }
.ticket-card__meta { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; font-size: .7rem; color: var(--muted-foreground); }
.badge-sys { font-family: var(--font-mono); font-size: 9px; padding: .1rem .3rem; border-radius: .25rem; background: color-mix(in srgb, var(--status-info) 14%, transparent); color: #67e8f9; }
.prio { font-family: var(--font-mono); }

/* --- war room chat -------------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: .75rem; max-height: 60vh; overflow-y: auto; padding-right: .25rem; }
.msg { display: flex; gap: .75rem; }
.msg__body { background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--border); border-radius: .625rem; padding: .625rem .75rem; font-size: .9rem; }
.msg--human .msg__body { background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* --- forms ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: .875rem; }
.field label { font-size: .8rem; color: var(--muted-foreground); }
.input {
  height: 2.75rem; padding: 0 .875rem; border-radius: .5rem;
  border: 1px solid var(--input); background: color-mix(in srgb, var(--background) 60%, #000);
  width: 100%;
}
.input:focus { border-color: var(--ring); outline: none; }
.otp { letter-spacing: .5em; text-align: center; font-family: var(--font-mono); font-size: 1.25rem; }

/* --- messages / alerts ---------------------------------------------------- */
.alert { border-radius: .5rem; padding: .625rem .875rem; font-size: .875rem; border: 1px solid var(--border); margin-bottom: .75rem; }
.alert--success { border-color: color-mix(in srgb, var(--status-healthy) 35%, transparent); background: color-mix(in srgb, var(--status-healthy) 10%, transparent); }
.alert--error { border-color: color-mix(in srgb, var(--destructive) 35%, transparent); background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.alert--info { border-color: color-mix(in srgb, var(--status-info) 35%, transparent); background: color-mix(in srgb, var(--status-info) 10%, transparent); }

/* --- auth card ------------------------------------------------------------ */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(ellipse 80% 60% at 50% 20%, #003D2E 0%, #001A14 70%, #000F0B 100%); }
.auth-card { width: 100%; max-width: 26rem; background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; backdrop-filter: blur(10px); }

/* ==========================================================================
   LANDING
   ========================================================================== */
.hero-gradient { background: radial-gradient(ellipse 80% 60% at 50% 20%, #003D2E 0%, #001A14 70%, #000F0B 100%); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  max-width: var(--wrap); margin-inline: auto; border-inline: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
}

.lp-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 5%, transparent);
  background: color-mix(in srgb, var(--background) 90%, transparent); backdrop-filter: blur(16px);
}
.lp-header__inner { display: flex; align-items: center; gap: 1.25rem; height: 4.5rem; }
.lp-nav { display: flex; gap: 1.25rem; margin-left: 1rem; }
.lp-nav a { color: var(--muted-foreground); font-size: .875rem; }
.lp-nav a:hover { color: var(--foreground); }

.hero { position: relative; padding: 6rem 0 4rem; text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); color: #fff; max-width: 20ch; margin-inline: auto; }
.hero p { color: rgba(255,255,255,.8); font-size: 1.125rem; max-width: 60ch; margin: 1.25rem auto 0; }
.hero__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.hero__capture { display: flex; gap: .5rem; max-width: 26rem; margin: 1rem auto 0; }
.hero__capture .input { height: 2.75rem; }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); padding: .25rem .625rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--primary) 8%, transparent); }

.trust { padding: 2.5rem 0; border-block: 1px solid color-mix(in srgb, var(--foreground) 5%, transparent); }
.trust__row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.trust__item { font-family: var(--font-mono); font-size: .8rem; color: var(--muted-foreground); opacity: .6; transition: opacity .2s; }
.trust__item:hover { opacity: 1; }

.section { padding: 6rem 0; position: relative; }
.section__head { max-width: 42rem; margin-bottom: 3rem; }
.section__head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.section__head p { color: var(--muted-foreground); margin-top: .75rem; font-size: 1.05rem; }

.steps { display: grid; gap: 0; position: relative; }
.step { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step__n { font-family: var(--font-mono); font-size: .9rem; color: var(--primary); padding-top: .2rem; }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted-foreground); margin-top: .35rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature { background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--border); border-radius: .75rem; padding: 1.5rem; backdrop-filter: blur(8px); }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--muted-foreground); margin-top: .5rem; font-size: .925rem; }

.lp-footer { padding: 3rem 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .85rem; }
.compliance-badges { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- consent banner ------------------------------------------------------- */
.consent {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 60;
  max-width: 42rem; margin-inline: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: .75rem;
  padding: 1rem 1.25rem; display: flex; gap: 1rem; align-items: center;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.6);
}
.consent p { font-size: .85rem; color: var(--muted-foreground); }
.consent__actions { display: flex; gap: .5rem; margin-left: auto; flex: none; }

/* --- reveal animations ---------------------------------------------------- */
[data-animate] { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].in { opacity: 1; transform: none; }

/* --- responsive (mobile-first) ------------------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 240px; transform: translateX(-100%);
    transition: transform .2s ease; z-index: 50;
  }
  .sidebar.open { transform: none; }
  .grid--2, .grid--3, .features { grid-template-columns: 1fr; }
  .lp-nav { display: none; }
}
@media (min-width: 901px) { .menu-toggle { display: none; } }
.menu-toggle { background: transparent; border: 1px solid var(--border); border-radius: .5rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-animate] { opacity: 1; transform: none; }
}