/* Upset — pages publiques (upset.pro). Couleurs de DESIGN.md, thème sombre par défaut comme l'app. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/polices/BarlowCondensed_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/polices/BarlowCondensed_700Bold.ttf") format("truetype"); }
:root {
  --fond: #14161c;          /* encre de nuit */
  --surface: #1b1e26;       /* surface nuit */
  --texte: #eceee9;         /* texte craie */
  --texte-2: #b6bcc4;       /* texte brume */
  --filet: #2c303a;         /* filet nuit */
  --accent: #4fb89c;        /* émeraude de visée */
  --bandeau: #123b32;       /* émeraude profond */
  --teinte: #243a3b;        /* teinte émeraude */
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --texte-police: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fond: #f5f6f4; --surface: #e3e6e0; --texte: #171a24; --texte-2: #4b525d;
    --filet: #c5cabe; --accent: #1f6f5c; --teinte: #c8d5ce;
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.6 var(--texte-police); }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.bandeau { background: var(--bandeau); color: #eceee9; }
.bandeau .ligne { max-width: 760px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.bandeau a.marque { display: flex; align-items: center; gap: 10px; color: #eceee9; text-decoration: none; }
.bandeau img { width: 36px; height: 36px; display: block; }
.bandeau .nom { font: 600 24px/1 var(--display); letter-spacing: .01em; }
.bandeau .langues { margin-left: auto; font-size: 14px; }
.bandeau .langues a { color: #b6bcc4; }

main { max-width: 760px; margin: 0 auto; padding: 28px 16px 64px; }
h1 { font: 700 34px/1.15 var(--display); margin: 8px 0 6px; }
h2 { font: 600 24px/1.2 var(--display); margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--filet); }
h3 { font-size: 17px; margin: 24px 0 4px; }
p, li { color: var(--texte); }
.meta { color: var(--texte-2); font-size: 14px; margin: 0 0 20px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.carte { background: var(--surface); border-radius: 16px; padding: 18px 20px; margin: 18px 0; }
.carte p:first-child, .carte h3:first-child { margin-top: 0; }
.etapes { counter-reset: e; list-style: none; padding: 0; }
.etapes li { counter-increment: e; position: relative; padding-left: 40px; margin: 12px 0; }
.etapes li::before { content: counter(e); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--teinte); color: var(--texte); font: 700 16px/28px var(--display); text-align: center; }
.sep-langue { margin-top: 56px; padding-top: 8px; border-top: 2px solid var(--accent); }

/* accueil */
.accueil { min-height: 100vh; display: flex; flex-direction: column; }
.accueil main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.accueil .logo { width: 132px; height: 132px; margin-bottom: 16px; }
.accueil h1 { font-size: 44px; }
.accueil .accroche { color: var(--texte-2); max-width: 30em; }
.accueil .communaute { margin-top: 28px; width: 100%; max-width: 30em; }
.accueil .communaute h2 { margin: 0 0 4px; padding: 0; border: 0; font-size: 26px; }
.accueil .communaute p { color: var(--texte-2); margin: 0 0 16px; }
.accueil .communaute .en { font-size: 14px; margin: 14px 0 0; }
.bouton { display: inline-block; padding: 12px 22px; border-radius: 12px; background: var(--accent); color: var(--fond);
  font: 600 20px/1 var(--display); letter-spacing: .02em; text-decoration: none; }
.bouton:hover { filter: brightness(1.08); }
.accueil nav { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; font-size: 15px; }

footer { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; color: var(--texte-2); font-size: 13px; }

/* page d'invitation (/join/CODE) */
.rejoindre main { max-width: 560px; }
.rejoindre h2 { border: 0; padding-top: 0; }
.code-carte { text-align: center; padding: 24px 20px; }
.code-carte h2 { margin: 0 0 12px; font-size: 20px; color: var(--texte-2); }
.code-ligne { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.code { font: 700 44px/1 var(--display); letter-spacing: .14em; padding: 12px 18px; border-radius: 12px;
  background: var(--teinte); border: 1px solid var(--accent); font-variant-numeric: tabular-nums; }
.copier { font: 600 16px/1 var(--texte-police); color: var(--accent); background: transparent; border: 1px solid var(--accent);
  border-radius: 12px; padding: 12px 16px; min-height: 48px; cursor: pointer; }
.copier:focus-visible, .bouton:focus-visible, .magasin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copie { min-height: 1.6em; margin: 8px 0 4px; color: var(--texte-2); font-size: 14px; }
.code-carte .bouton { display: block; padding: 16px 22px; font-size: 22px; }
.aide { color: var(--texte-2); font-size: 14px; margin: 14px 0 0; }
.magasins { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 8px; }
.magasin { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--filet); color: var(--texte); text-decoration: none; min-height: 48px; }
.magasin .plateforme { font: 600 20px/1.1 var(--display); }
.magasin span:last-child { color: var(--texte-2); font-size: 15px; }
.rejoindre .carte h2 { margin-top: 0; }