/* ============================================================
   E-PORTFOLIO — Nathan Defrecheux
   « De l'autodidacte au marketeur international »
   Système éditorial sobre & académique. Ivoire chaud + encre profonde.
   Accent qui se réchauffe du bleu (Soi) au terracotta (Relation),
   en tons mats et posés — un livrable, pas une démo flashy.
   ============================================================ */

:root{
  --ivory:#FAF6EC;
  --ivory-2:#EFE7D5;
  --paper:#FFFDF8;
  --ink:#221E17;
  --ink-soft:#655C4E;
  --ink-faint:#9E9484;
  --hair:rgba(34,30,23,0.12);
  --hair-strong:rgba(34,30,23,0.24);

  /* accent journey end-points (sobres) */
  --cold:oklch(0.46 0.085 252);
  --warm:oklch(0.53 0.105 46);

  --accent:var(--cold);
  --accent-soft:color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-tint:color-mix(in oklab, var(--accent) 6%, var(--paper));

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw:1160px;
}

/* accent palette — cold → warm le long du récit, désaturé/posé */
.acc-hero  { --accent:oklch(0.46 0.085 252); }
.acc-qui   { --accent:oklch(0.47 0.085 246); }
.acc-s1    { --accent:oklch(0.49 0.075 222); }
.acc-s2    { --accent:oklch(0.55 0.095 64);  }
.acc-s3    { --accent:oklch(0.55 0.105 48);  }
.acc-tests { --accent:oklch(0.53 0.10 44);   }
.acc-conc  { --accent:oklch(0.52 0.105 42);  }
[class*="acc-"]{
  --accent-soft:color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-tint:color-mix(in oklab, var(--accent) 6%, var(--paper));
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent-soft);}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- progress bar ---------- */
.progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:90;background:rgba(34,30,23,0.06);}
.progress__fill{
  height:100%;width:0;
  background:linear-gradient(90deg,
     oklch(0.46 0.085 252) 0%, oklch(0.49 0.075 222) 28%,
     oklch(0.55 0.095 64) 64%, oklch(0.52 0.105 42) 100%);
  background-size:100vw 100%;background-repeat:no-repeat;
}

/* ---------- top identity bar ---------- */
.topbar{
  position:fixed;top:0;left:0;width:100%;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 32px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);pointer-events:none;
  background:color-mix(in oklab,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.08) blur(10px);backdrop-filter:saturate(1.08) blur(10px);
  border-bottom:1px solid color-mix(in oklab,var(--hair) 55%,transparent);
}
.topbar__mark{font-family:var(--serif);font-size:17px;letter-spacing:0.01em;text-transform:none;color:var(--ink);font-weight:600;}
.topbar__meta{font-family:var(--mono);font-size:11px;}

/* ---------- side anchor nav ---------- */
.nav{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:85;display:flex;flex-direction:column;gap:18px;align-items:flex-end;}
.nav__link{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);transition:color .3s ease;}
.nav__link .nav__txt{opacity:0;transform:translateX(6px);transition:opacity .3s ease, transform .3s ease;font-family:var(--mono);font-size:10px;white-space:nowrap;}
.nav__link:hover .nav__txt{opacity:1;transform:none;}
.nav__dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-faint);background:transparent;transition:all .3s ease;flex:none;}
.nav__link.is-active{color:var(--ink);}
.nav__link.is-active .nav__dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.nav__link.is-active .nav__txt{opacity:1;transform:none;}

/* ============================================================ TYPOGRAPHY ============================================================ */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--accent);}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--ink);}

/* ============================================================ SECTIONS ============================================================ */
.section{position:relative;padding:clamp(80px,11vw,168px) 0;border-top:1px solid var(--hair);}
.section__head{margin-bottom:clamp(40px,6vw,76px);}
.section__num{font-family:var(--serif);font-size:clamp(38px,6.5vw,70px);font-weight:600;line-height:1;color:var(--accent);opacity:0.92;}
.section__title{font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;font-size:clamp(34px,5.2vw,60px);line-height:1.03;margin:.18em 0 0;max-width:18ch;}
.section__lead{margin-top:1.4rem;max-width:58ch;font-size:clamp(18px,1.5vw,21px);color:var(--ink-soft);line-height:1.7;}
.section__lead b{color:var(--ink);font-weight:600;}

/* ============================================================ HERO ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 64px;border-top:0;
  background:radial-gradient(120% 90% at 88% 6%, var(--accent-soft) 0%, transparent 48%), var(--ivory);}
.hero__eyebrow{margin-bottom:clamp(26px,4.5vw,46px);}
.hero__title{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;font-size:clamp(40px,7.4vw,92px);line-height:1.0;color:var(--ink);margin:0;}
.hero__title .je{color:var(--cold);}
.hero__title .nous{color:var(--warm);}
.hero__sub{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,32px);color:var(--ink-soft);margin-top:clamp(20px,2.6vw,32px);max-width:30ch;line-height:1.3;}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(32px,5vw,52px);}
.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--hair-strong);border-radius:999px;font-size:13.5px;color:var(--ink);background:color-mix(in oklab,var(--paper) 70%,transparent);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.hero__quote{margin-top:clamp(44px,7vw,80px);padding-left:24px;border-left:2px solid var(--accent);max-width:46ch;}
.hero__quote .q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,2.3vw,28px);line-height:1.4;color:var(--ink);margin:0;}
.hero__quote .cap{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-faint);}
.scroll-cue .line{width:1px;height:38px;background:var(--hair-strong);position:relative;overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute;left:0;top:-60%;width:100%;height:60%;background:var(--accent);animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{top:-60%}60%,100%{top:120%}}

/* ============================================================ CARDS / GRIDS ============================================================ */
.card{background:var(--paper);border:1px solid var(--hair);border-radius:8px;padding:clamp(22px,3vw,34px);}
.card h3{font-family:var(--serif);font-weight:600;font-size:24px;margin:0 0 .5em;letter-spacing:-0.01em;}
.card p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.66;}
.card p b{color:var(--ink);font-weight:600;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.label-sm{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}

/* ============================================================ 2 SPHÈRES / 4 DIMENSIONS ============================================================ */
.spheres{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;position:relative;margin-top:8px;}
.sphere{position:relative;border-radius:18px;padding:clamp(26px,3.4vw,40px);border:1px solid var(--hair);overflow:hidden;}
.sphere--soi{--sa:oklch(0.47 0.085 246);background:radial-gradient(120% 130% at 18% 12%,color-mix(in oklab,oklch(0.47 0.085 246) 13%,var(--paper)) 0%, var(--paper) 72%);}
.sphere--rel{--sa:oklch(0.55 0.105 52);background:radial-gradient(120% 130% at 82% 12%,color-mix(in oklab,oklch(0.55 0.105 52) 13%,var(--paper)) 0%, var(--paper) 72%);}
.sphere__tag{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:color-mix(in oklab,var(--sa) 72%,var(--ink));}
.sphere__name{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-0.01em;margin:.2em 0 .9em;}
.sphere__name b{color:var(--sa);}
.dims{display:grid;gap:14px;}
.dim{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:color-mix(in oklab,var(--sa) 5%,var(--paper));border:1px solid color-mix(in oklab,var(--sa) 18%,transparent);}
.dim__ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:color-mix(in oklab,var(--sa) 15%,var(--paper));color:var(--sa);}
.dim__ico svg{width:18px;height:18px;}
.dim__t{font-weight:600;font-size:15.5px;line-height:1.3;}
.dim__d{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-top:2px;}
.spheres__axis{grid-column:1 / -1;display:flex;justify-content:center;margin-top:4px;}
.spheres__axis span{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:14px;}
.spheres__axis span::before,.spheres__axis span::after{content:"";width:60px;height:1px;background:linear-gradient(90deg,oklch(0.47 0.085 246),oklch(0.55 0.105 52));}

/* dimension map row */
.dim-map{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:clamp(32px,5vw,56px);padding-top:22px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:12px;color:var(--ink-faint);}
.dim-map__lab{text-transform:uppercase;letter-spacing:0.14em;color:var(--ink-soft);}
.dim-map__i{display:inline-flex;gap:5px;}
.dim-map__i em{font-style:normal;color:var(--accent);font-weight:500;}

/* ============================================================ BELIEF / DRIVERS ============================================================ */
.belief{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:24px;}
.belief__box{border-radius:12px;padding:24px 26px;border:1px solid var(--hair);}
.belief__box.is-limit{background:color-mix(in oklab,var(--cold) 7%,var(--paper));border-color:color-mix(in oklab,var(--cold) 22%,transparent);}
.belief__box.is-help{background:color-mix(in oklab,var(--warm) 8%,var(--paper));border-color:color-mix(in oklab,var(--warm) 26%,transparent);}
.belief__lab{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
.belief__q{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.3;}
.belief__note{margin-top:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.belief__arrow{font-size:26px;color:var(--accent);display:flex;align-items:center;}
.belief__box.is-limit .belief__q{color:color-mix(in oklab,var(--cold) 55%,var(--ink));text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--cold) 40%,transparent);}
.facette-flag{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 16px;border-radius:999px;background:var(--accent-soft);font-size:14px;font-weight:600;color:color-mix(in oklab,var(--accent) 55%,var(--ink));}

.drivers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px;}
.driver{position:relative;border:1px solid var(--hair);border-radius:12px;padding:26px 28px;background:var(--paper);}
.driver__rank{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);}
.driver__name{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.2vw,27px);margin:.2em 0 .1em;color:var(--accent);}
.driver dl{margin:16px 0 0;display:grid;gap:12px;}
.driver dt{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}
.driver dd{margin:2px 0 0;font-size:15px;color:var(--ink-soft);line-height:1.55;}
.driver dd em{font-style:italic;color:var(--ink);}

/* ============================================================ SITUATIONS ============================================================ */
.situation{margin-top:clamp(48px,7vw,90px);}
.situation:first-of-type{margin-top:0;}
.sit-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;}
.sit-badge{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1;color:var(--paper);background:var(--accent);width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);border-radius:16px;display:grid;place-items:center;flex:none;}
.sit-head__main{flex:1;min-width:260px;}
.sit-kicker{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);}
.sit-title{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.1vw,38px);letter-spacing:-0.01em;margin:.14em 0 0;}
.sit-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--hair-strong);color:var(--ink-soft);}
.tag.is-shift{background:var(--accent-soft);border-color:transparent;color:color-mix(in oklab,var(--accent) 52%,var(--ink));}
.sit-ctx{margin-top:22px;max-width:64ch;font-size:17px;color:var(--ink-soft);line-height:1.75;}
.sit-ctx b{color:var(--ink);font-weight:600;}

.sit-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(28px,4vw,52px);margin-top:clamp(32px,4vw,48px);align-items:start;}
.sit-modelhead{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;}
.sit-modelhead .mh-t{font-family:var(--serif);font-weight:600;font-size:22px;}
.sit-modelhead .mh-k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}

/* ---------- GIBBS WHEEL ---------- */
.gibbs-wrap{display:block;}
.gibbs{width:min(330px,86%);height:auto;display:block;margin:2px auto 24px;}
.gibbs-ring{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:0.5;stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1);}
.is-drawn .gibbs-ring{stroke-dashoffset:0;}
.gibbs-node circle{fill:var(--paper);stroke:var(--accent);stroke-width:1.6;}
.gibbs-node text{font-family:var(--serif);font-weight:600;font-size:22px;fill:var(--accent);text-anchor:middle;dominant-baseline:central;}
.gibbs-scale{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);}
.is-drawn .gibbs-scale{opacity:1;transform:scale(1);}
.gibbs-label{font-family:var(--sans);font-weight:600;font-size:13px;fill:var(--ink);opacity:0;transition:opacity .5s ease;}
.is-drawn .gibbs-label{opacity:1;}
.gibbs-center{font-family:var(--serif);font-weight:600;fill:var(--ink-faint);text-anchor:middle;}
.gibbs-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;row-gap:13px;margin:0;padding:0;list-style:none;}
.gleg{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;}
.gleg__n{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--accent);width:26px;height:26px;border-radius:50%;border:1.4px solid var(--accent-soft);display:grid;place-items:center;flex:none;}
.gleg__t b{display:block;font-weight:600;font-size:14px;color:var(--ink);}
.gleg__t span{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}

/* ---------- DRISCOLL ---------- */
.driscoll{position:relative;display:grid;gap:18px;}
.driscoll__track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.driscoll__line{position:absolute;top:34px;left:6%;right:6%;height:2px;background:var(--hair);z-index:0;}
.driscoll__line::after{content:"";position:absolute;inset:0;width:0;background:var(--accent);transition:width 1.3s cubic-bezier(.65,0,.35,1);}
.is-drawn .driscoll__line::after{width:100%;}
.dstep{position:relative;z-index:1;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);}
.is-drawn .dstep{opacity:1;transform:none;}
.dstep__node{width:68px;height:68px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--paper);border:1.8px solid var(--accent);color:var(--accent);font-family:var(--serif);font-weight:600;font-size:20px;}
.dstep__q{font-family:var(--serif);font-weight:600;font-style:italic;font-size:20px;}
.dstep__g{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);margin:3px 0 10px;}
.dstep__d{font-size:14px;color:var(--ink-soft);line-height:1.55;max-width:30ch;margin:0 auto;}
.dstep__d b{color:var(--ink);font-weight:600;}

/* ---------- CHAINS ---------- */
.chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-top:6px;}
.chain__node{flex:1;min-width:120px;border:1px solid var(--hair);border-radius:10px;padding:15px 17px;background:var(--paper);position:relative;opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease;}
.is-drawn .chain__node{opacity:1;transform:none;}
.chain__node .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);}
.chain__node .v{font-size:14.5px;margin-top:6px;line-height:1.45;color:var(--ink);}
.chain__arrow{display:flex;align-items:center;color:var(--accent);font-size:18px;padding:0 6px;flex:none;opacity:0;transition:opacity .5s ease;}
.is-drawn .chain__arrow{opacity:0.7;}

/* ---------- TOOLBOX ---------- */
.toolbox{margin-top:clamp(36px,5vw,60px);}
.toolbox__head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.toolbox__head .tline{flex:1;height:1px;background:var(--hair);}
.toolbox__head .tk-lab{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.tool{border:1px solid var(--hair);border-radius:10px;padding:20px 22px;background:var(--accent-tint);}
.tool--wide{grid-column:1 / -1;}
.tool__t{font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tool__side{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);border-radius:5px;padding:2px 7px;}
.tool__d{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.tool__d em{font-style:italic;color:var(--ink);}
.tool .serif-it{display:block;}
.stepper{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.stepper span{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:6px;background:color-mix(in oklab,var(--accent) 11%,var(--paper));color:color-mix(in oklab,var(--accent) 52%,var(--ink));display:inline-flex;align-items:center;gap:6px;}
.stepper span b{color:var(--accent);}

/* ---------- THOMAS-KILMANN MAP (SVG) ---------- */
.tkmap{width:100%;height:auto;max-width:420px;margin:14px auto 4px;display:block;}
.tkmap__axis{stroke:var(--hair-strong);stroke-width:1.4;}
.tkmap__axt{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;fill:var(--ink-faint);}
.tkmap__pt circle{fill:var(--hair-strong);transition:fill .3s ease;}
.tkmap__pt text{font-family:var(--sans);font-size:11.5px;font-weight:600;fill:var(--ink-soft);}
.tkmap__pt.is-on circle{fill:var(--accent);stroke:var(--accent-soft);stroke-width:8px;}
.tkmap__pt.is-on text{fill:var(--ink);}
.tkmap__pt.is-off{opacity:0.5;}
.tkmap__pt.is-off circle{fill:var(--ink-faint);}

/* ---------- JOURNEY (S3 admission) ---------- */
.journey{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;}
.journey__line{position:absolute;top:18px;left:9%;right:9%;height:2px;background:var(--hair);z-index:0;}
.journey__line::after{content:"";position:absolute;inset:0;width:0;background:var(--accent);transition:width 1.4s cubic-bezier(.65,0,.35,1);}
.is-drawn .journey__line::after{width:100%;}
.jstep{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);}
.is-drawn .jstep{opacity:1;transform:none;}
.jstep__dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.8px solid var(--accent);color:var(--accent);font-family:var(--serif);font-weight:600;font-size:15px;margin-bottom:6px;}
.jstep.is-key .jstep__dot{background:var(--accent);color:var(--paper);box-shadow:0 0 0 5px var(--accent-soft);}
.jstep b{font-size:14px;color:var(--ink);}
.jstep__d{font-size:12.5px;color:var(--ink-soft);line-height:1.4;max-width:16ch;}
.journey__note{margin-top:22px;font-size:14px;color:var(--ink-soft);line-height:1.6;border-left:2px solid var(--accent-soft);padding-left:16px;}
.journey__note b{color:var(--ink);font-weight:600;}

/* ---------- PISTES D'AMÉLIORATION ---------- */
.pistes{margin-top:clamp(30px,4.5vw,46px);border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:10px;padding:22px 26px 24px;background:var(--accent-tint);}
.pistes__head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in oklab,var(--accent) 55%,var(--ink));font-weight:500;}
.pistes__head svg{width:18px;height:18px;color:var(--accent);}
.pistes__list{margin:14px 0 0;padding-left:22px;display:grid;gap:10px;}
.pistes__list li{font-size:15px;color:var(--ink-soft);line-height:1.6;padding-left:4px;}
.pistes__list li::marker{color:var(--accent);font-family:var(--serif);font-weight:600;}
.pistes__list li b{color:var(--ink);font-weight:600;}

/* ---------- PROOF (real photo) ---------- */
.proof--real{margin:clamp(34px,4.5vw,52px) 0 0;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:color-mix(in oklab,var(--ink) 4%,var(--paper));padding:0;display:flex;flex-direction:column;min-height:0;text-align:left;}
.proof--real img{display:block;max-width:100%;max-height:520px;width:auto;height:auto;margin:0 auto;}
.proof--portrait img{max-height:600px;}
.proof--real figcaption{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 20px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--hair);background:var(--paper);line-height:1.5;}
.proof__tag{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);flex:none;}

/* ============================================================ TESTS ============================================================ */
.test-block{margin-top:clamp(40px,5vw,64px);}
.test-block:first-of-type{margin-top:0;}
.test-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap;}
.test-head h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,30px);margin:0;letter-spacing:-0.01em;}
.test-head .src{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}
.test-note{font-size:14.5px;color:var(--ink-soft);max-width:62ch;margin:6px 0 26px;}

.bars{display:grid;gap:14px;}
.bar{display:grid;grid-template-columns:minmax(110px,200px) 1fr auto;gap:18px;align-items:center;}
.bar__label{font-size:14.5px;font-weight:500;}
.bar__label small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-top:1px;}
.bar__track{position:relative;height:16px;border-radius:999px;background:color-mix(in oklab,var(--ink) 9%,var(--ivory-2));overflow:visible;}
.bar__fill{height:100%;width:0;border-radius:999px;background:var(--accent);transition:width 1.15s cubic-bezier(.22,1,.36,1);}
.bar.tier-2 .bar__fill{background:color-mix(in oklab,var(--accent) 66%,var(--paper));}
.bar.tier-3 .bar__fill{background:color-mix(in oklab,var(--accent) 42%,var(--ink-faint));}
.bar__val{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);min-width:28px;text-align:right;}
.bars.has-threshold .bar__track::after{content:"";position:absolute;left:var(--th,80%);top:-6px;bottom:-6px;width:0;border-left:1.5px dashed var(--ink-faint);}
.threshold-cap{display:flex;justify-content:flex-end;margin-top:10px;}
.threshold-cap span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;}
.threshold-cap span::before{content:"";width:14px;border-top:1.5px dashed var(--ink-faint);}
.tier-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;}
.tier-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.tier-legend i{width:14px;height:14px;border-radius:4px;}
.tl1{background:var(--accent);}
.tl2{background:color-mix(in oklab,var(--accent) 66%,var(--paper));}
.tl3{background:color-mix(in oklab,var(--accent) 42%,var(--ink-faint));}
.tests-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;}

.mbti{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;border:1px solid var(--hair);border-radius:14px;padding:clamp(24px,3vw,38px);background:var(--accent-tint);}
.mbti__glyph{width:clamp(78px,9vw,108px);height:clamp(78px,9vw,108px);border-radius:20px;background:var(--accent);color:var(--paper);display:grid;place-items:center;flex:none;}
.mbti__glyph svg{width:46%;height:46%;}
.mbti__name{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,38px);letter-spacing:-0.01em;}
.mbti__fam{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-top:2px;}
.mbti__d{font-size:15px;color:var(--ink-soft);margin-top:12px;max-width:54ch;line-height:1.6;}
.mbti__d b{color:var(--ink);font-weight:600;}
.tests-foot{margin-top:clamp(28px,4vw,40px);font-size:13.5px;color:var(--ink-faint);font-style:italic;max-width:72ch;}

/* ============================================================ CONCLUSION ============================================================ */
.conc{background:radial-gradient(120% 90% at 12% 100%, var(--accent-soft) 0%, transparent 50%), var(--ivory);}
.conc__big{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;font-size:clamp(34px,5.4vw,66px);line-height:1.04;max-width:18ch;margin:.1em 0 0;}
.conc__big .je{color:var(--cold);}
.conc__big .nous{color:var(--warm);}
.conc-arc{display:flex;align-items:center;gap:0;margin:clamp(36px,5vw,56px) 0;flex-wrap:wrap;}
.conc-arc__node{flex:1;min-width:200px;border:1px solid var(--hair);border-radius:14px;padding:24px 26px;background:var(--paper);}
.conc-arc__node .step{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}
.conc-arc__node.is-soi .step{color:var(--cold);}
.conc-arc__node.is-rel .step{color:var(--warm);}
.conc-arc__node h4{font-family:var(--serif);font-weight:600;font-size:21px;margin:8px 0 8px;}
.conc-arc__node p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.6;}
.conc-arc__link{padding:0 20px;color:var(--accent);font-size:24px;}
.conc-statement{border-left:2px solid var(--accent);padding-left:26px;max-width:48ch;margin-top:8px;}
.conc-statement p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(21px,2.4vw,30px);line-height:1.34;color:var(--ink);margin:0;}
.signature{margin-top:clamp(44px,6vw,72px);display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.signature__name{font-family:var(--serif);font-weight:600;font-size:26px;}
.signature__meta{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);}
.signature__rule{flex:1;height:1px;background:var(--hair);min-width:40px;}

/* ============================================================ FOOTER ============================================================ */
.foot{border-top:1px solid var(--hair);padding:26px 0;background:var(--ivory);}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--ink-faint);}
.foot__link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);padding-bottom:1px;}
.foot__link:hover{border-color:var(--accent);}

/* ============================================================ REVEAL ============================================================ */
[data-reveal]{transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
html.js [data-reveal]{opacity:0;transform:translateY(26px);}
html.js [data-reveal].is-visible{opacity:1;transform:none;}
html:not(.js) .dstep,html:not(.js) .chain__node,html:not(.js) .chain__arrow,html:not(.js) .jstep{opacity:1;transform:none;}
html.no-anim *,html.no-anim *::before,html.no-anim *::after{transition:none !important;animation:none !important;}
html.no-anim [data-reveal]{opacity:1 !important;transform:none !important;}
html.no-anim .gibbs-ring{stroke-dashoffset:0 !important;}
html.no-anim .gibbs-scale,html.no-anim .gibbs-label{opacity:1 !important;transform:none !important;}
html.no-anim .driscoll__line::after,html.no-anim .journey__line::after{width:100% !important;}
html.no-anim .dstep,html.no-anim .chain__node,html.no-anim .plan,html.no-anim .jstep{opacity:1 !important;transform:none !important;}
html.no-anim .chain__arrow{opacity:.7 !important;}

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:900px){
  body{font-size:17px;}
  .nav{display:none;}
  .sit-grid{grid-template-columns:1fr;}
  .gibbs-wrap{justify-items:center;}
  .gibbs{width:min(420px,78vw);}
  .tests-cols{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .wrap{padding:0 20px;}
  .topbar__meta{display:none;}
  .scroll-cue{display:none;}
  .spheres{grid-template-columns:1fr;}
  .gibbs-legend{grid-template-columns:1fr;}
  .grid-2,.drivers,.tools-grid{grid-template-columns:1fr;}
  .belief{grid-template-columns:1fr;}
  .belief__arrow{transform:rotate(90deg);justify-self:center;}
  .driscoll__track{grid-template-columns:1fr;}
  .driscoll__line{display:none;}
  .journey{grid-template-columns:1fr 1fr;gap:18px 8px;}
  .journey__line{display:none;}
  .chain__node{min-width:100%;}
  .chain__arrow{transform:rotate(90deg);width:100%;justify-content:center;padding:4px 0;}
  .mbti{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .conc-arc__link{transform:rotate(90deg);width:100%;text-align:center;padding:8px 0;}
  .bar{grid-template-columns:1fr auto;}
  .bar__track{grid-column:1 / -1;order:3;}
}

/* ============================================================ REDUCED MOTION ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:0.001ms !important;animation-duration:0.001ms !important;animation-iteration-count:1 !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .gibbs-ring{stroke-dashoffset:0 !important;}
  .gibbs-scale,.gibbs-label{opacity:1 !important;transform:none !important;}
  .driscoll__line::after,.journey__line::after{width:100% !important;}
  .dstep,.chain__node,.jstep{opacity:1 !important;transform:none !important;}
  .scroll-cue .line::after{display:none;}
}

/* ============================================================ PRINT / PDF ============================================================ */
@media print{
  *,*::before,*::after{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;transition:none !important;animation:none !important;}
  html,body{background:#fff !important;}
  .progress,.nav,.topbar,.scroll-cue{display:none !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .gibbs-ring{stroke-dashoffset:0 !important;}
  .gibbs-scale,.gibbs-label{opacity:1 !important;transform:none !important;}
  .driscoll__line::after,.journey__line::after{width:100% !important;}
  .dstep,.chain__node,.jstep{opacity:1 !important;transform:none !important;}
  .chain__arrow{opacity:.7 !important;}
  .situation,.test-block,.sphere,.card,.driver,.tool,.mbti,.pistes,.proof--real,
  .conc-arc,.conc-statement,.belief,.gibbs-wrap,.driscoll,.journey{break-inside:avoid;page-break-inside:avoid;}
  .section{padding-top:28px !important;padding-bottom:28px !important;}
  .hero{min-height:auto !important;padding:40px 0 24px !important;}
}