/* ============================================================
   DMCA Monitor — "Liquid Glass" (iOS 26), ton transparent.
   Panneaux translucides sur fond ambiant, accent teal.
   ============================================================ */
:root {
  --ink: oklch(0.26 0.02 250);
  --ink-soft: oklch(0.42 0.02 250);
  --muted: oklch(0.46 0.02 250); /* assombri pour passer WCAG AA (>=4.5:1) sur petit texte */

  --accent: oklch(0.55 0.11 200);
  --accent-press: oklch(0.48 0.11 200);
  --on-accent: oklch(0.99 0 0);

  /* Matériau verre */
  --glass: oklch(1 0 0 / 0.55);
  --glass-strong: oklch(1 0 0 / 0.72);
  --glass-soft: oklch(1 0 0 / 0.38);
  --glass-brd: oklch(1 0 0 / 0.6);
  --glass-line: oklch(0.5 0.02 250 / 0.12);
  --blur: saturate(180%) blur(22px);
  --blur-sm: saturate(170%) blur(12px);
  --hi: inset 0 1px 0 oklch(1 0 0 / 0.75);
  --float: 0 10px 34px oklch(0.4 0.05 250 / 0.12), 0 2px 8px oklch(0.4 0.05 250 / 0.08);
  --float-sm: 0 4px 16px oklch(0.4 0.05 250 / 0.10);

  /* Sémantique douce */
  --done: oklch(0.55 0.11 165);
  --done-tint: oklch(0.95 0.04 165 / 0.7);
  --prog: oklch(0.55 0.10 235);
  --prog-tint: oklch(0.95 0.04 235 / 0.7);
  --wait: oklch(0.6 0.10 75);
  --wait-tint: oklch(0.95 0.05 80 / 0.7);
  --neutral-tint: oklch(0.6 0.02 250 / 0.12);

  /* Typographie : echelle rem fixe (registre product), 4 poids, roles semantiques */
  --font-sans: -apple-system, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  --text-xs: 0.75rem;     /* 12px — pills, legendes, notes */
  --text-sm: 0.875rem;    /* 14px — metadata, controles, titres de ligne */
  --text-base: 1rem;      /* 16px — corps de texte */
  --text-lg: 1.125rem;    /* 18px — titres de section */
  --text-xl: 1.375rem;    /* 22px — titre connexion */
  --text-2xl: 1.75rem;    /* 28px — titre de page */
  --text-display: 2rem;   /* 32px — chiffres du pipeline */
  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 100;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fond ambiant : base claire + halos colorés que le verre va diffracter */
  background:
    radial-gradient(60% 50% at 12% 8%, oklch(0.85 0.09 200 / 0.55), transparent 70%),
    radial-gradient(55% 45% at 92% 12%, oklch(0.84 0.08 280 / 0.45), transparent 70%),
    radial-gradient(70% 60% at 78% 92%, oklch(0.86 0.08 165 / 0.45), transparent 72%),
    radial-gradient(60% 50% at 25% 95%, oklch(0.85 0.07 240 / 0.35), transparent 70%),
    oklch(0.975 0.008 240);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-press); }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------- Barre du haut (verre) ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 20px;
  background: var(--glass-soft);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: var(--hi);
}
.brand { font-size: var(--text-base); font-weight: var(--w-semibold); letter-spacing: -0.01em; color: var(--ink); }
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a { color: var(--ink-soft); font-size: var(--text-sm); font-weight: var(--w-medium); padding: 7px 11px; border-radius: 10px; transition: background .15s var(--ease), color .15s var(--ease); }
.topnav a:hover { background: var(--glass-strong); color: var(--ink); }
.topnav .who { color: var(--muted); font-size: var(--text-xs); font-weight: var(--w-normal); padding-left: 6px; }
@media (max-width: 540px) { .topnav .who { display: none; } }

.container { max-width: 760px; margin: 0 auto; padding: 26px clamp(14px, 4vw, 22px) 72px; }
.container--wide { max-width: 1000px; }

/* ---------- Surface verre générique ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--hi), var(--float);
}

/* ---------- Intro ---------- */
.intro { margin: 4px 4px 22px; }
.intro h1 { margin: 0 0 6px; font-size: var(--text-2xl); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: -0.02em; text-wrap: balance; }
.intro p { margin: 0; color: var(--ink-soft); font-size: var(--text-base); max-width: 65ch; text-wrap: pretty; }
.muted { color: var(--muted); margin: 0; }

/* ---------- Pipeline transparent ---------- */
.pipeline { padding: 22px 20px 16px; margin-bottom: 22px; }
.pipeline-stages { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(6px, 2vw, 16px); }
.stage { text-align: center; min-width: 0; }
.stage .num { font-size: var(--text-display); font-weight: var(--w-bold); letter-spacing: -0.03em; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.stage .num.is-done { color: var(--accent); }
.stage .lbl { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-xs); font-weight: var(--w-medium); }
.stage-arrow { color: oklch(0.6 0.04 250 / 0.6); display: grid; place-items: center; }
.stage-arrow svg { width: 18px; height: 18px; }
.pipeline-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-line);
  font-size: var(--text-sm); color: var(--muted); text-align: center;
}
.pipeline-foot b { color: var(--ink); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.pipeline-foot .sep { opacity: .5; }
@media (min-width: 620px) { .stage .num { font-size: 2.25rem; } }

/* ---------- Sections ---------- */
.section { margin-bottom: 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 12px; }
.section-head h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--w-semibold); line-height: var(--lh-heading); letter-spacing: -0.01em; }
.section-head .count { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.panel { padding: 6px; }
.panel.flush { padding: 0; }

/* ---------- Rangées d'activité / liens ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; transition: background .15s var(--ease); }
.row + .row { border-top: 1px solid var(--glass-line); }
.row:hover { background: var(--glass-strong); }
.row-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; box-shadow: var(--hi); }
.row-ico svg { width: 17px; height: 17px; }
.row-ico.removed { background: var(--done-tint); color: var(--done); }
.row-ico.sent { background: var(--prog-tint); color: var(--prog); }
.row-ico.detected { background: var(--neutral-tint); color: var(--ink-soft); }
.row-main { min-width: 0; flex: 1; }
.row-title { font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--ink); }
.row-sub { color: var(--muted); font-size: var(--text-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Bouton preuve + lightbox ---------- */
.proof-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--w-medium); cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  background: var(--glass-strong); color: var(--ink-soft);
  border: 1px solid var(--glass-line); box-shadow: var(--hi);
  -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.proof-btn:hover { color: var(--accent); background: oklch(1 0 0 / 0.9); }
.proof-btn svg { width: 15px; height: 15px; }
@media (max-width: 540px) { .proof-btn span { display: none; } .proof-btn { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; } }

.proof-modal { border: none; padding: 0; background: transparent; width: 100%; max-width: min(720px, 94vw); }
.proof-modal::backdrop { background: oklch(0.2 0.03 250 / 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.proof-modal[open] { animation: proof-in .22s var(--ease); }
@keyframes proof-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.proof-card { padding: 0; overflow: clip; }
.proof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--glass-line); }
.proof-head strong { font-size: var(--text-sm); font-weight: var(--w-semibold); letter-spacing: -0.01em; }
.proof-close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer; background: var(--glass-strong); color: var(--ink-soft); box-shadow: var(--hi); }
.proof-close:hover { color: var(--ink); }
.proof-close svg { width: 18px; height: 18px; }
.proof-body { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; max-height: 72vh; overflow: auto; }
@media (min-width: 560px) { .proof-body { grid-template-columns: 1fr 1fr; } }
.proof-fig { margin: 0; }
.proof-fig img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--glass-line); display: block; background: oklch(0.95 0.01 240); }
.proof-fig figcaption { margin-top: 8px; font-size: var(--text-xs); color: var(--muted); text-align: center; }
.proof-note { margin: 0; padding: 2px 18px 16px; font-size: var(--text-xs); color: var(--muted); }

.linkrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.linkrow + .linkrow { border-top: 1px solid var(--glass-line); }
.linkrow a.url { flex: 1; min-width: 0; color: var(--ink-soft); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkrow a.url:hover { color: var(--accent); }

/* ---------- Pills d'état ---------- */
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: -0.005em;
  background: var(--neutral-tint); color: var(--ink-soft);
  box-shadow: var(--hi);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.removed, .pill.approved, .pill.done { color: oklch(0.42 0.10 165); background: var(--done-tint); }
.pill.sent, .pill.detected { color: oklch(0.42 0.10 235); background: var(--prog-tint); }
.pill.pending { color: oklch(0.46 0.09 70); background: var(--wait-tint); }
.pill.rejected { color: oklch(0.5 0.12 25); background: oklch(0.95 0.03 25 / 0.7); }

/* ---------- États vides ---------- */
.empty { text-align: center; padding: 32px 22px; color: var(--muted); }
.empty .em-ico { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center; background: var(--glass-strong); color: var(--accent); box-shadow: var(--hi), var(--float-sm); }
.empty .em-ico svg { width: 22px; height: 22px; }
.empty strong { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: var(--w-semibold); margin-bottom: 4px; }
.empty span { font-size: var(--text-sm); max-width: 42ch; margin: 0 auto; display: block; text-wrap: pretty; }

/* ---------- Soumission (repliable) ---------- */
.submit-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: var(--text-sm); font-weight: var(--w-semibold); }
.submit-card summary::-webkit-details-marker { display: none; }
.submit-card summary .chev { color: var(--muted); transition: transform .2s var(--ease); }
.submit-card[open] summary .chev { transform: rotate(180deg); }
.submit-card .submit-body { padding: 0 18px 18px; }

/* ---------- Formulaires ---------- */
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--ink-soft); }
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=url] {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--w-normal);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-line); border-radius: 12px; padding: 11px 13px; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form input::placeholder { color: oklch(0.48 0.01 250); } /* contraste AA */
.form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px oklch(0.55 0.11 200 / 0.18); }
.form .checkbox { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--ink); font-size: var(--text-sm); font-weight: var(--w-normal); line-height: 1.45; }
.form .checkbox input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ---------- Boutons ---------- */
.btn-primary, .btn-ghost {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--w-semibold); cursor: pointer; border-radius: 12px; padding: 11px 18px;
  border: 1px solid transparent; transition: transform .12s var(--ease), background .15s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--hi), var(--float-sm); }
.btn-primary:hover { background: var(--accent-press); }
.btn-primary:active { transform: scale(0.985); }
.btn-ghost { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border-color: var(--glass-brd); color: var(--ink); box-shadow: var(--hi); }
.btn-ghost:hover { background: oklch(1 0 0 / 0.85); }
.btn-ghost:active { transform: scale(0.985); }
.small { padding: 8px 13px; font-size: var(--text-xs); }

/* ---------- Flash ---------- */
.flash { padding: 12px 16px; border-radius: 13px; margin-bottom: 16px; font-size: var(--text-sm); font-weight: var(--w-medium); box-shadow: var(--hi); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); background: var(--glass-strong); }
.flash.success { color: oklch(0.4 0.10 165); background: var(--done-tint); }
.flash.error { color: oklch(0.46 0.13 25); background: oklch(0.95 0.04 25 / 0.7); }

/* ---------- Cartes & tables (admin) ---------- */
.card {
  padding: 22px; margin-bottom: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
  box-shadow: var(--hi), var(--float);
}
.card h2 { margin: 0 0 4px; font-size: var(--text-lg); font-weight: var(--w-semibold); line-height: var(--lh-heading); letter-spacing: -0.01em; }
.card .muted { font-size: var(--text-sm); }
.card.warn { background: var(--wait-tint); }
.page-head { margin: 6px 4px 20px; }
.page-head h1 { margin: 0 0 4px; font-size: var(--text-2xl); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: -0.02em; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--glass-line); }
.table th { color: var(--muted); font-weight: var(--w-medium); font-size: var(--text-xs); }
.table tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 8px; }
.actions form { margin: 0; }
.list { list-style: none; padding: 0; margin: 12px 0 0; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--glass-line); }
.list-row:last-child { border-bottom: none; }
.ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* ---------- Connexion ---------- */
.auth-wrap { display: flex; justify-content: center; padding-top: 9vh; }
.auth-card {
  width: 100%; max-width: 380px; padding: 30px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-brd); border-radius: var(--radius-lg);
  box-shadow: var(--hi), var(--float);
}
.auth-card h1 { margin: 0 0 4px; font-size: var(--text-xl); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: -0.02em; }

/* ---------- Replis d'accessibilité ---------- */
@media (prefers-reduced-transparency: reduce) {
  .glass, .topbar, .form input, .btn-ghost, .flash, .pill, .row-ico, .empty .em-ico { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass { background: oklch(0.995 0.003 240); }
  .topbar { background: oklch(0.99 0.003 240); }
  body { background: oklch(0.975 0.008 240); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}