/* Pages hors studio (ouverture par lien, session fermée) : design BeContent, clair seulement. */
@font-face { font-family: "Inter BeContent"; src: url("/polices/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter BeContent"; src: url("/polices/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter BeContent"; src: url("/polices/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --encre: #2a2320;
  --doux: #6f655d;
  --ivoire: #fbf9ff;
  --lavande: #f1ebff;
  --filet: #e9e4f0;
  --rose: #db2a6b;
  --danger: #b62d49;
  --degrade: linear-gradient(110deg, #ffce54, #ff783e 35%, #ff3f87 68%, #8951ff);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Inter BeContent", system-ui, sans-serif;
  color: var(--encre);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
}
.page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
}
.bloc { width: min(30rem, 100%); }
.marque { display: inline-flex; align-items: baseline; gap: .4rem; margin-bottom: 2.25rem; font-size: 1.05rem; }
.marque-nom {
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marque-studio { font-weight: 600; color: var(--encre); }
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .75rem; }
p { font-size: .95rem; line-height: 1.6; color: var(--doux); margin: 0; max-width: 34em; }
.trait {
  position: relative;
  height: 3px;
  margin-top: 1.75rem;
  border-radius: 3px;
  background: var(--lavande);
  overflow: hidden;
}
.trait::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 3px;
  background: var(--degrade);
  animation: glisse 1.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .trait::after { animation: none; width: 100%; opacity: .6; } }
[data-etat="erreur"] .trait { display: none; }
[data-etat="erreur"] h1 { color: var(--encre); }
.signe {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: .12em;
}
[data-etat="attente"] .signe { display: none; }