/* Plantes d'ici — Field guide stylesheet
   Aesthetic: warm botanical paper, deep forest ink, single moss-green accent
*/

:root {
  /* Charte horticole : vert profond, crème, accents jaune et grenat */
  --paper: #fbf6e9;
  --paper-2: #f3ecd5;
  --paper-deep: #e8dfbf;
  --ink: #18331f;             /* vert très sombre */
  --ink-2: #2c4a32;
  --ink-dim: #6c7d6a;
  --rule: #cfc7a8;
  --rule-2: #ddd5b6;
  --moss: #2f6b3a;            /* vert pelouse */
  --moss-deep: #18331f;
  --moss-soft: #c9d9b6;
  --bloom: #b14a3a;            /* grenat / coquelicot */
  --fruit: #c98a2b;            /* miel */
  --honey: #e9b94a;            /* jaune mellifère */
  --shadow: 0 1px 2px rgba(24,51,31,.06), 0 12px 40px -12px rgba(24,51,31,.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #18331f;
  background-image:
    radial-gradient(circle at 18% 8%, #234a2c 0%, transparent 45%),
    radial-gradient(circle at 82% 92%, #0f2415 0%, transparent 55%),
    #18331f;
  color: var(--ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  padding: 32px 16px 80px;
}

.app { max-width: 1180px; margin: 0 auto; }

/* ─── Card frame shared by all views ─── */
.card, .cover, .index {
  background: var(--paper);
  border-radius: 4px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Subtle paper grain via stacked gradients */
.card::before, .cover::before, .index::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(31,42,34,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(31,42,34,.012) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ────────────────────────────────────────
   COVER
   ──────────────────────────────────────── */
.cover { padding: 0; }
.cover-frame {
  margin: 18px;
  padding: 64px 64px 48px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  position: relative;
}
.cover-frame::after {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid var(--rule-2);
  pointer-events: none;
}
.cover-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 48px;
}
.cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  line-height: 1.02;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cover-line { display: block; white-space: nowrap; }
.cover-line em { font-style: italic; color: var(--honey); }
.cover-amp { font-style: italic; color: var(--honey); padding-left: 1.5ch; }
.cover-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-2);
  margin: 36px 0 56px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  max-width: 480px;
}

.cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
}
.cover-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 12px;
}
.cover-col p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.cover-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cover-legend .tag { margin-right: 6px; }

.cover-cta {
  margin-top: 48px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.btn-primary, .btn-ghost {
  font-family: inherit;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--ink);
  transition: transform .15s, background .15s, color .15s;
}
.btn-primary { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.btn-primary:hover { transform: translateY(-1px); background: var(--moss-deep); border-color: var(--moss-deep); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.cover-foot {
  margin-top: 32px;
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--rule); padding-top: 16px;
}

/* ────────────────────────────────────────
   INDEX
   ──────────────────────────────────────── */
.index { padding: 48px 56px 56px; }
.index-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px; margin-bottom: 32px;
}
.index-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 6px;
}
.index-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 56px; line-height: 1; margin: 0;
}
.index-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.index-cell {
  background: var(--paper);
  border: none; padding: 22px 20px; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .15s;
  min-height: 160px;
}
.index-cell:hover { background: var(--paper-2); }
.index-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  color: var(--ink-dim);
}
.index-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; line-height: 1.1; color: var(--ink);
}
.index-latin { font-size: 13px; color: var(--ink-2); }
.index-tags { display: flex; gap: 4px; margin-top: 4px; }
.mini-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; padding: 2px 6px; border-radius: 2px;
  border: 1px solid var(--ink); color: var(--ink);
  background: transparent;
}
.mini-M  { border-color: var(--honey); color: #7a5a14; background: #fbf2d3; }
.mini-C  { border-color: var(--moss); color: var(--moss-deep); background: #e7efd9; }
.mini-Md { border-color: var(--bloom); color: #7a2818; background: #f6dfd9; }
.index-meta {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-dim);
  display: flex; gap: 6px; padding-top: 8px;
  border-top: 1px dashed var(--rule);
}

/* ────────────────────────────────────────
   PLANT CARD
   ──────────────────────────────────────── */
.card { padding: 0; }

/* HEAD */
.card-head {
  padding: 48px 56px 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.head-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}
.head-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--moss);
  flex: 1;
  text-align: center;
}
.head-common {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .95;
  margin: 0;
  letter-spacing: -0.015em;
}
.head-latin {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--moss);
  font-style: italic;
  margin-top: 6px;
}
.head-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  border: 1px solid;
}
.tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.tag-M  { border-color: var(--honey); color: #7a5a14; background: #fbf2d3; }
.tag-M  .tag-dot  { background: var(--honey); }
.tag-C  { border-color: var(--moss); color: var(--moss-deep); background: #e7efd9; }
.tag-C  .tag-dot  { background: var(--moss); }
.tag-Md { border-color: var(--bloom); color: #7a2818; background: #f6dfd9; }
.tag-Md .tag-dot  { background: var(--bloom); }

/* QUICK FACTS strip */
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--moss-soft);
  border-bottom: 1px solid var(--rule);
}
.quick-item {
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
  color: var(--ink);
}
.quick-item:last-child { border-right: none; }
.quick-item svg { color: var(--moss-deep); margin-bottom: 6px; }
.quick-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.quick-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; line-height: 1.15;
  text-transform: lowercase;
}
.quick-value::first-letter { text-transform: uppercase; }

/* BODY two-column */
.body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.body-left {
  border-right: 1px solid var(--rule);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.body-right {
  padding: 28px 36px 28px 32px;
  display: flex; flex-direction: column;
}

/* Illustration placeholder */
.illus {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.illus-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    rgba(31,42,34,.04) 14px 15px
  );
}
.illus-tag {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 24px; text-align: center;
}
.illus-tag-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.illus-tag-line.dim { margin-top: 8px; opacity: .7; max-width: 200px; }
.illus-tag-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: var(--ink-2);
  margin: 10px 0;
}
.illus-num {
  position: absolute; top: 10px; left: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  color: var(--ink-dim);
}

/* Calendar */
.calendar { font-size: 11px; }
.cal-rows { display: flex; gap: 18px; margin-bottom: 8px; flex-wrap: wrap;}
.cal-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.bloom-dot { background: var(--bloom); }
.fruit-dot { background: var(--fruit); }
.cal-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.cal-col { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.cal-cell {
  height: 12px; background: var(--paper-deep); border-radius: 1px;
}
.cal-cell.bloom.on { background: var(--bloom); }
.cal-cell.fruit.on { background: var(--fruit); }
.cal-month {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-align: center;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* Info rows */
.row {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule);
}
.row:last-child { border-bottom: none; }
.row-icon { color: var(--moss); padding-top: 2px; }
.row-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.row-text { color: var(--ink); text-wrap: pretty; }
.row-text p { margin: 0 0 6px; }
.row-text p:last-child { margin-bottom: 0; }

/* USAGES */
.uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.use {
  padding: 26px 32px;
  border-right: 1px solid var(--rule);
}
.use:last-child { border-right: none; }
.use-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 12px;
}
.use-edible { background: #ecf2dd; }
.use-edible .use-head, .use-edible svg { color: var(--moss); }
.use-med    { background: #f6dfd9; }
.use-med    .use-head, .use-med svg    { color: var(--bloom); }
.use-note   { background: #fbf2d3; }
.use-note   .use-head, .use-note svg   { color: #7a5a14; }
.use p { margin: 0; text-wrap: pretty; color: var(--ink); }

/* FOOTER */
.card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em;
  color: var(--ink-dim);
  background: var(--paper-2);
  flex-wrap: wrap; gap: 12px;
}
.foot-credit { display: flex; align-items: center; gap: 10px; }
.foot-credit svg { color: var(--moss); }
.foot-credit strong { color: var(--ink); font-weight: 500; }

/* NAV */
.nav {
  position: sticky; bottom: 16px;
  margin: 16px 56px;
  display: flex; gap: 8px; justify-content: center;
}
.nav button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .1em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--moss);
  background: var(--moss);
  color: var(--paper);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -8px rgba(31,42,34,.4);
}
.nav button:disabled { opacity: .3; cursor: not-allowed; }
.nav button:not(:disabled):hover { background: var(--moss-deep); border-color: var(--moss-deep); }
.nav-index { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; }
.nav-index:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* index-actions row */
.index-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ────────────────────────────────────────
   ÉTIQUETTES à imprimer
   ──────────────────────────────────────── */
.etiquettes { padding: 48px 56px 56px; }
.eti-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 24px; margin-bottom: 32px;
  flex-wrap: wrap;
}
.eti-intro { max-width: 560px; color: var(--ink-2); margin: 12px 0 0; text-wrap: pretty; }
.eti-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.eti {
  border: 1px dashed var(--rule);
  background: var(--paper);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  break-inside: avoid; page-break-inside: avoid;
}
.eti-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: var(--ink-dim); }
.eti-body { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.eti-text { display: flex; flex-direction: column; gap: 6px; }
.eti-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.05; color: var(--ink); }
.eti-latin { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--moss); font-style: italic; }
.eti-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.eti-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); display: flex; gap: 6px; flex-wrap: wrap; }
.eti-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eti-qr .qr svg, .foot-qr .qr svg { display: block; border: 1px solid var(--rule); }
.eti-qr-cap { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }
.eti-foot { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); border-top: 1px dashed var(--rule); padding-top: 8px; }

.eti-url { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.eti-url label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.eti-url input { font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); min-width: 280px; }
.eti-url input:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
.eti-url-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); }
.eti-url code { background: var(--paper-2); padding: 1px 6px; border-radius: 2px; }

@media print {
  body { background: #fff !important; padding: 0; }
  body::before { display: none; }
  .app { max-width: none; }
  .etiquettes { padding: 0; box-shadow: none; }
  .etiquettes::before { display: none; }
  .no-print { display: none !important; }
  .eti { border: 1px dashed #999; padding: 12mm 10mm; min-height: 85mm; }
  @page { size: A4; margin: 8mm; }
}

/* ────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────── */
@media (max-width: 880px) {
  body { padding: 16px 8px 60px; }
  .cover-frame { padding: 36px 24px; margin: 8px; }
  .cover-grid { grid-template-columns: 1fr; gap: 24px; }
  .index { padding: 32px 20px; }
  .index-title { font-size: 40px; }
  .card-head { padding: 32px 24px 20px; }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .quick-item:nth-child(2) { border-right: none; }
  .quick-item:nth-child(1), .quick-item:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .body { grid-template-columns: 1fr; }
  .body-left { border-right: none; border-bottom: 1px solid var(--rule); }
  .body-right { padding: 24px; }
  .uses { grid-template-columns: 1fr; }
  .use { border-right: none; border-bottom: 1px solid var(--rule); }
  .use:last-child { border-bottom: none; }
  .card-foot { padding: 18px 24px; }
  .nav { margin: 12px 16px; }
}