/* Porte de Nextfile (nxf-porte) : page de connexion à la charte (doctrine graphique, § 2 à § 9). Feuille autonome,
   servie par la porte : jetons, titre sobre, carte de niveau 1, bouton bombé, focus visible. Aucun style en ligne. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/porte/archivo.woff2) format('woff2');
}

:root {
  color-scheme: light dark;
  --next: #4285F4; --marine: #253B80; --action: #2456E6; --alerte: #B91C1C; --succes: #15803D;
  --encre: #0F1C3D; --encre-douce: #5B6880; --fond: #F7F9FE; --surface: #FFFFFF; --retrait: #EDF1F9;
  --filet: #DCE3F0; --bord: #78859F;
  --surface-galbee: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #F2F5FC 100%);
  --relief-1: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(15,28,61,.06), 0 4px 8px -2px rgba(15,28,61,.08),
    0 22px 40px -14px rgba(37,59,128,.28);
  --bombe: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(15,28,61,.22), 0 1px 2px rgba(15,28,61,.10),
    0 8px 18px -8px rgba(36,86,230,.55);
}
@media (prefers-color-scheme: dark) {
  :root {
    --marine: #C9D3EC; --action: #7AA7F8; --alerte: #FF6B63; --succes: #4ADE80; --encre: #E8EEF9;
    --encre-douce: #A3B0C8; --fond: #0F1623; --surface: #161E2E; --retrait: #1B2436; --filet: #263049;
    --bord: #6B7AA0;
    --surface-galbee: linear-gradient(180deg, #1A2335 0%, #161E2E 40%, #131A28 100%);
    --relief-1: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.30), 0 22px 40px -14px rgba(0,0,0,.55);
    --bombe: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 0 rgba(15,28,61,.30), 0 8px 18px -8px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--fond); color: var(--encre);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem); line-height: 1.6;
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.porte { width: 100%; max-width: 30rem; }
.marque { margin: 0 0 22px; }
.marque img {
  display: block; width: 176px; height: auto;
  padding: 12px 16px; margin-left: -16px; border-radius: 12px;
}
@media (prefers-color-scheme: dark) {
  .marque img { background: #FFFFFF; margin-left: 0; }
}
h1 {
  margin: 0; color: var(--marine);
  font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.75rem); font-weight: 650; line-height: 1.15; letter-spacing: -.01em;
}
.appui { margin: 12px 0 0; color: var(--encre-douce); max-width: 34em; }
.carte {
  margin: 28px 0 0; padding: 26px 24px;
  border-radius: 24px; background: var(--surface-galbee); box-shadow: var(--relief-1);
}
.carte h2 {
  margin: 0 0 6px; color: var(--marine);
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); font-weight: 600; line-height: 1.3;
}
.carte p { margin: 0 0 16px; font-size: .9375rem; line-height: 1.5; color: var(--encre-douce); }
label { display: block; margin: 0 0 6px; font-weight: 600; }
input[type=email] {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); color: var(--encre);
  font: inherit; box-shadow: 0 1px 2px rgba(15,28,61,.06);
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin: 16px 0 0; padding: 0 22px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #3A69EE 0%, #2456E6 55%, #1E4BD0 100%); color: #FFFFFF;
  font: inherit; font-weight: 600; box-shadow: var(--bombe);
  transition: transform .18s cubic-bezier(.22,.8,.24,1), box-shadow .18s cubic-bezier(.22,.8,.24,1);
}
.bouton:active { transform: scale(.995) translateY(1px); }
input[type=email]:focus-visible, .bouton:focus-visible {
  outline: 2px solid var(--next); outline-offset: 2px;
}
.message { padding: 12px 14px; border-radius: 10px; font-size: .9375rem; line-height: 1.5; }
.carte .message-ok { color: var(--encre); background: var(--retrait); border-left: 4px solid var(--succes); }
.carte .message-alerte { color: var(--alerte); background: var(--retrait); border-left: 4px solid var(--alerte); font-weight: 600; }
.pied { margin-top: 28px; font-size: .875rem; color: var(--encre-douce); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton:active { transform: none; } }
@media (prefers-contrast: more) {
  .carte, .bouton { background: var(--surface); }
  .bouton { background: #2456E6; box-shadow: none; }
}