/* Kit commun Ohmi : barre, boutons, fiches, toasts. Servi à /_kit/plateforme.css.
   Tout est préfixé (.plf-*, --plf-*) : ce fichier ne touche jamais au style propre d'un site.
   Les sites qui veulent la DA « nuit » complète chargent aussi /_kit/theme-nuit.css.
   DA : A′ « Nuit épurée » (design/planche/) : traits fins, corail seul accent d'interface,
   ombre dure seulement sur l'action principale. */
:root {
  --plf-bg: #0c0d16;
  --plf-panel: #141629;
  --plf-panel-2: #1b1e36;
  --plf-ink: #05050b;
  --plf-line: #23264a;
  --plf-line-2: #363b63;
  --plf-fg: #eef1ff;
  --plf-muted: #8a90b8;
  --plf-laser: #ff4d5e;
  --plf-glass: #7fe3ff;
  --plf-amber: #ffc04d;
  --plf-ok: #5ef0a0;
  --plf-bad: #ff8a95;
  --plf-f-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --plf-f-body: "Nunito", system-ui, -apple-system, sans-serif;
  --plf-f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --plf-barre-h: 56px;
}

/* ---------------- barre ---------------- */
.plf-barre {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--plf-barre-h);
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: var(--plf-bg); color: var(--plf-fg);
  border-bottom: 1.5px solid var(--plf-line);
  font: 700 14px/1.2 var(--plf-f-body);
  box-sizing: border-box;
}
.plf-barre *, .plf-barre *::before, .plf-barre *::after { box-sizing: border-box; }
.plf-logo { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font: 700 21px/1 var(--plf-f-display); letter-spacing: -.01em; flex: none; }
.plf-logo .plf-omega { width: 30px; height: 30px; flex: none; }
.plf-logo:hover span { color: var(--plf-laser); }
/* Ω qui se remplit de bas en haut (progression) ; vert une fois accompli */
.plf-omega { overflow: visible; }
.plf-omega path { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.plf-omega .plf-o-vide { stroke: #262a4d; }
.plf-omega .plf-o-plein { stroke: var(--plf-laser); }
.plf-omega.plf-accompli .plf-o-plein { stroke: var(--plf-ok); }
.plf-omega rect { transition: y .4s ease; }
.plf-sep { color: var(--plf-line-2); font-weight: 400; }
.plf-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--plf-muted); }
.plf-espace { flex: 1; }

/* ---------------- boutons ---------------- */
.plf-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer;
  font: 700 14px/1 var(--plf-f-body); color: var(--plf-fg); text-decoration: none;
  background: transparent; border: 1.5px solid var(--plf-line); border-radius: 10px;
  padding: 8px 13px;
  transition: transform .08s, box-shadow .08s, border-color .15s;
}
.plf-btn:hover { border-color: var(--plf-muted); }
/* Seule l'action principale garde l'ombre dure de la DA : elle s'enfonce au clic. */
.plf-btn.plf-principal { background: var(--plf-laser); color: #1a0306; border: 2px solid var(--plf-ink); box-shadow: 3px 3px 0 var(--plf-ink); }
.plf-btn.plf-principal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--plf-ink); }
.plf-btn:focus-visible, .plf-logo:focus-visible { outline: 3px solid var(--plf-amber); outline-offset: 3px; }
.plf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plf-compteur { font: 600 12px/1 var(--plf-f-mono); color: var(--plf-fg); background: var(--plf-panel-2); border: 1px solid var(--plf-line); border-radius: 999px; padding: 3px 7px; }
@media (max-width: 560px) {
  .plf-lib { display: none; }
  .plf-btn { padding: 8px 10px; }
  .plf-logo span { display: none; }
}

/* ---------------- partage (repli manuel) ---------------- */
.plf-partage-pop {
  position: fixed; z-index: 60; left: 50%; top: calc(var(--plf-barre-h) + 12px); transform: translateX(-50%);
  display: grid; gap: 6px; width: min(340px, calc(100vw - 32px));
  background: var(--plf-panel-2); color: var(--plf-fg); border: 1.5px solid var(--plf-line); border-radius: 12px; padding: 10px 12px;
  font: 600 14px var(--plf-f-body);
}
.plf-partage-pop input { width: 100%; background: var(--plf-bg); color: var(--plf-fg); border: 2px solid var(--plf-line-2); border-radius: 8px; padding: 6px 8px; font: 500 13px var(--plf-f-mono); }

/* ---------------- toasts ---------------- */
.plf-toasts { position: fixed; z-index: 70; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.plf-toast {
  background: var(--plf-panel-2); color: var(--plf-fg); border: 1.5px solid var(--plf-line); border-radius: 12px;
  padding: 10px 14px; font: 600 15px/1.4 var(--plf-f-body);
  animation: plf-pop .25s cubic-bezier(.3, 1.6, .5, 1);
}
.plf-toast.plf-sortie { opacity: 0; transition: opacity .3s; }

/* ---------------- fiches du Carnet ---------------- */
.plf-fiche {
  background: var(--plf-panel); color: var(--plf-fg);
  border: 1.5px solid var(--plf-line); border-radius: 12px; padding: 14px 18px;
  font: 16px/1.55 var(--plf-f-body);
}
.plf-fiche h3 { margin: 0 0 6px; font: 700 18px/1.2 var(--plf-f-display); }
.plf-fiche ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.plf-fiche strong { color: var(--plf-laser); }
.plf-fiche em { color: var(--plf-fg); font-style: normal; font-weight: 700; }
.plf-fiche.plf-verrouillee { background: transparent; border-style: dashed; color: var(--plf-muted); }
.plf-fiche.plf-verrouillee p { margin: 0; }

@keyframes plf-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .plf-btn, .plf-toast, .plf-toast.plf-sortie, .plf-omega rect { transition: none; animation: none; }
}