/* pages-publiques.css — Les pages HORS de l'app connectée, habillées comme l'écran
   de connexion « Constellation » (audit du 29/09/2026, section 4.3, écrans 6-7-8) :
     tenant-unknown.html (labo inconnu), signup.html (demander un accès),
     setup.html (premier réglage d'un nouveau labo).
   On RÉUTILISE le décor et la carte de login-constellation.css (.lgc-scene, .lgc-fx,
   .lgc-canvas, .lgc-card, .lgc-input, .lgc-btn, .lgc-theme-toggle) ; ce fichier ne
   porte que ce qui manque à une page de contenu : défiler quand la carte dépasse
   l'écran, une carte plus large, les libellés de formulaire, les messages et les
   étapes de l'assistant. Classes préfixées .pgp-*.
   Couleurs : tokens de style.css (--accent, --teal, --grad, --danger, --success…,
   repeints aux couleurs du labo par tenant-branding.js quand le labo est connu —
   setup.html) et tokens .lgc-* (clair/sombre de l'écran de connexion). Aucun hex :
   le mode nuit suit html[data-theme="dark"] (js/dark-mode.js : choix mémorisé,
   sinon réglage du système). */

/* ── Une page qui DÉFILE ────────────────────────────────────────────────────
   .lgc-scene est un calque fixe centré : parfait pour la carte courte de
   connexion, mais un formulaire plus haut que l'écran (téléphone, clavier ouvert)
   y serait coupé. Ici la scène redevient un bloc du flux (le document défile) et
   seul le DÉCOR reste fixe derrière (.pgp-decor). Le canvas garde un parent
   positionné (offsetParent non nul) : le moteur login-constellation.js le voit
   visible et l'anime. */
body.pgp-body { margin: 0; padding: 0; background: var(--bg); }
.lgc-scene.pgp-scene {
  position: relative; inset: auto; z-index: auto;
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  align-items: safe center; padding: 72px 16px 40px;
}
.pgp-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── Carte ── */
.lgc-card.pgp-card { width: 440px; box-sizing: border-box; animation: pgpRise var(--dur-slow) var(--ease-out) backwards; }
.lgc-card.pgp-card--large { width: 580px; }
.pgp-corps { text-align: left; }
@keyframes pgpRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Emblème : le halo et les anneaux du logo de connexion, en plus petit, autour
   d'un OBJET illustré (loupe, enveloppe…) quand la page n'a pas de logo de labo. */
.lgc-logo-wrap.pgp-embleme { width: 108px; height: 108px; margin-bottom: 12px; }
.ilx.pgp-objet { --ilx-t: 58px; position: relative; z-index: 4; animation: lgc-bob 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px var(--lgc-logo-shadow)); }

/* Titre de page (une phrase : pas la cursive réservée au NOM du labo). */
.pgp-titre { margin: 0 0 8px; font-size: 1.42rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
  color: var(--lgc-input-text); }
.pgp-lead { margin: 0 auto 6px; max-width: 46ch; font-size: .9rem; line-height: 1.6; color: var(--lgc-sub); }
.pgp-note { margin: 12px auto 0; max-width: 46ch; font-size: .78rem; line-height: 1.5; color: var(--lgc-foot); }
.pgp-puce { display: inline-block; max-width: 100%; margin: 2px 0; padding: 2px 9px; border-radius: 8px;
  font: 500 .82rem 'DM Mono', ui-monospace, monospace; word-break: break-all; vertical-align: baseline;
  color: var(--lgc-input-text); background: var(--lgc-input-bg); border: 1px solid var(--lgc-input-border); }

/* Un lien qui porte le bouton de connexion (.lgc-btn est prévu pour <button>). */
a.lgc-btn.pgp-btn-lien { box-sizing: border-box; text-align: center; text-decoration: none; }
.lgc-btn .ilx { margin-right: 6px; }

/* ── Formulaire ── */
.pgp-label { display: block; margin: 0 0 2px; text-align: left; font-size: .74rem; font-weight: 700;
  letter-spacing: .2px; color: var(--lgc-sub); }
.pgp-label .lgc-input { margin-top: 6px; font-weight: 500; letter-spacing: 0; }
.pgp-label .pgp-facultatif { font-weight: 500; color: var(--lgc-foot); }
.pgp-req { color: var(--danger); }
.pgp-grille { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.pgp-grille--2 { grid-template-columns: 1fr 1fr; }
textarea.lgc-input { resize: vertical; min-height: 88px; }
select.lgc-input { cursor: pointer; }
/* style.css habille TOUS les champs de l'app (input[type=text], textarea, select,
   et leur version nuit html[data-theme="dark"] input[…]) avec plus de spécificité
   que .lgc-input : sur ces pages qui chargent style.css, on redonne la main aux
   tokens de la carte de connexion (mêmes valeurs que .lgc-input, clair et nuit). */
.lgc-scene .pgp-card .lgc-input { height: auto; padding: 13px 16px; border: 1.5px solid var(--lgc-input-border); border-radius: 13px;
  font: 500 .92rem 'DM Sans', sans-serif; background: var(--lgc-input-bg); color: var(--lgc-input-text); }
/* Focus aux couleurs du labo (--teal), pas au turquoise fixe de la connexion. */
.lgc-scene .pgp-card .lgc-input:focus { border-color: var(--teal); background: var(--lgc-input-focus-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 26%, transparent); }
.pgp-case { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; text-align: left;
  font-size: .8rem; line-height: 1.45; color: var(--lgc-input-text); }
.pgp-case input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.pgp-case label { cursor: pointer; }
.pgp-aide { margin: 4px 0 12px; font-size: .78rem; line-height: 1.5; color: var(--lgc-foot); text-align: left; }

/* Messages (erreur / succès) — tokens : clair et nuit suivent seuls. */
.pgp-msg { margin-top: 14px; padding: 11px 14px; border-radius: 11px; font-size: .84rem; line-height: 1.45; text-align: left; }
.pgp-msg--err { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.pgp-msg--ok { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
html[data-theme="dark"] .pgp-msg--err { color: color-mix(in srgb, var(--danger) 55%, white); }
html[data-theme="dark"] .pgp-msg--ok { color: color-mix(in srgb, var(--success) 50%, white); }

/* Fin de parcours (demande envoyée, réglage terminé). */
.pgp-fin { text-align: center; padding: 6px 4px 2px; }
.pgp-fin .ilx.pgp-objet { --ilx-t: 64px; display: inline-grid; margin-bottom: 10px; }
.pgp-fin-titre { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; color: var(--success); }
html[data-theme="dark"] .pgp-fin-titre { color: color-mix(in srgb, var(--success) 50%, white); }

.pgp-pied { margin-top: 18px; text-align: center; font-size: .8rem; }
.pgp-pied a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none;
  color: var(--accent-text, var(--accent)); }
.pgp-pied a:hover { text-decoration: underline; }

/* ── Étapes de l'assistant (setup.html) ─────────────────────────────────────
   Même grammaire que la chaîne de progression partagée (js/chaine-progression.js) :
   un rail qui se remplit de gauche à droite au dégradé du labo, étape en cours
   allumée, étapes passées en vert — mais IMMOBILE (rien ne bouge pendant qu'on
   remplit un formulaire). setup-wizard.js pose .active / .done sur .wp-step. */
.pgp-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 22px; padding: 0; list-style: none; }
.pgp-etapes .wp-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
/* Le trait qui relie une étape à la précédente. */
.pgp-etapes .wp-step + .wp-step::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px;
  border-radius: 3px; background: var(--lgc-input-border); z-index: 0; }
.pgp-etapes .wp-step.active::before, .pgp-etapes .wp-step.done::before { background: var(--grad); }
.pgp-etape-n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: .82rem; font-weight: 800; color: var(--lgc-sub); background: var(--lgc-input-bg);
  border: 2px solid var(--lgc-input-border); box-sizing: border-box;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); }
.pgp-etape-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: var(--lgc-foot); }
.wp-step.active .pgp-etape-n { color: #fff; background: var(--grad); border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.wp-step.active .pgp-etape-l { color: var(--lgc-input-text); }
.wp-step.done .pgp-etape-n { color: #fff; background: var(--success); border-color: transparent; font-size: 0; }
.wp-step.done .pgp-etape-n::after { content: '✓'; font-size: .9rem; }
.wp-step.done .pgp-etape-l { color: var(--lgc-sub); }

/* Titre et pied de l'étape en cours. */
.pgp-etape-titre { margin: 0 0 4px; font-size: 1.08rem; font-weight: 800; color: var(--lgc-input-text); }
.pgp-etape-titre small { font-size: .74rem; font-weight: 700; color: var(--lgc-foot); margin-left: 4px; }
.pgp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.pgp-actions .pgp-pousse { margin-right: auto; }   /* « Précédent » à gauche, le reste à droite */
.pgp-actions .pmx-btn { padding: 10px 18px; font-size: .84rem; }
.pgp-actions .pmx-btn:disabled { opacity: .55; cursor: wait; transform: none; }

/* ── Téléphone ── */
@media (max-width: 480px) {
  .lgc-scene.pgp-scene { padding: 64px 12px 28px; }
  .lgc-card.pgp-card { padding: 30px 20px 24px; border-radius: 22px; }
  .pgp-titre { font-size: 1.25rem; }
  .pgp-grille { grid-template-columns: 1fr; gap: 0; }
  .pgp-etape-l { font-size: .66rem; }
  /* Trois boutons ne tiennent pas sur une ligne : l'action principale passe dessous, pleine largeur. */
  .pgp-actions .pmx-btn--save { flex: 1 0 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lgc-card.pgp-card, .ilx.pgp-objet { animation: none; }
  .pgp-etape-n { transition: none; }
}