/* partage.css — pages du service de partage Zetabot. Jetons : zm-tokens.css (Zetamind Rév. 6, clair ET sombre).
   Aucune couleur en dur : var(--…) seulement. Un seul bouton plein par écran (inversion : var(--texte) sur var(--fond)).
   Pas de carte, pas d'ombre : espace et filet. Cibles ≥ 44 px, bouton principal 52 px sur les pages pleines. */
.zm-i { flex: none; display: block; }
h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; }

/* --- cadre d'aperçu --- */
body.vue { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.barre { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 10px 20px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--filet); }
.barre-titre { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texte-2); }
.barre-titre h1 { color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.apercu { flex: 1; min-height: 0; display: flex; }
.apercu iframe { flex: 1; width: 100%; height: 100%; border: 0; background: var(--fond); }

/* --- boutons --- */
a.principal, button.principal, a.secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: opacity var(--duree) ease; }
a.principal, button.principal { background: var(--texte); color: var(--fond); }
a.secondaire { background: var(--surface); color: var(--texte); }
button.principal.large { width: 100%; min-height: 52px; font-size: 17px; }
button.principal:disabled { opacity: .4; cursor: not-allowed; }
a.principal:hover, a.secondaire:hover, button.principal:not(:disabled):hover { opacity: .86; }
@media (max-width: 520px) { .barre-actions span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  a.principal, a.secondaire { width: 44px; padding: 0; } }

/* --- page héros (pas d'aperçu) et pages centrées (code, erreurs) --- */
.heros, .porte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.heros p, .porte p { margin: 0; }
.heros-titre { font-size: 22px; font-weight: 500; overflow-wrap: anywhere; }
.cercle { width: 72px; height: 72px; margin-bottom: 12px; border-radius: 999px; border: 1.5px solid var(--trait-icone);
  display: flex; align-items: center; justify-content: center; color: var(--texte); }
body.centre { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.porte h1 { font-size: 22px; font-weight: 500; }
.porte form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; text-align: left; }
.porte label { padding-left: 4px; }
.porte input { width: 100%; height: 52px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; background: var(--surface);
  color: var(--texte); font: inherit; font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; text-align: center;
  letter-spacing: .3em; }
.porte input:focus { outline: none; border-color: rgba(var(--avant-rgb), .64); }
.porte input:disabled { opacity: .5; }
.porte input::placeholder { color: var(--texte-3); }
.etat { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--texte-2); font-size: 13px; }
.point { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.point.ko { background: var(--rouge); }
.point.ok { background: var(--vert); }
.porte .zm-source { margin-top: 12px; }

/* --- pied : source + bascule du thème --- */
.pied { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 4px 20px; padding-bottom: max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); }
body.centre .pied { border-top: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }