/* DocPrêt (nom de travail), design system
   Interface : Schibsted Grotesk. Documents (emails, courriers, pièces) : Source Serif 4.
   Couleurs d'état : jaune surligneur = à vous ; vert sapin = préparé ; ardoise = en cours. */

@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
  --paper: #eef1f5;
  --sheet: #fcfdfe;
  --ink: #16233f;
  --ink-2: #4a5670;
  --ink-3: #5d6780;
  --rule: #d6dce6;
  --rule-2: #e6eaf0;

  --ready: #2d6a4f;
  --ready-bg: #e3f0e8;
  --you: #f2c230;
  --you-bg: #fff4c7;
  --you-ink: #6b4f00;
  --wait: #52627f;
  --wait-bg: #e4e9f2;
  --alert: #b3261e;
  --alert-bg: #fbe9e7;

  --focus: #2f5fd0;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --ui: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --doc: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.375rem;
  --t-xl: 1.875rem;
  --t-2xl: clamp(2.25rem, 5vw, 3.75rem);

  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-s)/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.doc { font-family: var(--doc); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.15rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: var(--t-s); text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .16s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #22325a; }
.btn-quiet { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink-3); background: var(--sheet); }
.btn-link { background: none; border: 0; padding: 0; min-height: auto; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; cursor: pointer; }
.btn-link:hover { color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Pastilles d'état */
.state {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .15rem .6rem; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.state-ready { background: var(--ready-bg); color: var(--ready); }
.state-you { background: var(--you-bg); color: var(--you-ink); }
.state-you::before { background: var(--you); box-shadow: 0 0 0 1px var(--you-ink) inset; }
.state-wait { background: var(--wait-bg); color: var(--wait); }
.state-muted { background: var(--rule-2); color: var(--ink-2); }
.state-done { background: var(--ready); color: #fff; }
.state-done::before { background: #fff; }

/* Surligneur : l'animation signature */
mark.hl {
  background: linear-gradient(transparent 10%, var(--you) 10%, var(--you) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  color: inherit; padding: 0 .08em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .7s var(--ease);
}
mark.hl.on { background-size: 100% 100%; }
mark.hl.dim { background-image: linear-gradient(transparent 10%, #fbe8a6 10%, #fbe8a6 90%, transparent 90%); }
.tag {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin: 0 .15rem;
  border-radius: 50%; background: var(--ink); color: #fff;
  font: 600 .6875rem/1 var(--ui); vertical-align: .12em; flex: none;
}
mark.hl .tag { opacity: 0; transform: scale(.5); transition: opacity .2s .45s, transform .25s .45s var(--ease); }
mark.hl.on .tag { opacity: 1; transform: none; }

.sim {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .1rem .55rem; border: 1px dashed var(--ink-3); border-radius: 999px;
  font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}