@font-face {
  font-family: 'InterV';
  src: url('/static/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GroteskV';
  src: url('/static/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ECOMHUB — PORTE
   Bâti sur static/socle.css. Une seule surface, une seule action : entrer.
   · apple-design §16 « purpose » : l'écran ne demande que ce qui est nécessaire.
   · §12 : la carte est une matière translucide posée sur un fond calme ; le
     texte garde un contraste élevé parce qu'il est sur une couche, pas dans la
     translucidité.
   · §15 : police système, approche négative sur le titre, corps à 0.
   ═══════════════════════════════════════════════════════════════════════════ */

body.porte-page {
  --accent: #2b52f0;
  --accent-ink: #1b3fd0;
  font-family: 'InterV', system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 3rem) 1rem;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--bg);
}

.bg-wrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.grad-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .18;
}
.g1 { width: 34rem; height: 34rem; top: -14rem; left: -10rem; background: var(--accent); }
.g2 { width: 26rem; height: 26rem; right: -10rem; top: 22%; background: color-mix(in srgb, var(--accent) 60%, #34c759); opacity: .12; }
.g3 { display: none; }
.grain, .grid-overlay { display: none; }

.porte { position: relative; z-index: 1; width: 100%; max-width: 25rem; }

.porte-carte {
  padding: 1.6rem 1.5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--chrome);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-l), inset 0 1px 0 rgba(255, 255, 255, .5);
  transform: none;
  opacity: 1;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  @starting-style { transform: scale(.96); opacity: 0; }
}


.porte-tete { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.4rem; }
.logo-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.porte-marque { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.porte-marque b { font-family: 'GroteskV', system-ui, sans-serif; font-size: .86rem; font-weight: 600; letter-spacing: -.01em; }
.porte-marque small { font-size: .7rem; color: var(--mut); }

h1#porte-titre {
  font-family: 'GroteskV', system-ui, sans-serif;
  margin: 0 0 .3rem;
  font-size: clamp(1.6rem, 5vw, 1.9rem);
  letter-spacing: -.024em;
  line-height: 1.05;
}
.porte-sous { margin: 0 0 1.3rem; color: var(--mut); font-size: .84rem; line-height: 1.5; }

.porte-form { display: flex; flex-direction: column; }

.porte-champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .7rem; }
.porte-champ > span { font-size: .72rem; font-weight: 550; color: var(--mut); }
.porte-champ input {
  height: 2.5rem;
  width: 100%;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.porte-champ input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.porte-bouton.btn {
  width: 100%;
  height: 2.65rem;
  margin-top: .35rem;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--r-s);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 80%, black);
}
.porte-bouton.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .porte-bouton.btn:hover { filter: brightness(1.06); }
}
.porte-bouton.btn svg { width: 15px; height: 15px; }

.porte-erreur {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .9rem; padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius: var(--r-s);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: .78rem;
  line-height: 1.4;
}
.porte-erreur svg { flex: none; }

.porte-note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line-2);
  color: var(--mut);
  font-size: .7rem;
  line-height: 1.6;
}

.porte-pied {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1rem;
  font-size: .72rem;
  color: var(--faint);
}
.porte-pied a { color: var(--mut); }
@media (hover: hover) and (pointer: fine) {
  .porte-pied a:hover { color: var(--ink); }
}
.porte-sep { opacity: .5; }

@media (max-width: 420px) {
  .porte-carte { padding: 1.3rem 1.1rem 1rem; border-radius: var(--r-m); }
}

@media (prefers-reduced-motion: reduce) {
  .porte-carte { transform: none !important; transition: opacity 200ms ease; }
}

@media (prefers-reduced-transparency: reduce) {
  .porte-carte { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bg-wrap { display: none; }
}

@media (prefers-contrast: more) {
  .porte-carte { background: var(--surface); border-color: var(--ink); }
  .porte-champ input { border-color: var(--ink); }
  .porte-note, .porte-pied { color: var(--ink-2); }
}