/* =========================================================
   HERBIER — Design tokens + global styles
   ========================================================= */

:root {
  /* Palette — papier ancien + botanique */
  --paper:        #f1ead9;
  --paper-2:      #ebe2cc;
  --paper-3:      #e3d8bd;
  --cream:        #faf6ea;
  --ink:          #1c241b;
  --ink-soft:     #3a4438;
  --ink-mute:     #6a7164;
  --line:         #c9bd9b;
  --line-soft:    #d9cfb1;

  /* Fond de la barre de navigation (translucide, glassmorphism).
     Surchargé par thème dans themes.css pour rester lisible en nocturne. */
  --nav-bg:       rgba(241,234,217,0.78);
  /* Teinte légère des bandes de section (toolbars, panneaux). Sur fond clair
     un voile blanc ; en nocturne un voile très subtil (cf. themes.css). */
  --tint:         rgba(255,255,255,0.25);

  --moss:         #4d6b3e;
  --moss-deep:    #2d4329;
  --moss-dark:    #1a2e1f;
  --sage:         #8a9a73;
  --olive:        #6b7649;

  --sand:         #c9b88a;
  --terra:        #a8744d;
  --rust:         #8b4a2b;

  --gold:         #b8973a;

  /* Type */
  --serif:    "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --display:  "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --italic:   "Italiana", "Cormorant Garamond", serif;
  --script:   "Allura", "Petit Formal Script", cursive;
  --sans:     "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain on body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(rgba(60,50,30,0.04) 1px, transparent 1.2px),
    radial-gradient(rgba(60,50,30,0.025) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .9;
}

/* Vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(40,30,15,0.18) 100%);
}

#root { position: relative; z-index: 2; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

img { max-width: 100%; display: block; }

::selection { background: var(--moss-deep); color: var(--paper); }

/* =========================================================
   Reusable type
   ========================================================= */
.h-display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}
.h-serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.h-italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
}
.kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink-mute);
}
.script {
  font-family: var(--script);
  font-weight: 400;
}

/* =========================================================
   Image placeholder (botanical plate)
   Uses the herbarium-paper aesthetic — striped, monospace label
   ========================================================= */
.plate {
  position: relative;
  background:
    linear-gradient(135deg, rgba(45,67,41,0.06), rgba(168,116,77,0.05)),
    repeating-linear-gradient(45deg,
      transparent 0 9px,
      rgba(45,67,41,0.05) 9px 10px),
    var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
}
.plate::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* corner ticks (botanical plate frame feel) */
.plate-frame::before,
.plate-frame::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ink-mute);
}
.plate-frame::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.plate-frame::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Quand le Plate a une vraie image : fond crème (passe-partout d'herbier).
   Les planches anciennes (Flora Danica, etc.) ont un fond papier crème ;
   pour les images de ratio très différent du cadre (planches étroites ~0.56
   vs cadre 4/5), les bandes laissées par object-fit:contain se fondent alors
   avec le papier de la planche au lieu de trancher sur du vert foncé. */
.plate-has-image {
  background: var(--paper);
}
.plate-has-image::after { content: none; }

/* =========================================================
   Page transitions + scroll reveal
   ========================================================= */
.page-enter { animation: pageIn 700ms var(--ease) both; }
@keyframes pageIn {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Floating leaf decoration (subtle ambient drift)
   ========================================================= */
.leaf-drift {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
.leaf-drift svg { width: 100%; height: 100%; display: block; }
.leaf-1 { top: 8vh; left: -4vw; width: 22vw; transform: rotate(-18deg); animation: drift 18s var(--ease) infinite alternate; }
.leaf-2 { bottom: -6vh; right: -5vw; width: 26vw; transform: rotate(160deg); animation: drift 22s var(--ease) infinite alternate-reverse; opacity: .35; }
@keyframes drift {
  0%   { transform: translate(0,0) rotate(var(--r,-18deg)); }
  100% { transform: translate(2vw, -1.5vh) rotate(calc(var(--r,-18deg) + 4deg)); }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  transition: all 280ms var(--ease);
  cursor: pointer;
  border-radius: 0;
}
.btn:hover { background: var(--ink); color: var(--paper); letter-spacing: 0.24em; }

.btn-solid {
  background: var(--moss-deep);
  color: var(--paper);
  border-color: var(--moss-deep);
}
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }

.btn-ghost { border: 0; padding: 10px 0; }
.btn-ghost::after {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 280ms var(--ease);
  transform-origin: left;
}
.btn-ghost:hover::after { transform: scaleX(1.2); }

/* =========================================================
   Form inputs
   ========================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input,
.field textarea,
.field select {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 10px;
  outline: none;
  transition: border-color 220ms var(--ease);
  width: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--moss-deep); }
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field .hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* =========================================================
   Tag / chip
   ========================================================= */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.35);
}
.tag-active { background: var(--moss-deep); color: var(--paper); border-color: var(--moss-deep); }
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); display: inline-block; }

/* =========================================================
   Divider
   ========================================================= */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.rule-fancy {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-mute);
}
.rule-fancy::before,
.rule-fancy::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* =========================================================
   Scrollbars (subtle)
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--moss-deep); }

/* =========================================================
   Phase 2 — RevisionDiff : styles du diff visuel
   ========================================================= */
.revision-diff { font-family: var(--serif); }

.diff-row {
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.diff-row:last-child { border-bottom: none; }

.diff-path {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}

.diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .diff-cols { grid-template-columns: 1fr; }
}

.diff-before,
.diff-after {
  padding: 10px 14px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.diff-before {
  background: #fef3f2;
  border-left: 3px solid #d92d20;
}
.diff-after {
  background: #ecfdf3;
  border-left: 3px solid #12b76a;
}

.diff-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 4px;
}

.diff-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-warning {
  background: #fffaeb;
  border: 1px solid #f79009;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: #7a3e08;
}

.diff-photo {
  padding: 12px 0;
}
.diff-photo-action {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  border-left: 3px solid;
}
.diff-photo-add {
  background: #ecfdf3;
  border-color: #12b76a;
}
.diff-photo-del {
  background: #fef3f2;
  border-color: #d92d20;
}
.diff-photo-replace {
  background: #fef0c7;
  border-color: #dc6803;
}

/* Bouton « Nouvelle fiche » de la barre — pilule contour, alignée sur les ronds ⌕ / avatar */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--paper);
}