/* ==========================================================================
   Jérôme Charnaux — Personal site
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:        #0b1e33;
  --ink-2:      #12294a;
  --paper:      #eef2f6;
  --paper-2:    #ffffff;
  --accent:     #1c86d6;
  --accent-2:   #16b3a3;
  --muted:      #5a6b80;
  --muted-2:    #8a97a8;
  --line:       #dbe2e9;
  --line-dark:  rgba(255,255,255,.14);
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  20px;
  --shadow:     0 1px 2px rgba(11,30,51,.04), 0 8px 24px rgba(11,30,51,.06);
  --maxw:       1180px;
  --font-head:  'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:  'IBM Plex Sans', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height:1.08; font-weight:700; }
h2{ font-size:clamp(2rem, 1.5rem + 2.2vw, 2.9rem); line-height:1.1; font-weight:700; }
h3{ font-size:1.05rem; font-weight:600; }

p{ margin:0 0 1em; color:var(--ink); }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding:88px 0; }
@media (max-width:720px){ section{ padding:56px 0; } }

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:20px; height:2px;
  background:var(--accent-2);
  margin-right:9px;
  vertical-align:middle;
}

.lede{ color:var(--muted); font-size:1.05rem; max-width:56ch; }

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#1976c2; }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.btn-ghost-light{ background:transparent; color:#fff; border-color:var(--line-dark); }
.btn-ghost-light:hover{ border-color:#fff; }

.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:#e9eff5; }

/* header ------------------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; flex-direction:column; color:#fff; line-height:1.25; }
.brand-name{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; letter-spacing:.01em; }
.brand-tag{ font-size:.72rem; color:#9db3cc; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:#cddaea; font-size:.9rem; font-weight:500;
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; border-color:var(--accent-2); }

.lang-switch{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--line-dark);
  border-radius:999px; padding:3px;
}
.lang-switch button{
  font-family:var(--font-body); font-weight:600; font-size:.76rem;
  color:#9db3cc; background:transparent; border:none; cursor:pointer;
  padding:6px 12px; border-radius:999px; letter-spacing:.02em;
}
.lang-switch button.is-active{ background:var(--accent); color:#fff; }

.nav-cta{ display:flex; align-items:center; gap:16px; }

.nav-toggle{
  display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px;
}
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header.is-open .nav-links{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:76px; left:0; right:0;
    background:var(--ink-2); padding:10px 28px 22px;
    border-bottom:1px solid var(--line-dark);
  }
  .site-header.is-open .nav-links a{ padding:12px 0; border-bottom:1px solid var(--line-dark); width:100%; }
  .nav-cta .btn-primary{ display:none; }
  @media (max-width:560px){ .nav-cta .lang-switch{ display:flex; } }
}

/* hero --------------------------------------------------------------------*/
.hero{
  background:var(--paper);
  padding-top:56px;
  padding-bottom:64px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center;
}
.hero-copy .eyebrow{ color:var(--accent); }
.hero .lede{ color:var(--muted); font-size:1.08rem; }
.hero-cta{ display:flex; gap:14px; margin:30px 0 30px; flex-wrap:wrap; }

.status-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(22,179,163,.1); border:1px solid rgba(22,179,163,.3);
  color:#0f8f7f; font-size:.82rem; font-weight:600;
  padding:7px 14px 7px 11px; border-radius:999px; margin-bottom:18px;
}
.status-badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent-2); flex:none;
  box-shadow:0 0 0 3px rgba(22,179,163,.25);
}

.hero-tags{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:8px; }
.hero-tags span{
  display:flex; align-items:center; gap:8px;
  font-size:.84rem; color:var(--muted); font-weight:500;
}
.hero-tags svg{ width:15px; height:15px; color:var(--accent); flex:none; }

.hero-visual{ position:relative; padding-top:6px; }

.hero-photo-row{ display:flex; align-items:center; gap:28px; margin-bottom:44px; }

.hero-photo-wrap{ position:relative; flex:none; width:190px; }
.hero-photo-wrap::before{
  content:"";
  position:absolute; top:14px; left:14px; right:-14px; bottom:-14px;
  background:linear-gradient(140deg, var(--accent) 55%, var(--accent-2) 100%);
  border-radius:22px; z-index:0;
}
.hero-photo{
  position:relative; z-index:1; display:block;
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:20px; border:4px solid var(--paper-2);
  box-shadow:0 18px 34px rgba(11,30,51,.18);
}

.quote{
  border-left:2px solid var(--accent-2);
  padding-left:18px; margin:0;
  font-family:var(--font-head);
  font-size:1.1rem; font-weight:500; font-style:normal;
  color:#5c7ba3; max-width:26ch; text-align:left;
}

@media (max-width:520px){
  .hero-photo-row{ flex-direction:column; align-items:flex-start; gap:20px; }
  .hero-photo-wrap{ width:160px; }
}

.stat-inline-row{
  display:flex; gap:0; margin-top:8px; flex-wrap:wrap; justify-content:center;
}
.stat-inline-row .stat{
  padding:0 28px; border-left:1px solid var(--line); text-align:center;
}
.stat-inline-row .stat:first-child{ border-left:none; }
.stat-inline-row .stat b{
  display:block; font-family:var(--font-head); font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  color:var(--ink); font-weight:700;
}
.stat-inline-row .stat span{ font-size:.8rem; color:var(--muted); }

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:36px; }
  .quote{ margin-left:0; }
  .stat-inline-row{ gap:22px 0; }
}
@media (max-width:520px){
  .stat-inline-row{ flex-direction:column; align-items:center; gap:16px; }
  .stat-inline-row .stat{ padding:0; border-left:none; }
}

/* wave graphic (hero) — static, no animation */
.net-graphic{ width:100%; height:auto; margin-bottom:22px; }
.net-graphic .wave{ fill:none; stroke-linecap:round; }
.net-graphic .dot{ fill:var(--accent); }

/* section heading row ------------------------------------------------------*/
.head-row{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
  margin-bottom:48px;
}
.head-row .lede{ max-width:46ch; }
.head-row-cta{ display:flex; justify-content:flex-end; align-items:flex-end; }
@media (max-width:760px){
  .head-row{ grid-template-columns:1fr; }
  .head-row-cta{ justify-content:flex-start; margin-top:10px; }
}

/* results ------------------------------------------------------------------*/
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.stat-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 22px; box-shadow:var(--shadow);
  text-align:center;
}
.stat-card .icon{
  width:52px; height:52px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.stat-card .icon svg{ width:34px; height:34px; }
.stat-card b{
  display:block; font-family:var(--font-head); font-size:1.9rem; font-weight:700;
  color:var(--ink); margin-bottom:4px;
}
.stat-card .label{ font-weight:600; font-size:.92rem; margin-bottom:8px; }
.stat-card .desc{ color:var(--muted); font-size:.84rem; line-height:1.5; }
@media (max-width:900px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stats-grid{ grid-template-columns:1fr; } }

/* about ---------------------------------------------------------------------*/
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0 0; }
.pillar{
  text-align:center;
  padding:30px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2);
  box-shadow:var(--shadow);
}
.pillar .icon{
  width:52px; height:52px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.pillar .icon svg{ width:34px; height:34px; }
.pillar h3{ margin-bottom:8px; }
.pillar p{ margin:0; color:var(--muted); font-size:.88rem; }

@media (max-width:900px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* experience -----------------------------------------------------------------*/
.timeline{ position:relative; padding-left:34px; }
.timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);
}
.tl-item{ position:relative; padding-bottom:38px; }
.tl-gap{
  position:relative; margin:-8px 0 30px; padding:10px 0 10px 2px;
  font-size:.84rem; font-style:italic; color:var(--muted-2);
}
.tl-gap::before{
  content:""; position:absolute; left:-31px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--line);
}
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-34px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--paper-2); border:2px solid var(--accent);
}
.tl-item.is-current::before{ background:var(--accent); }
.tl-period{ font-size:.78rem; font-weight:600; color:var(--accent); letter-spacing:.03em; margin-bottom:6px; }
.tl-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; display:grid; grid-template-columns:1fr 1.4fr; gap:22px;
}
.tl-role h3{ margin-bottom:2px; }
.tl-role .org{ color:var(--accent); font-weight:600; font-size:.9rem; }
.tl-role .loc{ color:var(--muted-2); font-size:.8rem; margin-top:4px; }
.tl-list{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.tl-list li{ position:relative; padding-left:18px; font-size:.88rem; color:var(--muted); }
.tl-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%;
  background:var(--accent-2);
}
.tl-footnote{ margin-top:26px; padding-left:34px; color:var(--muted-2); font-size:.84rem; }

@media (max-width:760px){ .tl-card{ grid-template-columns:1fr; } }

/* expertise -----------------------------------------------------------------*/
#expertise{ padding-top:64px; padding-bottom:64px; }
.expertise-wrap{ display:grid; grid-template-columns:1fr; gap:28px; }

/* radial hub & spokes diagram — shown on wider screens */
.wheel-radial{
  display:none;
  position:relative;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  aspect-ratio:1000 / 800;
}
.wheel-lines{ position:absolute; inset:0; width:100%; height:100%; }
.wheel-lines line{ stroke:var(--line); stroke-width:2; }

.wheel-hub, .wheel-node{ position:absolute; transform:translate(-50%,-50%); }

.wheel-hub{
  width:184px; height:184px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  box-shadow:0 16px 32px rgba(11,30,51,.22);
}
.wheel-hub .icon{ color:var(--accent-2); margin-bottom:7px; }
.wheel-hub .icon svg{ width:30px; height:30px; }
.wheel-hub h3{ color:#fff; font-size:1.05rem; margin-bottom:4px; }
.wheel-hub p{ color:#a9bbd2; font-size:.8rem; margin:0; line-height:1.3; }

.wheel-node{
  width:216px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); text-align:center;
}
.wheel-node .icon{
  width:37px; height:37px; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.wheel-node .icon svg{ width:23px; height:23px; }
.wheel-node h3{ font-size:1rem; margin-bottom:5px; }
.wheel-node .node-desc{
  margin:0; font-size:.83rem; color:var(--muted); line-height:1.35;
}

@media (min-width:1000px){
  .wheel-radial{ display:block; }
}

/* mobile / tablet — 3-1-3 grid, hub centered in its own row so the
   "central node" idea still reads even when stacked. */
.wheel-mobile{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.wheel-cube{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:7px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 8px; min-height:118px;
}
.wheel-cube .icon{
  width:30px; height:30px; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.wheel-cube .icon svg{ width:19px; height:19px; }
.wheel-cube h3{ font-size:.72rem; margin:0; line-height:1.25; }
.wheel-cube .node-desc{ margin:0; font-size:.62rem; color:var(--muted); line-height:1.3; }

.wheel-cube.hub{
  grid-column:2;
  background:var(--ink); border-color:var(--ink); color:#fff;
}
.wheel-cube.hub .icon{ color:var(--accent-2); }
.wheel-cube.hub h3{ color:#fff; font-size:.76rem; }
.wheel-cube.hub .node-desc{ color:#a9bbd2; }

@media (max-width:420px){
  .wheel-cube h3{ font-size:.68rem; }
  .wheel-cube .node-desc{ display:none; }
}

/* This must come last so it wins the cascade over the base rules above
   regardless of source order elsewhere in this file. */
@media (min-width:1000px){
  .wheel-mobile{ display:none; }
}

/* projects --------------------------------------------------------------------*/
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.proj-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-2);
  display:flex; flex-direction:column;
}
.proj-card .thumb{
  height:120px; background:var(--ink); position:relative; overflow:hidden;
}
.proj-card .thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.proj-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.proj-body h3{ margin-bottom:0; }
.proj-body p{ color:var(--muted); font-size:.87rem; margin:0; flex:1; }
.tag-row{ display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.tag-row span{
  font-size:.73rem; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
}
@media (max-width:900px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .proj-grid{ grid-template-columns:1fr; } }

/* testimonials ------------------------------------------------------------*/
.testi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.testi-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.testi-quote{ width:30px; height:22px; color:var(--line); margin-bottom:12px; }
.testi-text{
  font-size:.95rem; color:var(--ink-2); line-height:1.6; margin:0 0 22px; flex:1;
}
.testi-toggle{
  display:none;
  background:none; border:none; padding:0; margin:-14px 0 20px;
  color:var(--accent); font-weight:600; font-size:.84rem; cursor:pointer;
  text-align:left; font-family:var(--font-body);
}
@media (max-width:760px){
  .testi-text{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden;
  }
  .testi-card.is-expanded .testi-text{
    display:block; -webkit-line-clamp:unset; overflow:visible;
  }
  .testi-toggle.has-overflow{ display:inline-block; }
}
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--ink); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
}
.testi-name{ font-weight:600; font-size:.9rem; }
.testi-role{ font-size:.78rem; color:var(--muted); }

@media (max-width:760px){ .testi-grid{ grid-template-columns:1fr; } }

/* contact / footer -----------------------------------------------------------*/
.contact{
  background:var(--ink); color:#fff; padding:80px 0 0;
}
.contact-inner{
  max-width:640px; margin:0 auto; text-align:center;
  padding-bottom:56px; border-bottom:1px solid var(--line-dark);
}
.contact h2{ color:#fff; }
.contact .lede{ color:#c3d1e2; margin-left:auto; margin-right:auto; }
.contact-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:center; }

.foot-bar{
  padding:24px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.foot-bar .brand-tag{ color:#8399b3; }
.foot-bar .motto{ color:#8399b3; font-size:.84rem; }

/* focus visibility ------------------------------------------------------------*/
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* language toggle helper -------------------------------------------------------*/
[data-lang]{ }