/* ══ LE THÈME HORS DE L'ESPACE (30/10/2026) ══════════════════════════════════════════
   Fondateur : « le site, les pages d'inscription, le parcours d'onboarding et même les
   mails sont dans l'ancien format ; refonds toutes les pages qui ne sont pas dans le
   nouveau thème ». Les pages publiques (connexion, inscription, mot de passe, parcours,
   rendez-vous, pages d'apporteur, essai terminé…) prennent le DÉCOR de l'espace client :
   le fond violet profond, les cartes de verre, les titres en dégradé, les boutons en
   pilule. Une page publique pose `<body class="espace-public">` et charge, dans cet
   ordre : `charte.css`, `jeu.css` (boutons, choix, filtres, pièces `jeu-*`), puis
   cette feuille.

   ⚠️ UNE SEULE AUTORITÉ : les couleurs et les polices sont celles de la charte, les
   pièces celles de `jeu.css`. Ce fichier ne porte que ce qui manque HORS de l'espace :
   le fond de page, la carte publique, les champs de saisie, la marque. Une page n'écrit
   pas sa propre version d'une de ces pièces.
   ⚠️ L'espace de l'ÉQUIPE n'est jamais concerné (fondateur, 30/10/2026). */

/* ── Le fond : l'ambiance de l'espace, des halos violet et rose, un ciel de points ── */
body.espace-public {
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(139,127,224,.30), transparent 70%),
    radial-gradient(50% 45% at -10% 105%, rgba(244,114,182,.14), transparent 70%),
    radial-gradient(40% 35% at 50% 50%, rgba(139,127,224,.05), transparent 70%),
    var(--background);
  background-attachment: fixed;
  color: var(--foreground);
}
body.espace-public::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(180,168,255,.55), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(244,114,182,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 72%, rgba(252,211,77,.35), transparent 60%),
    radial-gradient(1px 1px at 30% 84%, rgba(180,168,255,.45), transparent 60%),
    radial-gradient(1px 1px at 90% 58%, rgba(180,168,255,.40), transparent 60%);
}

/* ── La marque : le logo seul, comme dans l'espace ── */
.pub-marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); }
.pub-marque img { height: 30px; width: auto; display: block; }

/* ── LE MÉDAILLON DE LA MARQUE (31/10/2026, fondateur : « le logo, il faut vraiment
   qu'il soit mis de façon à ce que le client se dise : waouh, j'adore ce logo ») :
   le logo blanc dans un disque de verre, un anneau violet, rose et or (le liseré des
   cartes) qui tourne lentement, et un halo qui respire. Immobile sous
   `prefers-reduced-motion`. ⚠️ La vitrine (`landing/index.html`) en porte la copie
   `.hero-medaillon` : elle est servie à part et ne charge pas cette feuille. ── */
.pub-medaillon { position: relative; isolation: isolate; display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%; text-decoration: none;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 52%),
    radial-gradient(circle at 50% 62%, rgba(139,127,224,.38), rgba(16,17,27,.96) 72%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px -12px rgba(0,0,0,.85),
              0 0 56px -4px rgba(139,127,224,.55); }
.pub-medaillon::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, #8B7FE0, #F472B6, #FCD34D, #8B7FE0 60%, #8B7FE0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pub-medaillon-tour 9s linear infinite; }
.pub-medaillon::after { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,127,224,.45), rgba(244,114,182,.12) 45%, transparent 70%);
  animation: pub-medaillon-souffle 4.5s ease-in-out infinite; }
.pub-medaillon img { height: 34px; width: auto; display: block;
  filter: drop-shadow(0 0 10px rgba(196,186,255,.65)); }
@keyframes pub-medaillon-tour { to { transform: rotate(360deg); } }
@keyframes pub-medaillon-souffle { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .pub-medaillon::before, .pub-medaillon::after { animation: none; } }

/* ── La carte publique : du verre, un liseré violet, un halo ──
   <div class="pub-carte"> … </div>   (`pub-carte--large` pour un formulaire long) */
.pub-carte {
  position: relative; isolation: isolate; width: 100%; max-width: 460px;
  padding: 30px 30px 26px; border-radius: var(--radius-xl, 22px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139,127,224,.16), transparent 60%),
    rgba(20,21,32,.78);
  border: 1px solid rgba(180,168,255,.20);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pub-carte--large { max-width: 640px; }

/* ── Le titre : le dégradé des en-têtes de l'espace ── */
.pub-titre, body.espace-public .pub-carte h1 {
  margin: 0; font-size: calc(clamp(1.6rem, 3.4vw, 2rem) * var(--echelle-texte, 1)); font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  background: linear-gradient(100deg, #fff 35%, var(--accent) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-sous-titre { margin: 8px 0 0; color: var(--muted-foreground); line-height: 1.6; }

/* ── Les champs : du verre sombre, un liseré qui s'allume au focus ── */
body.espace-public input[type=email], body.espace-public input[type=password],
body.espace-public input[type=text], body.espace-public input[type=tel],
body.espace-public input[type=number], body.espace-public input[type=date],
body.espace-public input[type=url], body.espace-public textarea {
  background: rgba(255,255,255,.035); color: var(--foreground);
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
body.espace-public input:focus-visible,
body.espace-public textarea:focus-visible {
  outline: none; border-color: rgba(180,168,255,.6); background: rgba(180,168,255,.06);
  box-shadow: 0 0 0 4px rgba(139,127,224,.18); }
body.espace-public ::placeholder { color: rgba(245,244,240,.38); }

/* ── Le bouton d'envoi d'un formulaire public, quand il n'est pas un `.btn` :
   le geste principal du jeu (même dégradé que `.btn-primary`). ── */
.pub-envoyer { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 1.4em; border-radius: var(--radius-pill); cursor: pointer;
  font: inherit; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(100deg, #7C6FD8, #A78BFA 55%, #C084FC);
  box-shadow: 0 8px 24px rgba(139,127,224,.32), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.pub-envoyer:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(139,127,224,.42); }
.pub-envoyer:disabled { opacity: .55; cursor: default; }
.pub-envoyer svg { width: 16px; height: 16px; }

/* ── Un lien de page publique ── */
.pub-lien { color: var(--accent); text-decoration: none; font-weight: 500; }
.pub-lien:hover { text-decoration: underline; }

/* ⚠️ Pas de flou sous 860 px : sur certains téléphones, `backdrop-filter` sur une
   grande carte donnait une page noire (garde de l'ancien socle des écrans publics). */
@media (max-width: 860px) {
  .pub-carte { -webkit-backdrop-filter: none; backdrop-filter: none; background:
    radial-gradient(120% 90% at 100% 0%, rgba(139,127,224,.16), transparent 60%), #151624; }
}
@media (max-width: 560px) {
  .pub-carte { padding: 22px 18px 20px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-envoyer { transition: none; }
}