/* Ghost — CSS commun à toutes les pages du site (landing, contact, pages légales, 404) :
   polices, couleurs des deux thèmes, base, boutons, nav, conclusion et pied de page.
   Le CSS propre à la landing (démos animées) reste dans index.html. */

/* Geist et Geist Mono servies par le site (SIL Open Font License, voir /fonts/OFL.txt) */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #0a0a0a;
  --surface: #121212;
  --surface-2: #1a1a1a;
  --line: rgba(250, 250, 250, 0.12);
  --line-strong: rgba(250, 250, 250, 0.2);
  --fg: #fafafa;
  --muted: #a3a3a3;
  --dim: #7c7c7c;
  --mk-c: #5e5e5e; /* trait du symbole aux angles : gris entre --dim et le fond */
  --green: #9ff574;
  --green-soft: #d2ffba;
  --green-mid: #5ac430;
  --green-deep: #2a7e0c;
  --paper: #fafafa;
  --ink: #0a0a0a;
  --mark: #e9b949;
  --font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --frame: 1280px;
  --nav-bg: rgba(10,10,10,0.82);
  --hatch-c: rgba(250,250,250,0.06);
  --trust-c: rgba(250,250,250,0.035);
  --lead-hero: rgba(250,250,250,0.62);
  --green-ink: var(--green);
  --dot: rgba(250,250,250,.55);
  --solid-bg: var(--paper);
  --solid-fg: var(--ink);
  --veil: rgba(10,10,10,0.25);
  --badge-bg: rgba(10,10,10,0.5);
  color-scheme: dark;
}
/* Version claire : seulement quand le visiteur la choisit au bouton de la nav ; sinon, sombre */
:root[data-theme="light"] { --bg: #f6f6f2; --surface: #ffffff; --surface-2: #ecece6; --line: rgba(10,10,10,0.12); --line-strong: rgba(10,10,10,0.22); --fg: #0a0a0a; --muted: #56564f; --dim: #7a7a73; --nav-bg: rgba(246,246,242,0.85); --hatch-c: rgba(10,10,10,0.07); --trust-c: rgba(10,10,10,0.04); --lead-hero: rgba(10,10,10,0.62); --green-ink: #2a7e0c; --dot: rgba(10,10,10,.4); --solid-bg: #0a0a0a; --solid-fg: #fafafa; --veil: rgba(10,10,10,0.04); --badge-bg: rgba(255,255,255,0.7); color-scheme: light; --mk-c: #a6a6a0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.frame { max-width: var(--frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.section { padding: 96px 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.hatch { height: 44px; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(135deg, var(--hatch-c) 0 1px, transparent 1px 7px); }

/* Typo */
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
.h-xl { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.05em; }
.h-lg { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.045em; }
.h-md { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.04em; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 44ch; margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.eyebrow::before { content: ""; width: 3px; height: 12px; background: var(--muted); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; padding: 11px 16px; border: 1px solid var(--line-strong); transition: background .2s, color .2s; white-space: nowrap; }
.btn--light { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
.btn--light:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.theme-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--fg); }
.theme-btn:hover { background: var(--surface-2); }
.theme-btn svg { width: 16px; height: 16px; }
/* Le symbole de Ghost sur chaque angle droit : les deux traits collés en équerre, posés sur les quatre coins de chaque cadre,
   et là où une bande (rayures, bandeau, pied de page) rencontre le filet du cadre central. Pas sur les cadres arrondis,
   ni sur les boutons pleins, où il se confondrait avec le fond. Un seul pseudo-élément, posé sur les filets (inset -1px) ; la longueur des traits (--mk) suit la taille du cadre ; trait gris (--mk-c), pas blanc. */
.nav, .btn--ghost, .badge, #whatsapp .wa-box, .faq-list, .member, .member .role, .cmd, .contact-card, .hatch, .trust, .foot { position: relative; }
.nav::before, .btn--ghost::before, .badge::before, #whatsapp .wa-box::before, .hero-visual .dither::before, .panel::before, .faq-list::before, .member::before, .member .role::before, .cmd::before, .contact-card::before, .hatch::before, .trust::before, .foot::before, .hero::before { content: ""; position: absolute; z-index: 2; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--mk-c), var(--mk-c)) left top / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) left top / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) right top / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) right top / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) left bottom / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) left bottom / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) right bottom / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) right bottom / 1px calc(var(--mk) + 1px) no-repeat; }
/* Bandes rayées et bandeau : ce ne sont pas des cadres, ils séparent deux sections. Leurs équerres encadrent donc les sections
   voisines : les traits verticaux partent vers le haut depuis le filet du haut, vers le bas depuis celui du bas. */
.hatch::before, .trust::before { top: calc(-1px - var(--mk)); bottom: calc(-1px - var(--mk));
  background:
    linear-gradient(var(--mk-c), var(--mk-c)) left 0 top var(--mk) / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) left top / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) right 0 top var(--mk) / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) right top / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) left 0 bottom var(--mk) / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) left bottom / 1px calc(var(--mk) + 1px) no-repeat,
    linear-gradient(var(--mk-c), var(--mk-c)) right 0 bottom var(--mk) / var(--mk) 1px no-repeat, linear-gradient(var(--mk-c), var(--mk-c)) right bottom / 1px calc(var(--mk) + 1px) no-repeat; }
/* Longueur des traits selon la taille du cadre : étiquettes, boutons, cadres moyens, grands encadrés */
.member .role, .cmd { --mk: 3px; }
.btn--ghost, .badge { --mk: 4px; }
.nav, .contact-card, .member, .hatch, .trust { --mk: 6px; }
#whatsapp .wa-box, .hero, .hero-visual .dither, .panel, .faq-list, .foot { --mk: 8px; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; max-width: var(--frame); margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--nav-bg); backdrop-filter: blur(12px); border: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; color: var(--fg); line-height: 0; }
.logo .wm { height: 32px; width: auto; display: block; fill: currentColor; }
.logo .wm-sym { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: 999px; border: 1px solid var(--line); }
.nav-links a { font-size: 13px; padding: 7px 9px; white-space: nowrap; border-radius: 999px; color: var(--muted); transition: background .2s, color .2s; }
.nav-links a:hover, .nav-links a.is-active { background: var(--bg); color: var(--fg); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-cta .btn { padding: 9px 14px; font-size: 12px; }
.nav-app { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 9px 6px; }
.nav-app:hover { color: var(--fg); }
@media (max-width: 1340px) { .nav-links { display: none; } }
@media (max-width: 620px) { .nav-cta .btn--ghost, .nav-app { display: none; } .logo .wm { height: 26px; } }

.closing { position: relative; overflow: hidden; padding: 120px 56px; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; border-bottom: 1px solid var(--line); }
.closing::before { content: ""; position: absolute; width: 820px; height: 380px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: radial-gradient(closest-side, rgba(159,245,116,0.38), rgba(90,196,48,0.14) 60%, transparent); filter: blur(50px); pointer-events: none; }
.closing-title { position: relative; max-width: 18ch; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.05em; }
.closing .btn { position: relative; }
@media (max-width: 860px) { .closing { padding: 72px 20px; } }
.foot { max-width: var(--frame); margin: 0 auto; border: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 48px 56px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand .logo .wm { height: 48px; }
@media (max-width: 620px) { .foot-brand .logo .wm { height: 38px; } }
.foot-brand p { margin: 0; font-size: 20px; letter-spacing: -0.02em; max-width: 22ch; }
.foot h4 { margin: 0 0 12px; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.foot a:hover { color: var(--fg); }
.foot-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.foot-bottom span.sel { user-select: all; color: var(--muted); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; padding: 40px 20px; } }

/* Pages secondaires (contact, pages légales, 404) */
.page { padding: 96px 56px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 760px; }
.page-head .lead { max-width: 60ch; }
.page-date { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin: 0; }
.prose { max-width: 760px; margin-top: 36px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.prose h2 { color: var(--fg); font-size: 22px; letter-spacing: -0.02em; margin: 32px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--fg); font-size: 16px; font-weight: 500; margin: 20px 0 6px; }
.prose p, .prose ul { margin: 0 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.page:has(.prose) { padding-top: 56px; padding-bottom: 64px; }
.prose strong { color: var(--fg); font-weight: 500; }
.prose a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--fg); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contact-card h2 { font-size: 20px; letter-spacing: -0.02em; }
.contact-card p { margin: 0; color: var(--muted); font-size: 14px; }
.contact-card .mail { font-family: var(--font-mono); font-size: 15px; color: var(--fg); user-select: all; word-break: break-all; }
.contact-card .btn { margin-top: auto; }
.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.not-found .code { font-family: var(--font-mono); font-size: 13px; color: var(--green-ink); }
@media (max-width: 860px) { .page { padding: 64px 20px; } .contact-grid { grid-template-columns: 1fr; } }