/* ── portal/assets/styles.css ─────────────────────────────────────────────
   Feuille unique, sans préprocesseur ni chaîne de build : le portail doit
   pouvoir être servi par n'importe quel hébergeur de fichiers statiques, et
   relu intégralement par quiconque veut vérifier qu'il ne fait rien d'autre
   que ce qu'il annonce.

   Aucune police distante : la pile système évite une requête vers un tiers
   (voir le commentaire en tête d'index.html).
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #0e1116;
  --bg-soft:   #151a22;
  --bg-card:   #1a212b;
  --border:    #263140;
  --text:      #e6edf3;
  --text-soft: #9fb0c3;
  --text-dim:  #6b7d92;
  --accent:    #4dd4a8;
  --accent-dk: #21a37c;
  --accent-fg: #06231a;
  --radius:    14px;
  --maxw:      70rem;
}

/* Respect du réglage système. Le thème clair n'est pas un gadget : un portail
   illisible en plein jour est un portail qu'on quitte. */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #fbfcfd;
    --bg-soft:   #f2f5f8;
    --bg-card:   #ffffff;
    --border:    #dde4ec;
    --text:      #101720;
    --text-soft: #46586c;
    --text-dim:  #6b7d92;
    --accent:    #0f8f6a;
    --accent-dk: #0b6e51;
    --accent-fg: #ffffff;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; }

/* Empreintes et sommes de contrôle : une suite de 64 caractères sans espace ne
   rencontre aucun point de césure naturel et déborde de son conteneur — sur une carte
   étroite, la fin du hash est purement invisible. Or une empreinte tronquée ne permet
   aucune vérification : elle est pire qu'absente, puisqu'elle donne l'illusion d'en
   offrir une. `anywhere` autorise la coupure à n'importe quel caractère. */
.hash {
  overflow-wrap: anywhere;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }

/* Lien d'évitement : visible seulement au clavier. */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-fg);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header nav {
  max-width: var(--maxw); margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.brand {
  font-weight: 700; font-size: 1.15rem; letter-spacing: .02em;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent); margin-right: .35rem; }

.site-header ul {
  list-style: none; display: flex; gap: 1.4rem;
  margin: 0; padding: 0; align-items: center; flex-wrap: wrap;
}
.site-header a { color: var(--text-soft); text-decoration: none; font-size: .95rem; }
.site-header a:hover { color: var(--text); }

.nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  padding: .35rem .85rem; border-radius: 999px;
}
.nav-cta:hover { background: var(--accent); color: var(--accent-fg) !important; }

/* ── Accroche ────────────────────────────────────────────────────────── */

.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 5.5rem 1.25rem 4rem;
  text-align: center;
}

.eyebrow {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; font-weight: 600;
  color: var(--accent); margin: 0 0 1.1rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.9rem);
  line-height: 1.08; letter-spacing: -.02em;
  margin: 0 0 1.4rem; font-weight: 700;
}

.lede {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--text-soft);
  max-width: 44rem; margin: 0 auto 2.2rem;
}

.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 0 0 2rem; }

.hero-note {
  font-size: .9rem; color: var(--text-dim);
  max-width: 34rem; margin: 0 auto;
  border-top: 1px solid var(--border); padding-top: 1.4rem;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; padding: .72rem 1.5rem;
  border-radius: 999px; font-weight: 600; font-size: .97rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-dk); color: var(--accent-fg); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; }

.btn-ghost { border-color: var(--border); color: var(--text-soft); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

/* ── Sections ────────────────────────────────────────────────────────── */

.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: 4rem 1.25rem;
  border-top: 1px solid var(--border);
}

.section h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -.015em; margin: 0 0 .6rem;
}

.section-lede { color: var(--text-soft); margin: 0 0 2.2rem; max-width: 46rem; }

/* ── Cartes ──────────────────────────────────────────────────────────── */

.cards {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin: 0 0 .65rem; font-size: 1.06rem; line-height: 1.35; }
.card p  { margin: 0; color: var(--text-soft); font-size: .95rem; }
.card .ico { color: var(--accent); margin-right: .45rem; font-size: .8em; }

/* ── Encadré ─────────────────────────────────────────────────────────── */

.callout {
  margin-top: 2.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem;
}
.callout h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.callout p  { margin: 0 0 .8rem; color: var(--text-soft); font-size: .95rem; }
.callout p:last-child { margin-bottom: 0; }

/* ── Actualités ──────────────────────────────────────────────────────── */

.post {
  padding: 1.6rem 0;
  border-top: 1px solid var(--border);
  max-width: 48rem;
}
.post:first-of-type { border-top: none; }
.post time {
  display: block; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: .45rem;
}
.post h3 { margin: 0 0 .6rem; font-size: 1.18rem; line-height: 1.35; }
.post p  { margin: 0; color: var(--text-soft); }

/* ── Téléchargements ─────────────────────────────────────────────────── */

.downloads .card { display: flex; flex-direction: column; align-items: flex-start; }

.badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .22rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  margin-bottom: .85rem;
}

.dl-disabled {
  margin-top: 1.1rem;
  display: inline-block; padding: .6rem 1.2rem;
  border: 1px dashed var(--border); border-radius: 999px;
  color: var(--text-dim); font-size: .9rem; font-weight: 600;
}

/* ── Formulaire ──────────────────────────────────────────────────────── */

.section-signup { background: var(--bg-soft); border-radius: var(--radius); }

#waitlist-form { max-width: 30rem; }

.field { margin-bottom: 1.3rem; }

.field label {
  display: block; font-weight: 600; font-size: .93rem; margin-bottom: .4rem;
}
.optional { font-weight: 400; color: var(--text-dim); }

.field input, .field select {
  width: 100%; padding: .72rem .9rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: .97rem;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

/* :user-invalid plutôt que :invalid — sinon le champ est rouge AVANT toute
   saisie, ce qui accuse l'utilisateur de s'être trompé avant qu'il ait tapé. */
.field input:user-invalid { border-color: #e0645f; }

.hint { font-size: .84rem; color: var(--text-dim); margin: .45rem 0 0; }

.form-status {
  margin: 1.1rem 0 0; font-size: .93rem; min-height: 1.5rem; font-weight: 500;
}
.form-status.ok    { color: var(--accent); }
.form-status.error { color: #ff8b85; }
.form-status.busy  { color: var(--text-dim); }

.privacy {
  margin-top: 2rem; max-width: 42rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1.2rem; background: var(--bg-card);
}
.privacy summary { cursor: pointer; font-weight: 600; font-size: .93rem; }
.privacy p { color: var(--text-soft); font-size: .9rem; margin: .9rem 0 0; }

/* ── Pied de page ────────────────────────────────────────────────────── */

.site-footer {
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-soft); font-size: .92rem;
}
.site-footer p { margin: .3rem 0; }

.muted { color: var(--text-dim); }
.small { font-size: .86rem; }

@media (max-width: 40rem) {
  .hero { padding-top: 3.5rem; }
  .site-header nav { justify-content: center; }
  .section { padding: 3rem 1.1rem; }
}