/* Poseidon site, direction "The answer" (chosen 12/11).
   Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72. Between sections: --s8. Between blocks: --s6. Inside a block: --s3.
   Everything left-aligned on one edge; buttons and gauges full width. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --bg: #ffffff; --ink: #14231d; --ink2: #4b5c55; --tint: #e7f2ec; --line: #d3e0d9; --sea: #0b6e4f; --sea-dark: #08583f;
  --alert: #9b1c1c;
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --page: 1040px; --gutter: 32px;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--sea); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.n { font-variant-numeric: tabular-nums; }

/* top bar */
.barre .in { display: flex; gap: var(--s5); align-items: center; padding: var(--s4) var(--gutter); max-width: var(--page); }
.logo { display: flex; gap: var(--s2); align-items: center; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.logo img { height: 40px; width: auto; display: block; }
.barre a.lien { color: var(--ink2); text-decoration: none; font-size: 15px; }
.barre a.lien:hover, .barre a.lien[aria-current] { color: var(--ink); }

main { max-width: var(--page); padding: var(--s6) var(--gutter) var(--s8); display: grid; gap: var(--s8); }
section { display: grid; gap: var(--s6); }
.bloc { display: grid; gap: var(--s3); }
.bloc.large-gap { gap: var(--s5); }
h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; max-width: 14ch; }
h1.page { font-size: clamp(36px, 5vw, 56px); max-width: 20ch; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; max-width: 26ch; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.chapeau { font-size: 21px; line-height: 1.45; color: var(--ink2); max-width: 46ch; }
p { max-width: 64ch; }
.doux { color: var(--ink2); }
.petit { font-size: 14px; }

.acheter { display: inline-block; background: var(--sea); color: #fff; text-decoration: none; font-weight: 700; padding: var(--s3) var(--s5); border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.acheter:hover { background: var(--sea-dark); }
.acheter.large { display: block; width: 100%; padding: var(--s4) var(--s5); font-size: 18px; text-align: left; }
.acheter[disabled] { background: var(--ink2); cursor: wait; }

/* the conversation */
.fil { display: grid; gap: var(--s5); }
.demande { width: 100%; background: var(--tint); border-radius: 14px; padding: var(--s4) var(--s5); display: grid; gap: var(--s1); }
.demande .qui, .reponse .qui { font-size: 14px; color: var(--ink2); font-weight: 600; }
.demande p { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.reponse { display: grid; gap: var(--s5); border-left: 3px solid var(--sea); padding-left: var(--s5); }
.reponse p.grand { font-size: 20px; line-height: 1.45; max-width: 52ch; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s5); }
.chiffre { display: grid; gap: 2px; }
.chiffre b { font-size: 34px; line-height: 1.1; font-weight: 750; letter-spacing: -0.03em; }
.chiffre span { color: var(--ink2); font-size: 14px; }
blockquote { font-size: 22px; line-height: 1.35; font-weight: 500; max-width: 36ch; quotes: "«\00a0" "\00a0»"; }
blockquote::before { content: open-quote; } blockquote::after { content: close-quote; }
ol.etapes { list-style: none; counter-reset: e; display: grid; gap: var(--s2); }
ol.etapes li { counter-increment: e; display: grid; grid-template-columns: 28px 1fr; gap: var(--s2); }
ol.etapes li::before { content: counter(e); color: var(--ink2); font-weight: 700; }
.jauges { display: grid; gap: var(--s4); }
.jauge { display: grid; gap: var(--s2); }
.jauge .tete { display: flex; justify-content: space-between; gap: var(--s3); }
.jauge .tete b { font-weight: 700; }
.jauge .piste { height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.jauge .piste div { height: 100%; border-radius: 5px; background: var(--sea); }
.limite { background: var(--tint); border-radius: 10px; padding: var(--s3) var(--s4); }

.signaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); }
.prix { width: 100%; border-collapse: collapse; }
.prix td, .prix th { padding: var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; text-align: left; }
.prix th { font-size: 14px; color: var(--ink2); font-weight: 600; }
.prix td + td, .prix th + th { text-align: right; font-weight: 700; white-space: nowrap; padding-left: var(--s4); }
.prix th + th { font-weight: 600; }
.fondateur p { font-size: 21px; line-height: 1.5; max-width: 52ch; }

/* forms */
.formulaire { display: grid; gap: var(--s3); width: 100%; }
.formulaire label { display: grid; gap: var(--s1); font-weight: 600; font-size: 15px; }
.formulaire input[type=email], .formulaire select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--ink2); border-radius: 10px; padding: var(--s3) var(--s4); }
.formulaire input::placeholder { color: var(--ink2); }
.formulaire .piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message { font-weight: 600; }
.message.ok { color: var(--sea); }
.message.erreur { color: var(--alert); }

/* articles list */
.articles { display: grid; }
.articles a { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.articles a b { font-size: 19px; font-weight: 700; }
.articles a:hover b { color: var(--sea); }
.articles span, .articles time { color: var(--ink2); font-size: 15px; max-width: 64ch; }

/* long text: legal pages and articles */
.texte { display: grid; gap: var(--s4); max-width: 70ch; }
.texte h2 { font-size: 24px; margin-top: var(--s5); }
.texte h3 { margin-top: var(--s3); }
.texte ul, .texte ol { padding-left: var(--s5); display: grid; gap: var(--s2); }
.texte table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.texte th, .texte td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.texte th { color: var(--ink2); font-weight: 600; }
.texte code { font-size: 15px; background: var(--tint); padding: 1px var(--s1); border-radius: 4px; }
.cle { font: 600 16px/1.4 ui-monospace, Menlo, monospace; background: var(--tint); padding: var(--s3) var(--s4); border-radius: 10px; word-break: break-all; }

footer .in { max-width: var(--page); padding: var(--s6) var(--gutter); display: grid; gap: var(--s3); color: var(--ink2); font-size: 14px; border-top: 1px solid var(--line); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
footer nav a { color: var(--ink2); }

@media (max-width: 700px) {
  :root { --gutter: 16px; }
  .barre a.lien { display: none; }
  .barre .acheter { padding: var(--s2) var(--s4); font-size: 15px; white-space: nowrap; }
  main { gap: var(--s7); }
  .reponse { padding-left: var(--s4); }
}

/* home */
.liens-calmes { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* code */
.code { width: 100%; background: #f4f6f5; border: 1px solid var(--line); border-radius: 10px; padding: var(--s4); overflow: auto; max-height: 560px;
  font: 13.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); white-space: pre; }
.code-titre { font-size: 14px; font-weight: 600; color: var(--ink2); }
.texte .code { font-size: 13.5px; }

/* docs: three columns on desktop, one on a phone */
main.large { max-width: 1320px; }
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 460px); gap: var(--s7); align-items: start; }
.docs-nav { position: sticky; top: var(--s5); display: grid; gap: var(--s2); font-size: 15px; }
.docs-nav ul { list-style: none; display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.docs-nav a { color: var(--ink2); text-decoration: none; display: block; padding: 2px 0; overflow-wrap: anywhere; }
.docs-nav a:hover, .docs-nav a[aria-current] { color: var(--ink); }
.docs-nav a[aria-current] { font-weight: 700; }
.nav-titre { font-size: 14px; font-weight: 700; color: var(--ink); }
.docs-texte { min-width: 0; }
.docs-code { position: sticky; top: var(--s5); display: grid; gap: var(--s3); min-width: 0; }
.docs-code .code { max-height: 70vh; }
.params { width: 100%; border-collapse: collapse; font-size: 15px; }
.params th, .params td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); }
.params th { color: var(--ink2); font-weight: 600; font-size: 14px; }
@media (max-width: 1100px) {
  .docs { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-code { grid-column: 2; position: static; }
}
@media (max-width: 760px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .docs-nav, .docs-code { position: static; grid-column: auto; }
  .docs-nav { order: 3; border-top: 1px solid var(--line); padding-top: var(--s5); }
  .params { display: block; overflow-x: auto; }
}
.docs-texte h1.page { font-size: clamp(30px, 3vw, 40px); }
.docs-texte h2 { font-size: 22px; }
.barre .in, footer .in { max-width: 1320px; }

/* niche pages */
.niche table { font-size: 15px; }
.niche q { quotes: "«\00a0" "\00a0»"; }
.accroches, .ab { list-style: none; padding: 0; display: grid; gap: var(--s5); }
.accroches blockquote { font-size: 19px; }
.texte.niche { max-width: none; }

/* ===== v2 (13/11): Ilyas's title font, one quiet text font, the hey.com-style landing ===== */
@font-face { font-family: "Geist"; src: url("/polices/geist.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
:root { --titre: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink: #1d1d1f; --ink2: #545458; --noir: #000; --sea: #1747a6; --sea-dark: #0b2a5b; --tint: #eef3fb; --line: #e2e6ee; }
body { font-family: var(--font); }
h1, h2, .enorme { font-family: var(--titre); font-weight: 400; letter-spacing: 0; color: var(--noir); }
h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
.docs-texte h2, .docs-texte h3, .texte h3 { font-family: var(--font); font-weight: 700; }
.docs-texte h1.page { font-family: var(--titre); }
.nav { display: flex; gap: var(--s5); align-items: center; }
.barre .in { gap: var(--s5); }
.acheter { background: var(--sea); }
.acheter:hover { background: var(--sea-dark); }
.jauge .piste { background: #e3ebf7; }
.jauge .piste div { background: var(--sea); }

/* landing, both layouts */
.landing main { gap: var(--s8); padding-top: var(--s7); }
.landing h1 { font-size: clamp(52px, 9vw, 124px); max-width: 13ch; }
.landing h2 { font-size: clamp(36px, 5vw, 64px); max-width: 18ch; }
.landing h3 { font-size: 21px; letter-spacing: -0.01em; }
.landing p { font-size: 20px; line-height: 1.6; max-width: 62ch; }
.landing .sous-titre { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--ink2); max-width: 40ch; }
.landing .grand { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.35; font-weight: 600; color: var(--noir); max-width: 32ch; }
.landing .enorme { font-size: clamp(56px, 8vw, 104px); line-height: 1; max-width: none; }
.landing .ouverture { display: grid; gap: var(--s6); }
.landing .recit { display: grid; gap: var(--s5); padding-top: var(--s7); background: url("/vague.svg") left top / 360px auto no-repeat; }
.landing .cta-premier { display: grid; gap: var(--s2); max-width: 560px; }
.landing .cta-premier p { font-size: 16px; color: var(--ink2); }
.landing .cta-premier .mission { color: var(--noir); font-weight: 600; }
.landing .cta { max-width: 560px; }
.landing .acheter.large { font-size: 19px; padding: var(--s4) var(--s5); border-radius: 12px; }
.voix { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.35; font-weight: 500; color: var(--noir); border-left: 4px solid var(--sea); padding-left: var(--s5); max-width: 34ch; quotes: "“" "”"; }
.voix::before { content: open-quote; } .voix::after { content: close-quote; }
.quatre { display: grid; gap: var(--s6); }
.quatre > div { display: grid; gap: var(--s2); }
.quatre p { font-size: 18px; }
.preuve { display: grid; gap: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s5); }
.preuve .jauges { max-width: 640px; }
.preuve .jauge .tete { font-size: 17px; }
.duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); max-width: 760px; }
.duel > div { display: grid; gap: var(--s3); align-content: start; background: var(--tint); border-radius: 14px; padding: var(--s5); }
.duel blockquote { font-size: 19px; line-height: 1.4; max-width: none; quotes: "“" "”"; }
.chiffre-duel { font-size: 30px !important; font-weight: 700; color: var(--noir); }
.chiffre-duel.perdant { color: var(--ink2); }
.questions { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.questions li { font-size: 20px; background: var(--tint); border-radius: 14px; padding: var(--s3) var(--s5); width: fit-content; max-width: 100%; }
.signature { font-family: var(--titre); font-size: 32px !important; color: var(--noir); }

/* layout A: the letter (one column, like a long note) */
.v-lettre main { max-width: 820px; }
/* layout B: columns (section title left, story right) */
.v-colonnes main { max-width: 1240px; }
@media (min-width: 980px) {
  .v-colonnes .recit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s7); align-items: start; }
  .v-colonnes .recit > h2 { grid-row: 1 / span 20; position: sticky; top: var(--s6); font-size: clamp(36px, 3.6vw, 52px); }
  .v-colonnes .recit > :not(h2) { grid-column: 2; }
  .v-colonnes .quatre { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav .lien { display: none; }
  .landing .recit { background-size: 220px auto; }
}
.landing .preuve h3, .landing .quatre h3 { font-family: var(--titre); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: var(--noir); letter-spacing: 0; }
.landing .quatre h3 { font-size: clamp(24px, 2.4vw, 30px); }
main > *, .recit > *, .ouverture > * { min-width: 0; }
.preuve > * { min-width: 0; } .duel { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.etiquette { font-size: 16px !important; font-weight: 600; color: var(--ink2); }
.texte code, .texte li, .texte p { overflow-wrap: anywhere; }
.compare { max-width: 900px; gap: var(--s5); }
.compare h1.page { font-size: clamp(44px, 7vw, 88px); }
.compare h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(30px, 4vw, 46px); margin-top: var(--s6); }
.compare h2.petit-titre { font-family: var(--font); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink2); margin-top: 0; }
.compare h3 { font-size: 20px; margin-top: var(--s5); }
.compare table { font-size: 16px; }
.compare td:first-child { white-space: nowrap; }
.compare .cta { max-width: 560px; }
@media (max-width: 700px) {
  .compare table, .compare thead, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tr { padding: var(--s3) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s3); }
  .compare td { border: 0; padding: 0; white-space: normal !important; }
}

/* v3 (13/11): headings in Geist (sans-serif, OFL); the logo keeps Ilyas's blackletter as an image */
h1, h2, .enorme { font-weight: 700; letter-spacing: -0.03em; }
h2 { font-weight: 650; letter-spacing: -0.025em; }
.landing .preuve h3, .landing .quatre h3, .compare h2 { font-weight: 650; letter-spacing: -0.02em; }
.signature { font-family: var(--titre); font-weight: 600; font-size: 24px !important; letter-spacing: -0.01em; }
.docs-texte h1.page { letter-spacing: -0.025em; }

/* the real answer under the first button */
.reponse-reelle { display: grid; gap: var(--s4); max-width: 760px; border-top: 1px solid var(--line); padding-top: var(--s5); }
.question-reelle { font-size: 22px !important; font-weight: 600; color: var(--noir); }
.reponse-reelle ol { list-style: none; padding: 0; display: grid; gap: var(--s5); counter-reset: r; }
.reponse-reelle li { display: grid; gap: var(--s1); }
.reponse-reelle blockquote { font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--noir); quotes: "“" "”"; max-width: none; }
.reponse-reelle blockquote::before { content: open-quote; } .reponse-reelle blockquote::after { content: close-quote; }
.trad-ligne { font-size: 17px !important; color: var(--ink2); }
.compare h2.petit-titre { font-family: var(--titre); font-weight: 600; letter-spacing: -0.015em; }
.landing h1 { font-size: clamp(48px, 7.4vw, 108px); max-width: 15ch; } .landing p.petit, .reponse-reelle .petit { font-size: 15px; }

/* the "Ask Poseidon" box (served by the API, inherits these styles) */
poseidon-ask { display: block; max-width: 760px; }
.pa-form { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: end; }
.pa-field { display: grid; gap: var(--s1); }
.pa-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.pa-select, .pa-button { box-sizing: border-box; width: 100%; font: inherit; font-size: 17px; border-radius: 10px; padding: var(--s3) var(--s4); }
.pa-select { color: var(--ink); background: var(--bg); border: 1px solid var(--ink2); }
.pa-button { grid-column: 1 / -1; background: var(--sea); color: #fff; border: 0; font-weight: 700; cursor: pointer; }
.pa-button:hover { background: var(--sea-dark); }
.pa-out { display: grid; gap: var(--s4); margin-top: var(--s5); }
.pa-question { font-weight: 600; color: var(--noir); }
.pa-card { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s4); }
.pa-brand { font-weight: 700; color: var(--noir); font-size: 18px; }
.pa-facts, .pa-foot, .pa-note, .pa-empty { color: var(--ink2); font-size: 15px; }
.pa-hook { font-size: 18px; font-weight: 600; color: var(--noir); border-left: 3px solid var(--sea); padding-left: var(--s3); }
.pa-hook-en { color: var(--ink2); font-size: 16px; }
.pa-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.pa-link { color: var(--sea); }
.pa-variant-name { font-weight: 700; color: var(--noir); }
.pa-error { color: var(--alert); font-weight: 600; }
poseidon-ask { min-height: 440px; } @media (min-width: 701px) { poseidon-ask { min-height: 260px; } }
poseidon-ask { min-height: 400px; } @media (min-width: 460px) { poseidon-ask { min-height: 228px; } }
.pa-caption { display: block; font-size: 15px; color: var(--ink2); }
poseidon-ask { min-height: 450px; } @media (min-width: 460px) { poseidon-ask { min-height: 250px; } }
body .pmn { --pmn-ink: var(--noir); --pmn-ink2: var(--ink2); --pmn-line: var(--line); --pmn-dot: var(--sea); --pmn-link: var(--sea); color: var(--ink); }