/* pollen.works — socle commun des 20 accueils (jetons + prairie + bouton ; chaque variante fait sa mise en page) */
/* polices : <link> + preconnect posés par site/seo.mjs (un @import CSS bloquait le rendu) */

:root {
  /* DA « Field poppy » (choisie le 04/11 sur la planche apercu/brand/da) ; avant : vert sapin #13261a, or #e8b923.
     fond sombre depuis le 04/11 (avant : papier #eef1e4 puis #d6ddc3, encre #2a1212) : la planche passe en négatif,
     le vert sapin devient le papier, l'encre devient le vert pâle */
  --paper: #170b0b;          /* fond : vert sapin profond */
  --paper-2: #2a1212;        /* cartouche : le vert sapin de la DA */
  --ink: #f7e9e4;            /* trait : vert pâle du papier d'origine */
  --ink-2: #c8a8a0;          /* texte secondaire */
  --ink-on-pollen: #170b0b;  /* texte posé sur le jaune pollen */
  --rule: rgba(247, 233, 228, .18);   /* filet fin */
  --rule-strong: rgba(247, 233, 228, .45);
  --pollen: #e8462d;         /* accent unique : pollen */
  --pollen-soft: rgba(232, 70, 45, .28);
  --f-title: "Instrument Serif", Georgia, serif;   /* police B choisie le 04/11 : un seul poids, 400 */
  --f-num: "JetBrains Mono", ui-monospace, monospace;
  --f-math: "STIX Two Text", "Cambria Math", serif;
  --f-text: "Instrument Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.math { font-family: var(--f-math); font-style: italic; }
.title { font-family: var(--f-title); font-weight: 400; letter-spacing: -.01em; }
.plate-no { font: 400 .72rem/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* bouton principal : même comportement partout, la variante peut changer la forme */
.btn-plant {
  display: inline-flex; align-items: center; gap: .55em;
  font: 500 .98rem/1 var(--f-text); letter-spacing: 0;
  color: var(--ink-on-pollen); background: var(--pollen);
  border: 1px solid var(--pollen); border-radius: 999px; padding: .9em 1.45em; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-plant:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--ink-2); }
.btn-plant:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-quiet {
  display: inline-flex; align-items: center; gap: .4em; font: 500 .95rem/1 var(--f-text); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; padding: .9em .2em;
}

/* la prairie (prairie.js) */
[data-meadow] { position: relative; }
.meadow-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flower { cursor: pointer; outline: none; }
/* fleur dessinée (prairie.js > dessiner) : trait pâle par-dessus, silhouette dorée dessous, remplie par le pollen reçu */
.flower .sil { opacity: calc(.06 + var(--fill, 0) * .48); transition: opacity .8s ease; }
.flower .ink { transition: opacity .3s ease; }
.flower .heart { fill: none; stroke: none; }
.flower.is-fruit .heart { fill: var(--pollen); stroke: var(--paper); stroke-width: 1.5; }
.flower.is-cut .sil { opacity: 0; }
.flower.is-cut .ink { opacity: .38; }
.flower:hover .ink { opacity: .85; }
.flower.is-hit .petals { animation: pollinate .9s ease; transform-origin: center; transform-box: fill-box; }
.flower:focus-visible .heart { stroke: var(--pollen); stroke-width: 3; fill: none; }
.flower-label { font: 500 13px/1 var(--f-num); fill: var(--ink); text-anchor: middle; }
.flower-demo { font: 400 10px/1 var(--f-num); fill: var(--ink-2); text-anchor: middle; letter-spacing: .08em; }
.trail { fill: none; stroke: var(--pollen); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; transition: opacity 2.4s ease; }
.trail.is-fading { opacity: 0; }
.trail-mask { fill: none; stroke: var(--paper); stroke-width: 5; }
.bee { fill: var(--pollen); stroke: var(--paper); stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(232, 70, 45, .8)); }
@keyframes pollinate { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* journal des vols */
[data-log] { list-style: none; margin: 0; padding: 0; font: 400 .8rem/1.55 var(--f-num); }
[data-log] li:first-child { color: var(--ink); font-weight: 700; }
[data-log] li { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* emplacement d'une gravure (générée à l'extérieur, pas dessinée ici) */
.asset-slot {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--rule-strong); color: var(--ink-2); background: color-mix(in oklab, var(--paper-2) 50%, transparent);
  font: 400 .7rem/1.3 var(--f-num); letter-spacing: .06em; padding: .6rem;
}
.asset-slot::before { content: "ENGRAVING · " attr(data-asset); }

/* les gravures générées (Flux, assets-src/cut.py → /static/planches), posées dans les emplacements sans toucher aux pages */
.asset-slot[data-asset="bee-engraving"] { --art: url(/static/planches/bee.webp); }
.asset-slot[data-asset="pollen-grain-engraving"] { --art: url(/static/planches/grain.webp); }
.asset-slot[data-asset="flower-plate-side-view"], .asset-slot[data-asset="herbarium-specimen"] { --art: url(/static/planches/side.webp); }
.asset-slot[data-asset="fruit-engraving"] { --art: url(/static/planches/fruit.webp); }
.asset-slot[data-asset="bee-engraving"], .asset-slot[data-asset="pollen-grain-engraving"], .asset-slot[data-asset="flower-plate-side-view"],
.asset-slot[data-asset="herbarium-specimen"], .asset-slot[data-asset="fruit-engraving"] {
  border-color: transparent; background-image: var(--art); background-repeat: no-repeat; background-position: center;
  background-size: contain; background-origin: content-box; padding: 12%;
}
.asset-slot[data-asset="bee-engraving"]::before, .asset-slot[data-asset="pollen-grain-engraving"]::before,
.asset-slot[data-asset="flower-plate-side-view"]::before, .asset-slot[data-asset="herbarium-specimen"]::before,
.asset-slot[data-asset="fruit-engraving"]::before { content: none; }

.demo-tag { font: 500 .66rem/1 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--ink); padding: .3em .55em; border-radius: 2px; background: var(--paper); }

/* tag de provenance, en bas à droite de chaque variante (enlevé en production) */
.uil-source {
  position: fixed; right: 8px; bottom: 8px; z-index: 999;
  font: 400 10px/1.2 var(--f-num); color: var(--ink);
  background: rgba(0, 0, 0, .55); padding: 4px 6px; border-radius: 2px; pointer-events: none;
}

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