/* ============================================================================
   demo-porte.css — La porte de la démonstration (embed.php, demo-porte.js).
   ============================================================================
   Une iframe prend la hauteur de son contenu : une fenêtre centrée sur elle
   tomberait au milieu d'un formulaire d'un mètre cinquante, hors de la vue du
   visiteur. La boîte est donc ancrée EN HAUT, par-dessus le formulaire flouté.
   ========================================================================== */
body.embed{ position:relative; }

.demoPorte{
  position:absolute; inset:0; z-index:60;
  display:flex; justify-content:center; align-items:flex-start;
  padding:clamp(16px, 4vw, 40px) 16px;
  background:color-mix(in oklab, var(--bg, #faf8ff) 55%, transparent);
}
.demoPorte[hidden]{ display:none; }

body.demoPorteOuverte .shell{
  filter:blur(3px);
  pointer-events:none;
  user-select:none;
  min-height:560px;            /* de quoi loger la boîte même si le formulaire est court */
}

.demoPorte__boite{
  width:min(460px, 100%);
  padding:clamp(20px, 4vw, 28px);
  border:1px solid var(--border-soft, #e4dcfb);
  border-radius:var(--r-lg, 18px);
  background:var(--card, #fff);
  color:var(--text, #221145);
  box-shadow:0 18px 50px -18px rgba(34, 17, 69, .35);
}
.demoPorte__surtitre{
  margin:0 0 6px;
  font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-strong, #6d3fe0);
}
.demoPorte__titre{ margin:0 0 8px; font-size:1.3rem; line-height:1.25; }
.demoPorte__texte{ margin:0 0 16px; color:var(--muted, #5b5675); line-height:1.5; }
.demoPorte__form{ display:flex; flex-direction:column; gap:10px; margin:0; }
.demoPorte__form label{ font-weight:700; font-size:.92rem; }
.demoPorte__form input{
  width:100%; min-height:46px; padding:10px 12px;
  border:1px solid var(--border, #d9d2f0); border-radius:var(--r-md, 12px);
  background:var(--input, #fff); color:inherit; font:inherit;
}
.demoPorte__form input[aria-invalid="true"]{ border-color:var(--danger, #b91c1c); }
.demoPorte__form .btn{ width:100%; justify-content:center; min-height:48px; }
.demoPorte__erreur{ margin:0; color:var(--danger-text, #b91c1c); font-size:.88rem; font-weight:600; }
.demoPorte__info{ margin:14px 0 0; font-size:.78rem; line-height:1.45; color:var(--muted, #5b5675); }
.demoPorte__info a{ color:inherit; }