/* =========================================================================
   jointheclub.fr — feuille de styles
   Reprise fidèle du handoff de design : couleurs, échelle typographique,
   rayons et espacements sont ceux spécifiés. Les prototypes étaient en
   styles inline ; ils sont ici regroupés en classes pour rendre le site
   responsive et maintenable.
   ========================================================================= */

:root {
  --ink:#131417;
  --muted:#6b7280;
  --faint:#9aa1ab;
  --body:#4b5158;
  --hair:#eceef1;
  --card-border:#e8eaed;
  --input-border:#dfe3e8;
  --alt:#f7f8f9;
  --accent:#5b708c;
  --accent-2:#9fb0c3;
  --accent-3:#c6d0dc;
  --dark:#131417;
  --dark-border:#2c2e33;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Poppins', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:var(--ink); text-decoration:none; transition:color .15s ease, background-color .15s ease; }
a:hover { color:var(--accent); }
img, canvas, svg { max-width:100%; }
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Trame ------------------------------------------------------- */
.wrap { max-width:1120px; margin:0 auto; padding-left:40px; padding-right:40px; }
.section { border-top:1px solid var(--hair); }
.section--alt { background:var(--alt); }
.section--dark { background:var(--dark); color:#fff; border-top:none; }
.section--dark h2, .section--dark h3 { color:#fff; }
.pad { padding-top:88px; padding-bottom:88px; }
.pad-lg { padding-top:96px; padding-bottom:96px; }
.pad-xl { padding-top:110px; padding-bottom:110px; }

/* ---------- Typographie ------------------------------------------------- */
.eyebrow {
  margin:0 0 22px; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.eyebrow--faint { color:var(--faint); }
.eyebrow--muted { color:var(--muted); }

.h1 { margin:0; font-size:64px; line-height:1.06; letter-spacing:-.03em; font-weight:600; max-width:760px; }
.h1--sm { font-size:52px; line-height:1.1; max-width:720px; }
.h1--xs { font-size:48px; line-height:1.12; }
.h2 { margin:0 0 56px; font-size:34px; letter-spacing:-.02em; font-weight:600; }
.h2--tight { margin:0; line-height:1.2; }
.lead { margin:0; font-size:28px; line-height:1.45; letter-spacing:-.01em; font-weight:500; max-width:720px; }
.intro { margin:30px 0 0; font-size:19px; line-height:1.6; color:var(--muted); max-width:560px; }
.prose { margin:24px 0 0; font-size:16.5px; line-height:1.7; color:var(--muted); max-width:640px; }

/* ---------- Boutons ----------------------------------------------------- */
.btn {
  display:inline-block; background:var(--ink); color:#fff;
  padding:15px 30px; border-radius:100px; font-size:15px; font-weight:500;
  white-space:nowrap; border:none; cursor:pointer; font-family:var(--sans);
}
.btn:hover { background:var(--accent); color:#fff; }
.btn--sm { padding:10px 20px; font-size:13.5px; }
.btn--block { width:100%; }
.link-underline { font-size:15px; font-weight:500; border-bottom:1px solid #d7dbe0; padding-bottom:2px; }

/* ---------- En-tête ----------------------------------------------------- */
.header { display:flex; align-items:center; justify-content:space-between; padding-top:28px; padding-bottom:28px; gap:24px; }
.wordmark { font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
.wordmark span { color:var(--accent); }
.nav { display:flex; align-items:center; gap:36px; font-size:14.5px; font-weight:500; }
.nav a { color:var(--muted); }
.nav a.is-active { color:var(--ink); }
.nav a:hover { color:var(--accent); }
.nav a.btn { color:#fff; }

/* ---------- Hero -------------------------------------------------------- */
.hero { position:relative; padding-top:96px; padding-bottom:110px; }
.hero__visual { position:absolute; right:40px; top:50px; width:420px; height:540px; opacity:.7; pointer-events:none; }
.hero__actions { display:flex; align-items:center; gap:24px; margin-top:44px; flex-wrap:wrap; }

/* ---------- Grilles ----------------------------------------------------- */
.split { display:grid; grid-template-columns:340px 1fr; gap:60px; }
.split--narrow { grid-template-columns:280px 1fr; }
.split--even { grid-template-columns:1fr 1fr; gap:80px; }
.split--right { grid-template-columns:1fr 340px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }

/* ---------- Cartes ------------------------------------------------------ */
.card { background:#fff; border:1px solid var(--card-border); border-radius:16px; padding:32px 28px; }
.card--lg { padding:36px 32px; }
.card__icon {
  width:38px; height:38px; border:1px solid #d7dee6; border-radius:100px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; color:var(--accent);
}
.card__title { margin:0 0 10px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.card__text { margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }

/* ---------- Méthode : sept étapes -------------------------------------- */
.steps { display:flex; flex-direction:column; }
.step { display:flex; align-items:baseline; gap:28px; padding:22px 0; border-bottom:1px solid var(--hair); }
.step__num { font-size:13px; font-weight:600; color:var(--accent); width:28px; flex-shrink:0; }
.step__name { font-size:19px; font-weight:600; letter-spacing:-.01em; width:180px; flex-shrink:0; }
.step__text { font-size:14.5px; color:var(--muted); line-height:1.55; }

/* ---------- Chiffres ---------------------------------------------------- */
.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.stat { border-top:1px solid #dfe3e8; padding-top:16px; }
.stat__value { margin:0; font-size:30px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__value span { color:var(--accent); }
.stat__label { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }

/* ---------- Vignette d'activité ---------------------------------------- */
.panel { background:#fff; border:1px solid var(--card-border); border-radius:16px; padding:28px 28px 22px; }
.panel__head { display:flex; align-items:center; gap:8px; margin-bottom:26px; }
.panel__dot { width:6px; height:6px; border-radius:100px; background:var(--accent); }
.panel__label { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.bars { display:flex; align-items:flex-end; gap:12px; height:120px; }
.bars > div { flex:1; border-radius:8px; transform-origin:bottom; animation:barGrow .8s ease-out backwards; }
.bars__axis { display:flex; gap:12px; margin-top:10px; }
.bars__axis span { flex:1; text-align:center; font-size:10.5px; color:var(--faint); }
@keyframes barGrow { from { transform:scaleY(.15); } to { transform:scaleY(1); } }

/* ---------- Blocs sur fond sombre -------------------------------------- */
.reasons { display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 40px; }
.reason { border-top:1px solid var(--dark-border); padding-top:20px; }
.reason h3 { margin:0 0 8px; font-size:16.5px; font-weight:600; letter-spacing:-.01em; }
.reason p { margin:0; font-size:14px; line-height:1.6; color:var(--faint); }
.approach { display:grid; grid-template-columns:repeat(2, 1fr); gap:0 40px; }
.approach__item { display:flex; align-items:baseline; gap:16px; padding:18px 0; border-top:1px solid var(--dark-border); font-size:16px; }
.approach__item span:first-child { color:var(--accent); font-size:13px; font-weight:600; }

/* ---------- Services ---------------------------------------------------- */
.phase { margin:0 0 6px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.phase-title { margin:0 0 18px; font-size:20px; font-weight:600; letter-spacing:-.01em; }
.bullets { display:flex; flex-direction:column; gap:10px; }
.bullet { display:flex; align-items:baseline; gap:12px; font-size:15px; color:var(--body); line-height:1.5; }
.bullet::before { content:''; width:5px; height:5px; border-radius:100px; background:var(--accent-2); flex-shrink:0; position:relative; top:-3px; }
.pills { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.pill { border:1px solid var(--card-border); border-radius:100px; padding:12px 24px; font-size:14.5px; font-weight:500; }
.map-card { border:1px solid var(--card-border); border-radius:20px; padding:36px 40px 28px; background:#fff; }
.map-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.map-card__head p { margin:0; }
.map-card__figure { height:420px; }

/* ---------- Formulaire -------------------------------------------------- */
.form { border:1px solid var(--card-border); border-radius:20px; padding:44px 40px; display:flex; flex-direction:column; gap:22px; background:#fff; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:13.5px; font-weight:600; }
.field input, .field textarea {
  border:1px solid var(--input-border); border-radius:10px; padding:13px 16px;
  font-size:15px; color:var(--ink); font-family:var(--sans); background:#fff; width:100%;
}
.field textarea { resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.field--pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* Piège à robots : invisible pour un humain, rempli par les automates. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__error { margin:0; font-size:14px; color:#9c2b2b; }
.form__note { margin:0; font-size:12.5px; line-height:1.5; color:var(--faint); }
.sent {
  border:1px solid var(--card-border); border-radius:20px; padding:64px 48px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px;
}
.sent__check {
  width:52px; height:52px; border:1px solid var(--accent); border-radius:100px;
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:22px;
}
.sent h2 { margin:0; font-size:24px; font-weight:600; letter-spacing:-.01em; }
.sent p { margin:0; font-size:15.5px; line-height:1.6; color:var(--muted); }
.contact-details { margin-top:48px; padding-top:32px; border-top:1px solid var(--hair); }
.contact-details p:first-child { margin-top:0; }
.contact-label { margin:28px 0 6px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.contact-value { margin:0; font-size:17px; font-weight:500; }

/* ---------- Pied de page ------------------------------------------------ */
.footer { border-top:1px solid var(--hair); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:32px; padding-bottom:32px; font-size:13px; color:var(--faint); flex-wrap:wrap; }
.footer__mark { font-family:var(--display); font-weight:600; color:#c3c8cf; }
.footer__links { display:flex; gap:28px; flex-wrap:wrap; }
.footer__links a { color:var(--faint); }

/* ---------- Centrage ---------------------------------------------------- */
.center { text-align:center; }
.center .lead { margin-left:auto; margin-right:auto; }
.statement { margin:0 auto; font-size:30px; line-height:1.45; letter-spacing:-.015em; font-weight:500; max-width:720px; }
.statement--sm { font-size:26px; line-height:1.5; letter-spacing:-.01em; max-width:680px; }

/* =========================================================================
   Adaptations aux écrans étroits.
   Les prototypes étaient dessinés en 1120px ; ces règles descendent la
   même mise en page jusqu'au mobile sans changer la hiérarchie.
   ========================================================================= */
@media (max-width:1080px) {
  .hero__visual { width:340px; height:440px; opacity:.5; }
  .h1 { font-size:56px; max-width:600px; }
}

@media (max-width:900px) {
  .wrap { padding-left:24px; padding-right:24px; }
  .hero__visual { position:static; width:100%; height:280px; opacity:.6; margin-bottom:32px; }
  .hero { padding-top:56px; padding-bottom:72px; }
  .h1 { font-size:44px; max-width:none; }
  .h1--sm, .h1--xs { font-size:38px; }
  .h2 { font-size:28px; margin-bottom:36px; }
  .lead { font-size:23px; }
  .statement { font-size:25px; }
  .statement--sm { font-size:21px; }
  .intro { font-size:17px; max-width:none; }
  .pad, .pad-lg, .pad-xl { padding-top:64px; padding-bottom:64px; }
  .split, .split--narrow, .split--even, .split--right { grid-template-columns:1fr; gap:36px; }
  .grid-3, .grid-2, .reasons, .approach { grid-template-columns:1fr; }
  .reasons { gap:28px; }
  .stats { grid-template-columns:1fr 1fr; }
  .step { flex-wrap:wrap; gap:12px 20px; }
  .step__name { width:auto; }
  .step__text { width:100%; padding-left:48px; }
  .form { padding:32px 24px; }
  .map-card { padding:24px 20px 20px; }
  .map-card__figure { height:300px; }
  .nav { gap:22px; font-size:14px; }
}

@media (max-width:640px) {
  .header { flex-direction:column; align-items:flex-start; gap:18px; }
  .nav { flex-wrap:wrap; gap:18px; }
  .h1 { font-size:34px; }
  .h1--sm, .h1--xs { font-size:32px; }
  .stats { grid-template-columns:1fr; }
  .field--pair { grid-template-columns:1fr; }
  .pills { gap:10px; }
  .pill { padding:10px 18px; font-size:13.5px; }
  .sent { padding:44px 24px; }
  .footer__inner { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Respecte le réglage système « animations réduites ». */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}