/* /public/css/page-publique.css — socle des pages autonomes (core/PagePublique.php) :
   fond, carte, textes, boutons, roue. Jetons et composants : design-system.css, composants.css. */

*, *::before, *::after { box-sizing: border-box; }
body.pp {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background-color: var(--fond); background-image: var(--ib-bg-gradient);
  font-family: var(--police); color: var(--texte);
  -webkit-font-smoothing: antialiased;
}
.pp-carte {
  width: min(440px, 100%); padding: 28px 26px; border-radius: var(--r-xl);
  background: var(--surface-dense); border: 1px solid var(--surface-bord);
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--reflet), var(--ombre-flottante);
}
.pp-carte--centre { text-align: center; }
.pp-marque { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pp-marque img { height: 24px; width: auto; }
.pp-sep { width: 1px; height: 18px; background: var(--trait-fort); }
.pp-surtitre { margin: 0 0 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.pp-titre { margin: 0 0 8px; font-size: 1.625rem; font-weight: var(--g-leger); letter-spacing: -.02em; line-height: 1.15; }
.pp-texte { margin: 0; color: var(--texte-2); line-height: 1.5; }

.pp-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px;
  margin-top: 20px; padding: 0 20px; border: 0; border-radius: var(--r-pilule);
  background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-encre);
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s;
}
.pp-btn:hover { background: color-mix(in srgb, var(--encre) 88%, var(--accent)); }
.pp-btn:active { transform: scale(.98); }
.pp-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); }
.pp-btn--secondaire { background: var(--surface-pleine); color: var(--texte); border: 1px solid var(--trait-fort); box-shadow: none; }
.pp-btn--secondaire:hover { background: var(--creux); }

.pp-pastille { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--creux); color: var(--texte-2); }
.pp-pastille svg { width: 30px; height: 30px; }
.pp-pastille--succes { background: var(--succes-teinte); color: var(--succes); }
.pp-pastille--danger { background: var(--danger-teinte); color: var(--danger); }

/* Roue : arc d'encre à traîne (même dessin que .c-roue). */
.pp-roue {
  display: block; width: 32px; height: 32px; margin: 4px auto 18px; border-radius: 50%; color: var(--texte-2);
  background: conic-gradient(from 0deg, transparent 0 10%, color-mix(in srgb, currentColor 14%, transparent) 26%, currentColor 90%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: pp-tour .85s linear infinite;
}
@keyframes pp-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp-roue { animation-duration: 2.4s; } }