/* Version grand public : accueil, visite guidée, panier. Mêmes jetons de couleur que l'application. */
:root { --vert: #2f6b3a; --vert-pale: #e6efe3; }
@media (prefers-color-scheme: dark) { :root { --vert: #7fbf86; --vert-pale: #1f2b20; } }

body.public header h1 { color: var(--vert); }
body.public #b-ident, body.public #j-importer, body.public .j-telegram { display: none; }
#mes-jardins { flex-shrink: 0; width: auto; max-width: 220px; }

/* Accueil plein écran */
#jp-accueil { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--fond);
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  display: flex; justify-content: center; transition: opacity .5s; }
#jp-accueil.parti { opacity: 0; pointer-events: none; }
.jp-boite { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 14px; padding-top: 6vh; }
.jp-sur { margin: 0; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--vert); }
.jp-boite h2 { text-transform: none; letter-spacing: normal; color: var(--encre); margin: 0; font: 600 clamp(26px, 5vw, 38px)/1.12 Georgia, "Iowan Old Style", serif; text-wrap: balance; }
.jp-texte { margin: 0; font-size: 15px; line-height: 1.55; color: var(--encre-2); max-width: 62ch; }
#jp-form { display: flex; flex-direction: column; gap: 6px; position: relative; }
#jp-form label { font-weight: 600; font-size: 13px; }
.jp-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#jp-adr { flex: 1; min-width: 0; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--ligne-forte); border-radius: 10px; background: var(--panneau); }
#jp-adr:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.jp-prim { font-size: 15px; font-weight: 600; padding: 12px 18px; border-radius: 10px; border: 0; background: var(--vert); color: #fff; cursor: pointer; }
.jp-prim:disabled { opacity: .45; cursor: default; }
.jp-prim:focus-visible, #jp-sugg button:focus-visible, .jp-carte polygon:focus-visible { outline: 3px solid var(--vert-pale); outline-offset: 2px; }
#jp-sugg { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
#jp-sugg:not(:empty) { border: 1px solid var(--ligne); background: var(--panneau); }
#jp-sugg button { text-align: left; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--ligne); background: none; font-size: 14px; cursor: pointer; }
#jp-sugg button:hover { background: var(--vert-pale); }
.jp-adresse { margin: 0; font-weight: 600; font-size: 15px; }
.jp-carte { width: 100%; max-width: min(100%, 460px); margin-inline: auto; aspect-ratio: 1; border-radius: 12px; display: block; background: var(--ligne); }
.jp-carte polygon { fill: transparent; stroke: #fff; stroke-opacity: .75; stroke-width: 1.5; cursor: pointer; }
.jp-carte polygon:hover { fill: rgba(255, 255, 255, .18); }
.jp-carte polygon.pris { fill: rgba(127, 191, 134, .38); stroke: #d8f5c8; stroke-width: 3; stroke-opacity: 1; }
.jp-point { fill: #fff; stroke: #1c5cab; stroke-width: 3; pointer-events: none; }
.jp-bas { justify-content: space-between; font-variant-numeric: tabular-nums; }
.jp-etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.jp-etapes li { padding-left: 28px; position: relative; color: var(--encre-3); }
.jp-etapes li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ligne-forte); }
.jp-etapes li.fait { color: var(--encre); }
.jp-etapes li.fait::before { background: var(--vert); border-color: var(--vert); }
.jp-etapes li.encours { color: var(--encre); font-weight: 600; }
.jp-etapes li.encours::before { border-color: var(--vert); border-top-color: transparent; animation: jp-tour 0.9s linear infinite; }
.jp-etapes li.rate::before { border-color: var(--alerte); }
@keyframes jp-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jp-etapes li.encours::before { animation: none; } #jp-accueil { transition: none; } }
.jp-attente { color: var(--encre-2); margin: 0; }
.jp-erreur { color: var(--alerte); margin: 0; }
.jp-pied { margin: 12px 0 0; font-size: 12px; color: var(--encre-3); line-height: 1.5; }

/* Visite guidée : une carte en bas à droite, ou en bas sur téléphone */
#jp-visite { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: calc(70px + env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 32px)); background: var(--panneau); border: 1px solid var(--ligne-forte); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
#jp-visite h3, .jp-panier h3 { text-transform: none; letter-spacing: normal; color: var(--encre); }
#jp-visite h3 { margin: 0; font: 600 18px/1.2 Georgia, serif; }
#jp-visite p { margin: 0; line-height: 1.5; }
#jp-visite .jp-ligne { justify-content: flex-end; margin-top: 4px; }
#jp-visite .jp-prim { padding: 8px 14px; font-size: 14px; }
#jp-passer { background: none; border: 0; color: var(--encre-2); cursor: pointer; }

/* Panier de la liste de plantation */
.jp-panier { margin: 10px 0 14px; padding: 14px 16px; border-radius: 12px; background: var(--vert-pale); display: flex; flex-direction: column; gap: 6px; }
.jp-panier h3 { margin: 0; font: 600 17px/1.2 Georgia, serif; }
.jp-panier p { margin: 0; color: var(--encre-2); }
.jp-panier ul { margin: 0; padding-left: 18px; columns: 2 180px; }
.jp-panier button { align-self: flex-start; }