/* ============================================================
   CORTEX : la vitrine publique.

   Claire, et volontairement simple. Les couleurs sont celles du thème
   clair de la console (app/globals.css), recopiées telles quelles : la
   vitrine et l'outil qu'elle présente n'ont aucune raison de ne pas se
   ressembler. Si la console bouge, ces valeurs bougent avec elle.

   Un seul accent, l'élévation est une bordure. La page parle par
   l'échelle typographique ; sa seule partie vivante est le panneau des
   modules, et son seul mouvement celui des interrupteurs.

   Inter Tight (titres) · Inter (corps) · JetBrains Mono (adresses,
   routes, codes de réponse). Servies par Cortex : voir fonts.css.
   ============================================================ */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f0f1f4;
  --line: #dcdee5;
  --line-2: #c8ccd6;

  --fg: #141824;
  --fg-2: #5a6072;
  --fg-3: #6c7387;

  --accent: #2148ca;
  --accent-fg: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 84%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 7%, transparent);

  --ok: #0e7c6d;
  --err: #bf321d;

  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 10px;
  --r-sm: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 var(--font-body);
  font-feature-settings: "cv05", "ss03";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: 0.86em; }

/* Le script masque une ligne de requête par `hidden` ; sans ceci, le
   `display: flex` de la ligne l'emporterait sur la feuille du navigateur. */
[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

/* ── barre ─────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 32px; height: 60px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font: 600 17px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.logo svg { color: var(--accent); }

.nav { display: flex; gap: 24px; margin-right: auto; }
.nav a { text-decoration: none; color: var(--fg-2); font-size: 14px; font-weight: 500; }
.nav a:hover { color: var(--fg); }

/* ── boutons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding-inline: 22px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: 500 15px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s;
}
.btn:hover { border-color: var(--fg-3); }
.btn .mono { font-size: 13px; }

.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-sm { height: 34px; padding-inline: 14px; font-size: 13.5px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── héros ─────────────────────────────────────────────── */

.hero { padding-block: 96px 72px; }
.hero h1 {
  max-width: 19ch;
  font-size: clamp(40px, 6.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.hero h1 span { color: var(--accent); }
.hero .lede { max-width: 34em; margin-top: 24px; font-size: 19px; line-height: 1.55; color: var(--fg-2); }

.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 80px 0 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.etapes li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; align-content: start; }
.etapes .n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg-2);
  font: 500 12px/1 var(--font-mono);
}
.etapes b { font-size: 15.5px; font-weight: 600; }
.etapes p { font-size: 15px; line-height: 1.55; color: var(--fg-2); }

/* ── sections ──────────────────────────────────────────── */

section { padding-block: 112px; }
.band { background: var(--bg-2); border-block: 1px solid var(--line); }

.head { max-width: 40em; margin-bottom: 48px; }
.head h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.025em; }
.head p { margin-top: 16px; font-size: 17.5px; color: var(--fg-2); }

/* ── le panneau des modules ────────────────────────────── */

.composeur { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }

.composeur-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.projets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--panel-2); border-radius: 999px; }
.projets button {
  height: 32px;
  padding-inline: 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font: 500 13.5px/1 var(--font-body);
  cursor: pointer;
  appearance: none;
}
.projets button:hover { color: var(--fg); }
.projets button[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }

.compte { font-size: 13.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.compte b { color: var(--fg); font-weight: 600; }

/* Les filets de la grille sont portés par les cases : bord droit sauf en
   fin de rangée, bord bas sauf sur la dernière rangée. Dix-huit cases
   remplissent exactement trois colonnes comme deux. */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.mods li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mods li:nth-child(3n) { border-right: 0; }
.mods li:nth-last-child(-n + 3) { border-bottom: 0; }

.mod {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 2px 12px;
  align-items: start;
  align-content: start;
  width: 100%;
  height: 100%;
  padding: 16px 18px;
  border: 0;
  background: var(--panel);
  color: var(--fg-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.18s;
}
.mod:hover { background: var(--bg-2); }
.mod svg { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; transition: color 0.18s; }
.mod b { font-size: 14.5px; font-weight: 600; color: var(--fg-2); transition: color 0.18s; }
.mod .dit { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--fg-3); }

.interrupteur {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 3;
  width: 30px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color 0.18s;
}
.interrupteur::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 20%, transparent);
  transition: transform 0.18s;
}

.mod[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.mod[aria-pressed="true"] b { color: var(--fg); }
.mod[aria-pressed="true"] .dit { color: var(--fg-2); }
.mod[aria-pressed="true"] .interrupteur { background: var(--accent); }
.mod[aria-pressed="true"] .interrupteur::after { transform: translateX(12px); }

.composeur-pied {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.requetes { display: grid; gap: 6px; font: 400 13px/1.5 var(--font-mono); color: var(--fg-2); }
.requetes p { display: flex; gap: 12px; min-width: 0; }
.requetes .code { flex: none; font-weight: 500; }
.requetes .route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-requete="ok"] .code { color: var(--ok); }
[data-requete="refus"] .code { color: var(--err); }

.dehors { font-size: 13px; color: var(--fg-2); text-align: right; }
.dehors span {
  display: inline-block;
  margin: 2px 0 2px 6px;
  padding: 2px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
}

/* ── le kit ────────────────────────────────────────────── */

.kit { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.kit .head { margin-bottom: 36px; }

.raisons { display: grid; gap: 20px; }
.raisons p { font-size: 15.5px; color: var(--fg-2); }
.raisons b { font-weight: 600; color: var(--fg); }

.adresses { margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.adresses li { display: grid; gap: 6px; padding: 22px 24px; }
.adresses li + li { border-top: 1px solid var(--line); }
.adresses code { font-size: 14px; font-weight: 500; color: var(--accent); }
.adresses p { font-size: 15px; color: var(--fg-2); }
.adresses .note {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--fg);
  font: 400 12.5px/1.5 var(--font-mono);
}

/* ── appel final, pied ─────────────────────────────────── */

.final h2 { max-width: 16ch; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.03em; }
.final p { max-width: 36em; margin-top: 20px; font-size: 17.5px; color: var(--fg-2); }

footer { padding-block: 28px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 13.5px; color: var(--fg-3); }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { text-decoration: none; color: var(--fg-2); }
footer a:hover { color: var(--fg); }

/* ── largeurs ──────────────────────────────────────────── */

@media (max-width: 960px) {
  .mods { grid-template-columns: repeat(2, 1fr); }
  .mods li:nth-child(3n) { border-right: 1px solid var(--line); }
  .mods li:nth-child(2n) { border-right: 0; }
  .mods li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .mods li:nth-last-child(-n + 2) { border-bottom: 0; }

  .kit { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .topbar .wrap { justify-content: space-between; }

  .hero { padding-block: 64px 48px; }
  .hero .lede { font-size: 17.5px; }
  .etapes { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; }

  section { padding-block: 80px; }

  .composeur-pied { grid-template-columns: minmax(0, 1fr); }
  .dehors { text-align: left; }
  .dehors span { margin: 2px 6px 2px 0; }
}

/* Sur un téléphone, les descriptions tombent : dix-huit cases en une
   colonne feraient défiler le panneau sur trois écrans. Deux colonnes de
   noms suffisent à montrer ce qui s'allume. Le nom passe sous l'icône et
   l'interrupteur : à côté d'eux, « Encaissements » n'a plus la place. */
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }

  .mod { grid-template-columns: 20px 1fr auto; gap: 10px; padding: 14px; }
  .mod svg { grid-row: 1; }
  .mod b { grid-column: 1 / -1; font-size: 13.5px; }
  .mod .dit { display: none; }
  .interrupteur { grid-row: 1; }

  .projets { width: 100%; border-radius: 12px; }
  .projets button {
    flex: 1;
    height: auto;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.2;
  }

  .requetes .route { white-space: normal; overflow-wrap: anywhere; }
}

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