/* valoptim.agency — style IO appliqué à ValOptim (2026-11-09).
   Marine #0f172a, halo #1e2c4d, ciel #38b6ff ; DM Sans (titres, substitut public de Google Sans) et Open Sans (texte).
   Un seul élément fort : le schéma des jonctions du haut de page. Le reste reste sobre : filets, pas de cartes. */
@import url("/assets/fonts/fonts.css");

:root {
  --navy: #0f172a;
  --halo: #1e2c4d;
  --sky: #38b6ff;
  --sky-deep: #0b6fb3;
  --warm: #e0a458;
  --paper: #f6f8fb;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #51607a;
  --line: #dde5f0;
  --on-navy: #e6edf7;
  --on-navy-muted: #a9b6ca;
  --navy-line: #2a3a5e;
  --display: "DM Sans", "Google Sans", Arial, sans-serif;
  --body: "Open Sans", system-ui, Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem);
  --step-3: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  --step-4: clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);
  --wrap: 1140px;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1222; --surface: #111b31; --ink: #e6edf7; --muted: #9aa8bd; --line: #24324f;
    --sky-deep: #38b6ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1222; --surface: #111b31; --ink: #e6edf7; --muted: #9aa8bd; --line: #24324f;
  --sky-deep: #38b6ff; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sky-deep); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 66ch; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--sky); color: var(--navy); padding: 8px 14px; border-radius: 4px; z-index: 10; }
.skip:focus { left: 12px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1.2 var(--display); letter-spacing: -0.005em; text-decoration: none;
  padding: 14px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sky { background: var(--sky); color: var(--navy); }
.btn-sky:hover { background: #7fd0ff; color: var(--navy); }
.btn-line { border-color: currentColor; color: inherit; }
.btn-small { padding: 9px 16px; font-size: 0.92rem; }

/* Bandeau marine : en-tête + haut de page, et appel final */
.navy {
  background: radial-gradient(ellipse 70% 85% at 88% 8%, var(--halo), transparent 68%), var(--navy);
  color: var(--on-navy);
}
.navy a:hover { color: #fff; }

header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; }
.brand { font: 700 1.45rem/1 var(--display); letter-spacing: -0.03em; text-decoration: none; color: #fff; }
.brand span { color: var(--sky); }
nav.main { display: flex; align-items: center; gap: 28px; font-size: 0.95rem; }
nav.main a:not(.btn) { color: var(--on-navy-muted); text-decoration: none; }
nav.main a:not(.btn):hover { color: #fff; }

.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 64px; align-items: center; padding-block: 56px 88px; }
.hero-text { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.hero h1 { font-size: var(--step-4); color: #fff; letter-spacing: -0.012em; line-height: 1.06; }
.hero .lede { font-size: var(--step-1); color: var(--on-navy-muted); line-height: 1.55; max-width: 34em; }
.hero .lede strong { color: var(--on-navy); font-weight: 600; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.hero-actions .note { font-size: var(--step--1); color: var(--on-navy-muted); }
.byline { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--navy-line); }
.byline img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sky); }
.byline p { font-size: var(--step--1); color: var(--on-navy-muted); line-height: 1.5; }
.byline strong { color: var(--on-navy); font-weight: 600; }

/* Le schéma des jonctions */
figure.junctions { margin: 0; min-width: 0; }
.junctions svg { width: 100%; height: auto; display: block; overflow: visible; }
.junctions .band { fill: rgba(255, 255, 255, 0.035); stroke: var(--navy-line); stroke-width: 1; }
.junctions .band-title { fill: #fff; font: 700 19px var(--display); letter-spacing: -0.01em; }
.junctions .band-sub { fill: var(--on-navy-muted); font: 400 14px var(--body); }
.junctions .frag { fill: none; stroke: #6b7a94; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.junctions .frag-end { fill: var(--navy); stroke: #6b7a94; stroke-width: 2; }
.junctions .break { stroke: var(--warm); stroke-width: 2.4; stroke-linecap: round; }
.junctions .break-text { fill: var(--warm); font: 600 14px var(--body); }
.junctions .thread { fill: none; stroke: var(--sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.junctions .node { fill: var(--navy); stroke: var(--sky); stroke-width: 3; }
.junctions .node-end { fill: var(--sky); }
.junctions .end-text { fill: var(--sky); font: 600 14px var(--body); }
.junctions figcaption { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; font-size: var(--step--1); color: var(--on-navy-muted); }
.legend { display: inline-flex; align-items: center; gap: 10px; }
.legend::before { content: ""; width: 26px; height: 0; border-top: 2px dashed #6b7a94; }
.legend.sky::before { border-top: 3px solid var(--sky); }
@media (prefers-reduced-motion: no-preference) {
  .junctions .thread { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.6s .5s cubic-bezier(.45, 0, .2, 1) backwards; }
  .junctions .node, .junctions .end-text { animation: appear .4s 1.9s backwards; }
  @keyframes draw { from { stroke-dashoffset: 1; } }
  @keyframes appear { from { opacity: 0; } }
}

/* Sections du corps : titre à gauche, contenu à droite */
section.part { border-top: 1px solid var(--line); }
section.part:first-of-type { border-top: 0; }
section.part > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; padding-block: 88px; }
.part-head { display: flex; flex-direction: column; gap: 14px; }
.part-head h2 { font-size: var(--step-3); }
.part-head p { color: var(--muted); }
.part-body { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.big { font-size: var(--step-1); line-height: 1.6; }
.muted { color: var(--muted); }

/* Symptômes */
.symptoms { border-top: 1px solid var(--line); }
.symptoms li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.symptoms strong { font: 700 1.12rem/1.35 var(--display); letter-spacing: -0.01em; }
.symptoms span { color: var(--muted); }
.mechanism { display: flex; flex-direction: column; gap: 14px; }
.mechanism h3 { font-size: var(--step-2); }
.pull { font: 600 var(--step-2)/1.3 var(--display); letter-spacing: -0.015em; border-left: 3px solid var(--sky); padding-left: 22px; max-width: 30em; }

/* Les trois couches */
table.layers { width: 100%; border-collapse: collapse; }
.layers th, .layers td { text-align: left; vertical-align: top; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--line); }
.layers thead th { font: 600 var(--step--1) var(--body); color: var(--muted); padding-top: 0; padding-bottom: 12px; }
.layers tbody th { width: 30%; }
.layers tbody th strong { display: block; font: 700 1.2rem/1.3 var(--display); letter-spacing: -0.01em; }
.layers tbody th span { display: block; color: var(--muted); font-size: var(--step--1); margin-top: 4px; font-weight: 400; }
.layers td { color: var(--ink); }
.layers td.avoid { color: var(--muted); }
.coo { background: var(--navy); color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 32px 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px; }
.coo h3 { font-size: var(--step-2); color: #fff; }
.coo p { color: var(--on-navy-muted); }
.coo p + p { margin-top: 12px; }
.coo strong { color: var(--on-navy); font-weight: 600; }

/* Démarche : une vraie séquence, donc numérotée */
ol.steps { counter-reset: step; border-top: 1px solid var(--line); }
ol.steps li { counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
ol.steps li::before { content: counter(step); font: 700 1.6rem/1.1 var(--display); color: var(--sky-deep); grid-row: span 2; }
ol.steps h3 { font-size: 1.3rem; }
ol.steps .what { grid-column: 2; color: var(--muted); }
ol.steps .tag { grid-column: 3; grid-row: 1; align-self: start; font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
ol.steps .tag.free { color: var(--sky-deep); font-weight: 600; }
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.included div { border-left: 2px solid var(--line); padding-left: 18px; }
.included strong { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 4px; }
.included span { color: var(--muted); font-size: 0.97rem; }

/* Résultats */
.results { border-top: 1px solid var(--line); }
.results li { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.delta { font: 700 clamp(1.5rem, 1.2rem + 1vw, 1.95rem)/1.15 var(--display); letter-spacing: -0.025em; }
.delta .from { color: var(--muted); font-weight: 500; }
.who { display: block; margin-top: 8px; font-size: var(--step--1); color: var(--muted); }
.story p + p { margin-top: 8px; }
.story b { font-weight: 600; }

/* Pour qui */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.fit h3 { font-size: 1.25rem; padding-bottom: 12px; border-bottom: 2px solid var(--sky); }
.fit .no h3 { border-bottom-color: var(--line); }
.fit li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fit .no li { color: var(--muted); }

/* Félix */
.felix { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.felix img { width: 220px; height: 220px; border-radius: 50%; box-shadow: 0 0 0 4px var(--sky); }
.felix-text { display: flex; flex-direction: column; gap: 22px; }
.career li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.career li:first-child { border-top: 1px solid var(--line); }
.career .when { color: var(--muted); font-size: var(--step--1); padding-top: 2px; font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badges li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: var(--step--1); background: var(--surface); }

/* Ailleurs */
.elsewhere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.elsewhere > div { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.elsewhere > div + div { border-left: 1px solid var(--line); }
.elsewhere h3 { font-size: 1.3rem; }
.elsewhere p { color: var(--muted); font-size: 0.98rem; }
.elsewhere a.go { font-weight: 600; color: var(--sky-deep); margin-top: auto; }

/* Appel final */
.final .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: end; padding-block: 88px; }
.final h2 { font-size: var(--step-3); color: #fff; }
.final p { color: var(--on-navy-muted); margin-top: 16px; font-size: var(--step-1); }
.final .contact { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.final .contact p { font-size: var(--step--1); margin: 0; line-height: 1.7; }
.final .contact a { color: var(--on-navy); }

footer.bottom { background: var(--navy); color: var(--on-navy-muted); border-top: 1px solid var(--navy-line); font-size: var(--step--1); }
footer.bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 26px; }
footer.bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer.bottom a { color: var(--on-navy-muted); text-decoration: none; }
footer.bottom a:hover { color: #fff; }

/* Pages secondaires (légal, guide, espaces clients) */
.page-head .wrap { padding-block: 40px 64px; }
.page-head h1 { font-size: var(--step-3); color: #fff; max-width: 22em; }
.page-head p { color: var(--on-navy-muted); margin-top: 14px; }
.prose { max-width: 720px; margin: 0 auto; padding: 64px 20px 96px; }
.prose h2 { font-size: var(--step-2); margin: 44px 0 12px; }
.prose h3 { font-size: 1.2rem; margin: 30px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose a { color: var(--sky-deep); }

/* Adaptatif */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 32px 64px; }
  section.part > .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 64px; }
  .final .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .coo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  nav.main a:not(.btn) { display: none; }
  .symptoms li, .results li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fit, .included, .elsewhere { grid-template-columns: minmax(0, 1fr); }
  .elsewhere > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .felix { grid-template-columns: minmax(0, 1fr); }
  .felix img { width: 140px; height: 140px; }
  .career li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  ol.steps li { grid-template-columns: 40px minmax(0, 1fr); }
  ol.steps .tag { grid-column: 2; grid-row: auto; }
  table.layers thead { display: none; }
  .layers tr { display: grid; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .layers th, .layers td { border: 0; padding: 4px 0; width: auto; }
  .layers tbody th { width: auto; }
  .layers td::before { content: attr(data-label); display: block; font-size: var(--step--1); color: var(--muted); font-weight: 600; }
  .coo { padding: 26px 22px; }
}