/* ---------- Notes : héros ---------- */
.hero-note { padding-bottom: 80px; }
.hero-note h1 { max-width: 22ch; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -0.04em; }
.hero-note .lead { max-width: 40rem; }
.note-meta {
  margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-ink-dim);
}
.note-meta span { opacity: 0.5; }
.note-meta a { text-decoration: none; color: var(--green-soft); }
.note-meta a:hover { color: var(--on-ink); }

/* ---------- Notes : article ---------- */
.note-sec { padding: 96px 0 140px; }
/* styles.css uses .note for SVG diagram labels (mono, 11px): reset it for the article. */
article.note {
  max-width: 68ch; margin: 0 auto;
  font-family: Geist, system-ui, sans-serif; letter-spacing: normal; fill: currentColor;
  font-size: 18px; line-height: 1.7; color: var(--ink);
  overflow-wrap: break-word;
}
.note > :first-child { margin-top: 0; }
.note > p:first-child { font-size: 21px; line-height: 1.6; font-weight: 300; }
.note p { margin-top: 1.1em; }
.note h2 {
  margin-top: 2.4em; max-width: none;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600;
}
.note h2 + p, .note h2 + h3, .note h2 + ul, .note h2 + ol { margin-top: 0.8em; }
.note h3 { margin-top: 2em; font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }
.note h3 + p, .note h3 + ul, .note h3 + ol { margin-top: 0.6em; }
.note h4 { margin-top: 1.6em; font-size: 17px; font-weight: 600; }
.note strong { font-weight: 600; }
.note em { font-style: italic; }
.note a { color: var(--green); text-decoration: underline; text-decoration-color: var(--green-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color 0.25s; }
.note a:hover { text-decoration-color: var(--green); }

.note .kicker {
  margin-top: 1.8em;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
  color: var(--green);
}
.note .kicker strong { font-weight: 500; }
.note .kicker + ul, .note .kicker + ol { margin-top: 0.5em; }

.note ul, .note ol { margin-top: 1em; padding-left: 1.4em; }
.note li { margin-top: 0.45em; padding-left: 0.2em; }
.note li::marker { color: var(--green); }
.note ol li::marker { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.85em; }
.note ul.checklist { list-style: none; padding-left: 0; }
.note ul.checklist li { position: relative; padding-left: 1.9em; }
.note ul.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.95em; height: 0.95em; border: 1.5px solid var(--green); border-radius: 4px;
}

.note blockquote {
  margin: 1.8em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--green);
  font-family: "Instrument Serif", Georgia, serif; font-size: 26px; line-height: 1.35; color: var(--ink);
}
.note blockquote p { margin-top: 0; }

.note code {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.86em;
  background: var(--card); border: 1px solid var(--rule); border-radius: 5px; padding: 0.08em 0.35em;
}
.note pre {
  margin-top: 1.4em; padding: 22px 24px; border-radius: 14px;
  background: var(--ink); color: var(--on-ink);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13.5px; line-height: 1.65;
  white-space: pre-wrap; overflow-x: auto;
}
.note pre code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }

.note .table { margin-top: 1.4em; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); }
.note table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.note th, .note td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.note th { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); background: var(--paper); }
.note tr:last-child td { border-bottom: 0; }
.note hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--rule); }

/* ---------- Notes : fin d'article ---------- */
.note-end { max-width: 68ch; margin: 96px auto 0; }
.note-cta {
  padding: 36px 36px 32px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--rule);
}
.note-cta .nt { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.note-cta p:not(.nt) { margin-top: 12px; color: var(--dim); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.note-cta .btn { margin-top: 24px; }

.note-more { margin-top: 72px; }
.note-more ul { list-style: none; margin-top: 18px; border-top: 1px solid var(--rule); }
.note-more li { border-bottom: 1px solid var(--rule); }
.note-more a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 18px 0; text-decoration: none; font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em;
  transition: color 0.25s;
}
.note-more a small { flex: 0 0 auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; color: var(--dim); }
.note-more a:hover { color: var(--green); }

/* ---------- Notes : index ---------- */
.note-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.note-card a {
  height: 100%; display: flex; flex-direction: column;
  padding: 32px 32px 28px; border-radius: 20px; text-decoration: none;
  background: var(--card); border: 1px solid var(--rule);
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.note-card a:hover { border-color: #CDD5DC; transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(10, 33, 55, 0.35); }
.nc-meta { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.note-card h2 { margin-top: 14px; max-width: none; font-size: clamp(22px, 2vw, 27px); line-height: 1.18; letter-spacing: -0.025em; }
.note-card p { margin-top: 12px; color: var(--dim); font-size: 16px; line-height: 1.55; }
.nc-go { margin-top: auto; padding-top: 24px; display: inline-flex; gap: 8px; font-size: 15px; font-weight: 500; color: var(--green); }
.nc-go span { transition: transform 0.4s var(--ease); }
.note-card a:hover .nc-go span { transform: translateX(4px); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .hero-note { padding-bottom: 64px; }
  .note-sec { padding: 64px 0 96px; }
  article.note { font-size: 17px; }
  .note > p:first-child { font-size: 19px; }
  .note blockquote { font-size: 22px; }
  .note pre { padding: 18px; font-size: 12.5px; }
  .note-end { margin-top: 72px; }
  .note-cta { padding: 28px 22px 24px; }
  .note-list { grid-template-columns: 1fr; }
  .note-card a { padding: 26px 22px 22px; }
}

/* ---------- Pages de service : questions ---------- */
.faq-list { margin-top: 40px; max-width: 820px; border-top: 1px solid var(--rule); }
.faq-i { border-bottom: 1px solid var(--rule); }
.faq-i summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 19px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary span { flex: 0 0 auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 18px; color: var(--green); transition: transform 0.3s var(--ease); }
.faq-i[open] summary span { transform: rotate(45deg); }
.faq-i p { padding: 0 0 24px; max-width: 64ch; color: var(--dim); font-size: 17px; line-height: 1.65; }
@media (max-width: 720px) {
  .faq-i summary { font-size: 17px; padding: 18px 0; }
  .faq-i p { font-size: 16px; }
}