/* ============================================================
   Vers le Jeu — la sortie du Sas (app/views/sas/vers_le_jeu.html.erb).

   Habillage demandé le 19 août : « l'esthétique du Sas dont elle est la
   sortie ». L'échafaudage du portable portait un fond sombre (#211921), qui
   est la palette du JEU — celle qu'on n'a pas encore atteinte quand on lit
   cette page. Le Sas est clair. Une page de seuil doit ressembler à ce qu'on
   quitte, pas à ce qu'on n'a pas encore.

   Feuille propre plutôt qu'emprunt à `/sas/reveil/styles.css` : cette page
   est la sortie des CINQ parcours, elle n'appartient à aucun. Elle ne reprend
   que ce dont elle a besoin — variables, coque, boutons.
   ============================================================ */

@font-face { font-family: Poppins; src: url("/sas/fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("/sas/fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url("/sas/fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Roboto Slab"; src: url("/sas/fonts/RobotoSlab.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #141a24; --ink-soft: #3a4453; --paper: #f3f5f9; --white: #fff;
  --line: #c9d0dc; --line-soft: #dde2ea; --muted: #616b7d;
  --violet: #82246f; --violet-soft: #f0e3ec;
  --radius: 10px; --shadow: 0 14px 40px rgba(20, 26, 36, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Poppins, system-ui, sans-serif;
}
.app-header {
  height: 64px; display: flex; align-items: center; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: rgba(243, 245, 249, .96);
}
.brand {
  display: flex; align-items: center; gap: 9px; color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: 12px; letter-spacing: .14em;
}
.brand img { width: 28px; height: 28px; object-fit: contain; }

.seuil { max-width: 720px; margin: 0 auto; padding: 48px 28px 72px; }
.eyebrow {
  margin: 0 0 8px; color: var(--violet); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.seuil h1 { margin: 0 0 10px; font: 700 32px/1.15 "Roboto Slab", Georgia, serif; }
.seuil > .lead { margin: 0 0 32px; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }

/* Les deux portes réelles. Le billet n'est PAS un lien : le geste se fait sur
   le billet lui-même, pas ici — un lien laisserait croire qu'on peut entrer
   depuis cette page. */
.porte {
  display: block; margin-bottom: 14px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: inherit; text-decoration: none;
  box-shadow: var(--shadow);
}
.porte h2 { margin: 0 0 8px; font: 600 18px "Roboto Slab", Georgia, serif; }
.porte p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.porte .marque {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  margin-bottom: 12px; border-radius: 50%;
  background: var(--violet-soft); color: var(--violet); font-size: 15px;
}
a.porte { transition: border-color .18s ease, transform .18s ease; }
a.porte:hover, a.porte:focus-visible {
  border-color: var(--violet); transform: translateY(-1px);
}
a.porte h2 { color: var(--violet); }

.regle {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft);
  color: var(--ink-soft); font-size: 14px; line-height: 1.55;
}
.retour { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
.retour a { color: inherit; }

@media (max-width: 560px) {
  .seuil { padding: 32px 18px 56px; }
  .seuil h1 { font-size: 26px; }
  .porte { padding: 18px 18px; }
}