/* Page d'accueil d'Argentique.

   Même principe que legal/style.css : aucune police distante, aucun script,
   aucune requête sortante. Tout ce que cette page demande au navigateur vient de
   ce dépôt. Une page qui vend l'absence de réseau et chargerait un traceur au
   passage se contredirait toute seule.

   Les couleurs viennent de src/theme/tokens.ts (themeVault), pour que le site et
   l'application se reconnaissent.

   ── La mise en page ────────────────────────────────────────────────────────
   Les sections occupent toute la largeur de l'écran et portent leur propre fond.
   À l'intérieur, .page recentre le contenu sans le laisser s'étaler, et les
   paragraphes gardent une largeur de lecture (--measure) : au-delà d'une
   soixantaine de caractères, l'œil rate le début de la ligne suivante. Large ne
   veut donc pas dire que le texte va d'un bord à l'autre. */

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f5efe3;
  --ink: #1c1a17;
  --ink-soft: #6b6357;
  --accent: #e2732a;
  --rule: #e0d6c4;
  --card: #fffaf1;
  --band: #efe7d8;
  --terminal: #221e19;
  --terminal-ink: #ede6da;

  /* L'orange de marque décore. Il n'écrit pas : sur le fond crème il donne
     2,9:1, sous le seuil AA de 4,5:1. Ces jetons portent la même teinte, assez
     foncée pour être lue. */
  --link: #a8491a;
  --cta-bg: #a8491a;
  --cta-ink: #ffffff;

  --page: 82rem;      /* largeur maximale du contenu */
  --measure: 38rem;   /* largeur de lecture d'un paragraphe */
  --gut: clamp(1.25rem, 5vw, 4rem);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f;
    --ink: #f0e9dd;
    --ink-soft: #9a9184;
    --accent: #f0913f;
    --rule: #2e2822;
    --card: #1c1915;
    --band: #191612;
    --terminal: #0c0a08;
    --terminal-ink: #ede6da;

    /* Sur fond sombre la polarité s'inverse : l'orange clair se lit bien
       (7,9:1) et c'est l'encre du bouton qui doit devenir sombre. */
    --link: #f0913f;
    --cta-bg: #f0913f;
    --cta-ink: #14120f;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gut);
}

a { color: var(--link); }
a:focus-visible,
.cta:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* `android.permission.INTERNET` est un seul mot de 27 caractères. Sans coupure
   autorisée il pousse le paragraphe au-delà de la largeur du téléphone et fait
   défiler la page entière de côté. */
code { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; }

/* ── Bandes ────────────────────────────────────────────────────────────── */

.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band.alt { background: var(--band); }
.band.tight { padding-block: clamp(2rem, 4vw, 3rem); }

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

.top { border-bottom: 1px solid var(--rule); }

.top .page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.1rem;
}

.brand {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.45rem; color: var(--accent); text-decoration: none;
}

.brand img { width: 32px; height: 32px; border-radius: 8px; }

.top nav { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); font-size: 0.92rem; }
.top nav a { color: var(--ink-soft); text-decoration: none; }
.top nav a:hover { color: var(--link); }

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

.hero .page {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero .page { grid-template-columns: 1.15fr 0.85fr; }
}

.hero h1 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 0.95; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}

.hero .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft); max-width: var(--measure);
  margin: 1.6rem 0 0;
}

.hero .lede strong { color: var(--ink); font-weight: 600; }

.hero-shot { margin: 0; justify-self: center; }

.hero-shot img {
  display: block; width: 100%; max-width: 22rem; height: auto;
  border: 1px solid var(--rule); border-radius: 1rem;
}

.rule-accent {
  width: 6rem; height: 3px; background: var(--accent);
  border: 0; margin: 1.75rem 0 0;
}

/* ── Bandeau d'état ────────────────────────────────────────────────────── */

.status {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0.7rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

@media (min-width: 62rem) {
  .status { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
  .status .status-text { max-width: 46rem; }
}

.status .label {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.6rem;
}

.status p { margin: 0.6rem 0 0; }
.status .label + p { margin-top: 0; }

.cta {
  display: inline-block; white-space: nowrap;
  background: var(--cta-bg); color: var(--cta-ink);
  padding: 0.8rem 1.4rem; border-radius: 0.6rem;
  text-decoration: none; font-weight: 600; font-size: 0.98rem;
}

.cta:hover { filter: brightness(1.08); }

@media (max-width: 61.99rem) { .cta { margin-top: 1.2rem; } }

/* ── Titres de section ─────────────────────────────────────────────────── */

h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05; margin: 0 0 1rem; text-wrap: balance;
}

h3 { font-size: 1.02rem; margin: 0 0 0.35rem; }

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 0.8rem;
}

.band p { max-width: var(--measure); }

/* ── Le bloc de preuve ─────────────────────────────────────────────────── */

.proof-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 62rem) {
  .proof-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.proof {
  background: var(--terminal); color: var(--terminal-ink);
  border-radius: 0.8rem; padding: clamp(1.1rem, 2.5vw, 1.6rem);
  overflow-x: auto;
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.8;
  /* Les sauts de ligne du HTML sont le contenu. Sans ceci la sortie de la
     commande s'aplatit en un paragraphe et ne ressemble plus à rien. */
  white-space: pre;
}

.proof .prompt { color: var(--accent); user-select: none; }
.proof .out { color: #9a9184; }
.proof .hit { color: #7fb069; }

.proof-note {
  font-size: 0.92rem; color: var(--ink-soft);
  max-width: var(--measure); margin: 1rem 0 0;
}

/* ── Grilles de contenu ────────────────────────────────────────────────── */

.features {
  display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.features li {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 0.7rem; padding: 1.15rem 1.3rem;
}

.features p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: none; }

/* ── Deux colonnes texte + image ───────────────────────────────────────── */

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > :first-child { order: 2; }
}

.split figure { margin: 0; justify-self: center; }

.split figure img {
  display: block; width: 100%; max-width: 20rem; height: auto;
  border: 1px solid var(--rule); border-radius: 1rem;
}

.split figcaption {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 0.7rem; text-align: center;
}

/* ── Limites ───────────────────────────────────────────────────────────── */

.limits {
  display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.limits li {
  border-top: 2px solid var(--rule); padding-top: 0.9rem;
  color: var(--ink-soft); font-size: 0.95rem;
}

.limits strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }

/* ── Pied ──────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.9rem; }

footer .page { padding-block: 2.5rem; }

footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-bottom: 1.4rem; }

footer p { margin: 0.7rem 0 0; max-width: 44rem; }

/* Marqueur des informations à renseigner avant publication. Même code visuel
   que legal/style.css : une page mise en ligne avec un trou dedans doit se
   voir. */
.todo {
  background: #ffe8b0; color: #6b4a00;
  padding: 0.1rem 0.35rem; border-radius: 0.25rem;
  font-weight: 600; font-size: 0.92em;
}