/* solvanelabs.fr — direction « Éditorial clair » (6 octobre 2026).
   Fond porcelaine, texte presque noir, un seul accent (bleu profond). Ni halo, ni dégradé, ni animation.
   Titres : Instrument Serif ; texte : Inter (polices hébergées sur le site, licence SIL OFL). */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f3ee; --paper: #fffdf9; --t: #1a1916; --m: #57534c; --f: #6b665d;   /* --m ≈ 7,2:1, --f ≈ 5:1 sur --bg (AA) */
  --accent: #1e3a8a; --accent-ink: #fff;
  --line: rgba(26, 25, 22, .12); --line2: rgba(26, 25, 22, .22);
  --bad: #b4412c; --mid: #9a6400; --good: #1f7a4a;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --max: 1120px; --edge: max(24px, calc((100% - var(--max)) / 2));
  --shadow: 0 1px 2px rgba(26, 25, 22, .06), 0 12px 32px -12px rgba(26, 25, 22, .18), 0 32px 64px -32px rgba(26, 25, 22, .22);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--t); font: 400 17px/1.55 var(--sans); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(30, 58, 138, .3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif, h1, h2, .figure { font-family: var(--serif); font-weight: 400; }

/* En-tête : l'orbe Solvane en petit, rien d'autre de décoratif */
.nav { position: sticky; top: 0; z-index: 10; height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 var(--edge);
  background: rgba(246, 243, 238, .92); border-bottom: 1px solid var(--line); font-size: 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--t); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand img { filter: brightness(.32) contrast(1.15); }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.nav nav a, .nav-cta { color: var(--m); text-decoration: none; }
.nav nav a:hover { color: var(--t); }
.nav-cta { color: var(--t); border: 1px solid var(--line2); border-radius: 4px; padding: 7px 14px; }
.nav-cta:hover { border-color: var(--t); }

/* Accueil : texte à gauche, résultat (version claire) à droite */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; padding: 96px var(--edge) 104px; border-bottom: 1px solid var(--line); }
h1 { margin: 0 0 24px; max-width: 11em; font-size: 68px; -webkit-text-stroke: .35px currentColor; line-height: 1.02; letter-spacing: -.015em; }
.hero .lead { margin: 0 0 40px; max-width: 28em; font-size: 20px; line-height: 1.45; color: var(--m); }
.field { display: flex; gap: 8px; max-width: 520px; margin: 0 0 12px; }
.field input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 4px; background: var(--paper); color: var(--t); font: inherit; }
.field input::placeholder { color: var(--f); }
.field input:focus { border-color: var(--accent); outline: none; }
.field button { height: 52px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 500 16px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.field button:hover { background: #172e6e; }
.note { margin: 0 0 40px; font-size: 14px; color: var(--f); }
.proof { margin: 0; padding-top: 20px; max-width: 30em; border-top: 1px solid var(--line); font-size: 16px; color: var(--m); }
.proof .figure { display: block; margin-bottom: 4px; font-size: 26px; line-height: 1.2; color: var(--t); }

.result { margin: 8px 0 0; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.result-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--m); }
.result-tag { padding: 2px 8px; border: 1px solid var(--line2); border-radius: 4px; font-size: 12px; }
.result-score { display: flex; align-items: baseline; gap: 6px; padding: 20px 0 4px; }
.result-score .num { font: 400 64px/1 var(--serif); color: var(--mid); }
.result-score .den { color: var(--f); }
.result-sum { margin: 0 0 8px; font-size: 16px; }
.result-list { list-style: none; margin: 0; padding: 0; }
.result-list li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--m); }
.result-list b { color: var(--t); font-weight: 600; font-size: 15px; }
.sev { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sev.bad { color: var(--bad); } .sev.mid { color: var(--mid); }
.result-fix { margin-top: 8px; padding: 16px; border-left: 2px solid var(--good); background: rgba(31, 122, 74, .06); }
.result-fix .sev { color: var(--good); }
.result-fix p { margin: 4px 0 0; font-size: 14px; color: var(--t); }
.result figcaption { margin-top: 16px; font-size: 12px; color: var(--f); }

/* Sections éditoriales : intitulé à gauche, contenu à droite, fines lignes */
.part { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding: 96px var(--edge); border-bottom: 1px solid var(--line); }
.part-label { margin: 0; padding-top: 10px; font-size: 13px; color: var(--f); letter-spacing: .02em; }
.part-label i { display: block; margin-bottom: 6px; font: italic 400 22px/1 var(--serif); color: var(--t); }
h2 { margin: 0 0 16px; max-width: 18em; font-size: 42px; line-height: 1.08; letter-spacing: -.01em; }
.part p.lead { margin: 0 0 32px; max-width: 34em; font-size: 18px; color: var(--m); }
.cols { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cols li { padding: 24px 24px 0 0; }
.cols li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.cols h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.cols p { margin: 0; font-size: 15px; color: var(--m); }

/* Captures posées comme des objets */
.object { margin: 0; }
.object img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); }
.object figcaption { margin-top: 14px; font-size: 13px; color: var(--f); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 8px; }
.pair figcaption b { font-weight: 600; }
.pair .before b { color: var(--mid); } .pair .after b { color: var(--good); }
.more { margin: 32px 0 0; font-size: 16px; }

/* Chiffres et faits */
.facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); max-width: 640px; }
.facts li { padding: 20px 24px 0 0; font-size: 15px; color: var(--m); }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts .figure { display: block; margin-bottom: 4px; font-size: 38px; line-height: 1.05; color: var(--t); }
.list { margin: 0; padding: 0 0 0 18px; color: var(--m); }
.list li { margin: 4px 0; }
.list b { color: var(--t); font-weight: 600; }
.btn { display: inline-block; padding: 14px 20px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; }
.btn:hover { background: #172e6e; }
.btn.line { background: transparent; color: var(--t); border: 1px solid var(--line2); }
.btn.line:hover { border-color: var(--t); }
.cta { margin: 32px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* FAQ */
.faq { margin: 8px 0 0; max-width: 760px; }
.faq > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.faq dt { font-weight: 600; }
.faq dd { margin: 0; color: var(--m); }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 28px var(--edge) 48px; font-size: 13px; color: var(--f); }
footer a { color: var(--m); }

@media (max-width: 900px) {
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px 20px 72px; }
  h1 { font-size: 48px; }
  .hero .lead { font-size: 18px; }
  .field { flex-direction: column; }
  .field input { flex: none; width: 100%; }
  .field button { width: 100%; }
  .part { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 64px 20px; }
  h2 { font-size: 34px; }
  .cols, .pair, .facts, .faq > div { grid-template-columns: minmax(0, 1fr); }
  .cols li, .cols li + li, .facts li, .facts li + li { padding: 20px 0 0; border-left: 0; }
  .cols li + li, .facts li + li { margin-top: 16px; border-top: 1px solid var(--line); }
  .faq > div { gap: 6px; }
  .pair { gap: 40px; }
  footer { flex-direction: column; padding: 28px 20px 48px; }
}

/* Dessin « gravure » de la planète Solvane : derrière et à droite de la carte de résultat, jamais derrière le titre ni le champ.
   Image SVG (quelques Ko) ; son animation très lente s'arrête si « réduire les animations » est réglé. Absente : page complète. */
.hero { position: relative; overflow: hidden; }
.hero > div, .hero > .result { position: relative; z-index: 1; }
/* Le centre de la planète se pose sur le coin haut droit de la carte : elle « se lève » derrière, aux trois quarts visible. */
.orbe { position: absolute; z-index: 0; pointer-events: none; width: 560px; height: auto; top: calc(104px - 280px); right: calc(var(--edge) - 280px); }
@media (max-width: 900px) {
  .orbe { position: static; width: 260px; justify-self: center; margin: -16px 0 -24px; }
}

/* Signature (section Contact) */
.signature { margin: 24px 0 0; font-size: 14px; color: var(--f); }

/* Pages intérieures (agences, comment ça marche, exemple, pages légales, 404) : même style clair, une colonne */
.hero.page { display: block; padding: 96px var(--edge) 72px; }
.hero.page h1 { max-width: 14em; font-size: 56px; -webkit-text-stroke: .3px currentColor; }
.hero.page .lead { margin-bottom: 0; }
.hero.page .cta { margin-top: 32px; }
.hero-mark { display: block; margin-bottom: 24px; filter: brightness(.32) contrast(1.15); }
.eyebrow { margin: 0 0 14px; font-size: 13px; color: var(--f); letter-spacing: .02em; }
main > section:not(.hero):not(.part) { padding: 80px var(--edge); border-bottom: 1px solid var(--line); }
main > section.band { background: var(--paper); }
.lead.small, main > section > .lead { margin: 0 0 8px; max-width: 34em; font-size: 18px; color: var(--m); }
.price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-top: 24px; border-top: 1px solid var(--line); }
.price > div { padding: 20px 24px 0 0; }
.price > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.price p { margin: 0; color: var(--m); font-size: 15px; }
.price .big { font: 400 44px/1.05 var(--serif); color: var(--t); margin-bottom: 4px; }
.three { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.three li { padding: 24px 24px 0 0; }
.three li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.three h3 { margin: 12px 0 6px; font-size: 17px; font-weight: 600; }
.three p { margin: 0; font-size: 15px; color: var(--m); }
.ico svg { width: 24px; height: 24px; fill: none; stroke: var(--t); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.steps { margin: 24px 0 0; padding: 0 0 0 22px; max-width: 40em; color: var(--m); }
.steps li { margin: 0 0 14px; padding-left: 6px; }
.steps li::marker { font-family: var(--serif); color: var(--t); }
.steps b { color: var(--t); font-weight: 600; }
.shot { margin: 32px 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow); }
.code { padding: 20px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font: 14px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--t); }
main > section.band .code { background: var(--bg); }
.doc { max-width: 760px; padding: 72px 24px 96px; margin: 0 auto; }
.doc h1 { font-size: 48px; max-width: none; }
.doc h2 { margin: 48px 0 12px; font-size: 28px; }
.doc p, .doc li { color: var(--m); }
.doc b { color: var(--t); }
.date { font-size: 14px; color: var(--f); }
@media (max-width: 900px) {
  .hero.page { padding: 56px 20px 48px; }
  .hero.page h1 { font-size: 40px; }
  main > section:not(.hero):not(.part) { padding: 56px 20px; }
  .price, .three { grid-template-columns: minmax(0, 1fr); }
  .price > div, .price > div + div, .three li, .three li + li { padding: 20px 0 0; border-left: 0; }
  .price > div + div, .three li + li { margin-top: 16px; border-top: 1px solid var(--line); }
  .doc { padding: 48px 20px 72px; }
  .doc h1 { font-size: 38px; }
}

/* Exemple réel : deux anneaux de note dessinés */
.notes { margin: 16px 0 0; max-width: 720px; }
.notes svg { display: block; width: 100%; height: auto; }
.notes .n { font: 400 64px var(--serif); }
.notes .d { font: 400 14px var(--sans); fill: var(--f); }
.notes .a { font: 400 14px var(--sans); fill: var(--m); }
.notes .c { font: 500 15px var(--sans); fill: var(--t); }
.notes figcaption { margin-top: 20px; font-size: 13px; color: var(--f); }
@media (max-width: 600px) { .notes .a { font-size: 22px; } .notes .c { font-size: 24px; } .notes .d { font-size: 20px; } .notes .n { font-size: 72px; } }

/* Page /exemple : rapports reconstitués, posés comme des documents (style clair du rapport Radar Pro) */
.rdoc { margin: 32px 0 0; max-width: 640px; padding: 40px 44px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.rd-kicker { margin: 0 0 10px; font: 400 12px/16px ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--accent); }
.rd-site { margin: 0; font: 400 34px/1.1 var(--serif); color: var(--t); }
.rd-when { margin: 8px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--f); }
.rd-note { display: flex; align-items: center; gap: 24px; margin: 24px 0 20px; }
.rd-ring { flex: none; width: 112px; height: 112px; }
.rd-ring circle { fill: none; stroke-width: 7; }
.rd-ring .tr { stroke: var(--line2); }
.rd-ring .ar { stroke-linecap: round; }
.rd-ring .ar.mid { stroke: var(--mid); } .rd-ring .ar.good { stroke: var(--good); }
.rd-ring .nb { font: 400 36px var(--serif); } .rd-ring .nb.mid { fill: var(--mid); } .rd-ring .nb.good { fill: var(--good); }
.rd-ring .sur { font: 400 12px var(--sans); fill: var(--f); }
.rd-phrase { margin: 0; font: 400 20px/1.35 var(--serif); color: var(--t); }
.rd-part { position: relative; display: flex; justify-content: space-between; padding-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--t); }
.rd-part .v { font: 400 13px ui-monospace, Consolas, monospace; color: var(--m); }
.rd-part::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); border-radius: 2px; }
.rd-part i { position: absolute; left: 0; bottom: 0; z-index: 1; height: 3px; border-radius: 2px; }
.rd-part i.mid { background: var(--mid); } .rd-part i.good { background: var(--good); }
.rd-detail { margin: 12px 0 0; font-size: 14px; color: var(--m); }
.rd-guard { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg); font-size: 14px; }
.rd-guard b { display: block; font-weight: 600; color: var(--t); }
.rd-guard span { color: var(--m); }
.rd-fine { margin: 20px 0 0; font-size: 12px; color: var(--f); }
.rd-mention { margin: 14px 0 0; max-width: 640px; font-size: 13px; color: var(--f); }
.rd-origine { margin: 40px 0 0; font-size: 14px; color: var(--m); }
.rd-origine summary { cursor: pointer; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(30, 58, 138, .3); text-underline-offset: 3px; }
.rd-origine img { display: block; width: 100%; max-width: 900px; height: auto; margin-top: 16px; border-radius: 8px; }
@media (max-width: 900px) {
  .rdoc { padding: 28px 22px; }
  .rd-site { font-size: 28px; }
  .rd-note { gap: 16px; }
  .rd-ring { width: 88px; height: 88px; }
  .rd-phrase { font-size: 18px; }
}