/* juhe-custom.css — couche éditoriale minimale pour Accueil / À propos / Contact.
   Charte : DESIGN.md. Namespace jx-* pour ne jamais heurter le CSS Webflow.
   Principe : peu d'éléments, beaucoup de blanc, un seul écart typo (monospace)
   pour signaler le travail en code / IA. Pas de bloc sombre, pas de grille de cartes. */

:root {
  --jx-ink: #151515;
  --jx-ink-soft: #5b5b58;
  --jx-paper: #efeee9;
  --jx-line: #dcdad3;
  --jx-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---- section approche (home) : une affirmation, une preuve ---------- */
.jx-approach { position: relative; padding: 122px 24px; overflow: hidden; }
.jx-approach::before {
  content: ""; position: absolute; inset: -2px 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(21,21,21,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,21,21,.05) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  /* la grille se fond en haut et en bas */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.jx-approach-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; text-align: center; }
.jx-approach-title {
  font-family: "Satoshi", sans-serif; font-weight: 500;
  font-size: clamp(32px, 5vw, 60px); line-height: 1.03; letter-spacing: -.025em;
  color: var(--jx-ink); margin: 0;
}
.jx-approach-text {
  font-family: "Satoshi", sans-serif; font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5;
  color: var(--jx-ink-soft); max-width: 50ch; margin: 22px auto 0;
}
.jx-approach-proof {
  font-family: var(--jx-mono); font-size: 13.5px; letter-spacing: -.01em;
  color: var(--jx-ink); opacity: .72; margin: 34px 0 0;
}

/* ---- ligne de provenance sous les logos (home) --------------------- */
.jx-provenance {
  font-family: "Satoshi", sans-serif; font-size: 14px; line-height: 1.55;
  color: var(--jx-ink-soft); margin: 14px auto 0; max-width: 62ch;
}

/* ---- À propos : éditorial (masthead centré + lignes magazine) ------- */
.jx-about { padding: 116px 24px 56px; text-align: center; }
.jx-about-wrap { max-width: 1040px; margin: 0 auto; }
.jx-about-kicker {
  font-family: var(--jx-mono); font-size: 13px; letter-spacing: 0;
  color: var(--jx-ink-soft); margin: 0 0 26px;
}
.jx-about-h1 {
  font-family: "Satoshi", sans-serif; font-weight: 500;
  font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--jx-ink); margin: 0 auto; max-width: 15ch;
}
.jx-about-lead {
  font-family: "Satoshi", sans-serif; font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5;
  color: var(--jx-ink-soft); max-width: 58ch; margin: 34px auto 0;
}
.jx-about-rows { padding: 20px 24px 112px; }
.jx-rows-wrap { max-width: 1040px; margin: 0 auto; }
.jx-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 48px;
  padding: 46px 0; border-top: 1px solid var(--jx-line);
}
.jx-row:last-child { border-bottom: 1px solid var(--jx-line); }
.jx-row-label {
  font-family: "Satoshi", sans-serif; font-weight: 500; font-size: 23px;
  color: var(--jx-ink); display: flex; align-items: baseline; gap: 12px; height: fit-content;
}
.jx-row-label .jx-idx { font-family: var(--jx-mono); font-size: 13px; color: var(--jx-ink-soft); font-weight: 400; }
.jx-row-body p {
  font-family: "Satoshi", sans-serif; font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.62; color: var(--jx-ink); margin: 0; max-width: 60ch;
}
.jx-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.jx-skill {
  font-family: "Satoshi", sans-serif; font-size: 13px; color: var(--jx-ink);
  border: 1px solid var(--jx-line); border-radius: 999px; padding: 7px 15px; background: #fff;
}

/* ---- contact : accroche + deux entrées claires --------------------- */
.jx-hero-sub {
  font-family: "Satoshi", sans-serif; font-weight: 400;
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55;
  color: var(--jx-ink-soft); max-width: 50ch; margin: 22px auto 4px; text-align: center;
}
.jx-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 52px auto 0;
  max-width: 900px;
}
.jx-panel { border: 1px solid var(--jx-line); border-radius: 18px; padding: 34px 30px; background: #fff; }
.jx-panel.dark { background: var(--jx-ink); border-color: var(--jx-ink); }
.jx-panel h3 { font-family: "Satoshi", sans-serif; font-weight: 600; font-size: 20px; color: var(--jx-ink); margin: 0 0 10px; }
.jx-panel.dark h3 { color: #fff; }
.jx-panel p { font-family: "Satoshi", sans-serif; font-size: 15.5px; line-height: 1.55; color: var(--jx-ink-soft); margin: 0 0 22px; }
.jx-panel.dark p { color: #b4b4b0; }
.jx-contact-links { display: flex; flex-direction: column; gap: 12px; }
.jx-clink { font-family: "Satoshi", sans-serif; font-size: 16px; font-weight: 500; color: var(--jx-ink); text-decoration: none; width: fit-content; }
.jx-clink:hover { text-decoration: underline; }
.jx-panel.dark .jx-clink { color: #fff; }
.jx-btn { font-family: "Satoshi", sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; padding: 14px 26px; border-radius: 999px; display: inline-block; transition: transform .15s ease; }
.jx-btn:hover { transform: translateY(-1px); }
.jx-btn-dark { background: var(--jx-ink); color: #fff; }

/* ---- entrée au scroll (discrète) ----------------------------------- */
.jx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.jx-reveal.jx-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .jx-reveal { opacity: 1; transform: none; transition: none; } }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 767px) {
  .jx-approach { padding: 82px 20px; }
  .jx-approach::before { background-size: 40px 40px; }
  .jx-about { padding: 82px 20px 40px; }
  .jx-about-rows { padding: 8px 20px 82px; }
  .jx-row { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .jx-contact-grid { grid-template-columns: 1fr; }
}