@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

/* cross-document page transitions (progressive enhancement — no-op if unsupported) */
@view-transition{
  navigation: auto;
}

/* backdrop that stays visible behind both pages while they move, so the
   transition never flashes white — it always shows the site's own background */
::view-transition{
  background: var(--bg);
}

/* the page we're leaving quietly recedes — slightly smaller, slightly dimmed —
   instead of just vanishing, which is what read as "abrupt" before */
::view-transition-old(root){
  animation: tt-page-recede .7s cubic-bezier(.22,1,.36,1) both;
}

/* the new page glides down and settles in front of it, like a sheet being
   pulled over the previous screen, with a soft shadow + a coral leading edge
   so the motion reads the same way on every navigation, even between two
   pages that otherwise look alike (e.g. missions.html -> mission-1.html) */
::view-transition-new(root){
  animation: tt-page-slide-down .7s cubic-bezier(.22,1,.36,1) both;
  box-shadow: 0 26px 50px rgba(15,17,20,.18);
  border-top: 5px solid var(--accent);
}

@keyframes tt-page-recede{
  from{ transform:scale(1); filter:brightness(1); }
  to{ transform:scale(.92); filter:brightness(.8); }
}
@keyframes tt-page-slide-down{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0); }
}

:root{
  --bg:#f2f3f7;
  --surface:#ffffff;
  --dark:#15171c;
  --text:#15171c;
  --text-inv:#f2f3f7;
  --text-muted:#5b6069;
  --text-faint:#9aa0ab;
  --line:rgba(21,23,28,.08);
  --accent:#ff6b4a;
  --accent-soft:rgba(255,107,74,.12);
  --accent-2:#4f8cff;
  --radius:28px;
  --font:'Sora', system-ui, sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
p{margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%;}
@media (max-width:640px){.wrap{padding:0 18px;}}

main{position:relative; z-index:1;}

/* ---------- animated background (fixed, sits behind everything) ---------- */
.bg-blobs{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.bg-blobs .blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.4; will-change:transform;}
.bg-blobs .b1{
  width:560px; height:560px; top:-160px; left:-140px;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  animation:bgfloat1 24s ease-in-out infinite alternate;
}
.bg-blobs .b2{
  width:500px; height:500px; top:34%; right:-180px;
  background:radial-gradient(circle at 60% 40%, var(--accent-2), transparent 70%);
  animation:bgfloat2 28s ease-in-out infinite alternate;
}
.bg-blobs .b3{
  width:460px; height:460px; bottom:-160px; left:14%;
  background:radial-gradient(circle at 40% 60%, var(--accent), transparent 70%);
  animation:bgfloat3 26s ease-in-out infinite alternate;
}
.bg-blobs .b4{
  width:420px; height:420px; bottom:10%; right:8%;
  background:radial-gradient(circle at 50% 50%, var(--accent-2), transparent 70%);
  animation:bgfloat2 22s ease-in-out infinite alternate-reverse;
  opacity:.3;
}
@keyframes bgfloat1{0%{transform:translate(0,0) scale(1);}100%{transform:translate(70px,50px) scale(1.1);}}
@keyframes bgfloat2{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-60px,60px) scale(.94);}}
@keyframes bgfloat3{0%{transform:translate(0,0) scale(1);}100%{transform:translate(50px,-45px) scale(1.06);}}
@media (max-width:768px){
  .bg-blobs .blob{filter:blur(60px); opacity:.28;}
  .bg-blobs .b1,.bg-blobs .b2,.bg-blobs .b3,.bg-blobs .b4{width:320px; height:320px;}
}
@media (prefers-reduced-motion:reduce){
  .bg-blobs .blob{animation:none;}
}

/* ---------- nav ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(242,243,247,.75); backdrop-filter:blur(12px); view-transition-name:site-header;}
nav{max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between;}
@media (max-width:640px){nav{padding:14px 18px;}}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px;}
.logo-mark{width:34px; height:34px; border-radius:11px; background:var(--dark); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;}

.navlinks{position:relative; display:flex; gap:4px; background:var(--surface); padding:5px; border-radius:999px; box-shadow:0 4px 16px rgba(21,23,28,.06);}
.navlinks a{position:relative; z-index:1; font-size:13px; font-weight:600; color:var(--text-muted); padding:9px 15px; border-radius:999px; transition:color .25s var(--ease);}
.navlinks a:hover{color:var(--text);}
.navlinks a.is-active{color:#fff;}
.nav-pill{position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:var(--accent); opacity:0; z-index:0; transition:transform .4s cubic-bezier(.16,.8,.24,1), width .4s cubic-bezier(.16,.8,.24,1), opacity .25s ease;}

.burger{display:none; flex-direction:column; gap:5px; background:var(--surface); border:none; cursor:pointer; padding:10px; border-radius:12px; box-shadow:0 4px 16px rgba(21,23,28,.06);}
.burger span{width:18px; height:2px; border-radius:2px; background:var(--text);}
@media (max-width:820px){
  .navlinks{display:none; position:fixed; top:76px; left:16px; right:16px; flex-direction:column; align-items:stretch; padding:10px; z-index:60;}
  .navlinks.open{display:flex;}
  .navlinks a{text-align:center; padding:13px;}
  .nav-pill{display:none;}
  .navlinks a.is-active{background:var(--accent); color:#fff;}
  .burger{display:flex;}
}

/* ---------- section framing (fullpage-style slides) ---------- */
section{min-height:100vh; display:flex; align-items:center; padding:100px 0 88px; position:relative;}
@media (max-width:640px){section{padding:92px 0 60px;}}
.kicker{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:6px 13px; border-radius:999px; display:inline-block;}
.section-head{margin-bottom:40px; max-width:640px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; margin-top:14px; letter-spacing:-.01em;}
.section-head .sub{color:var(--text-muted); margin-top:12px; font-size:15px; line-height:1.65;}

.reveal{opacity:0; transform:translateY(20px) scale(.98); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}

/* reusable big rounded white card */
.slide-card{background:var(--surface); border-radius:36px; padding:42px; box-shadow:0 4px 20px rgba(21,23,28,.05); width:100%;}
@media (max-width:640px){.slide-card{padding:28px 22px; border-radius:26px;}}

/* ---------- scroll cue ---------- */
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:var(--surface); padding:14px 22px 14px; border-radius:20px;
  box-shadow:0 4px 20px rgba(21,23,28,.06);
  z-index:2; transition:opacity .3s ease, visibility .3s ease;
}
.scroll-cue.hide{opacity:0; visibility:hidden; pointer-events:none;}
.scroll-cue .mouse{width:24px; height:38px; border-radius:14px; border:2px solid #d9dce3; display:flex; justify-content:center; padding-top:6px; position:relative;}
.scroll-cue .mouse .wheel{width:4px; height:9px; border-radius:3px; background:var(--accent); animation:wheelmove 1.7s ease-in-out infinite;}
.scroll-cue .label{font-size:11px; font-weight:700; color:var(--text-faint); letter-spacing:.03em; text-transform:lowercase;}
@keyframes wheelmove{0%{transform:translateY(0); opacity:1;}60%{opacity:1;}100%{transform:translateY(9px); opacity:0;}}
@media (max-width:640px){.scroll-cue{display:none;}}

/* ---------- hero (accueil) ---------- */
section.hero{padding:96px 0 108px;}
.hero{position:relative;}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:stretch; width:100%;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
.hero-main h1{font-size:clamp(28px,4.2vw,44px); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0;}
.hero-main h1 span{color:var(--accent);}
.hero-main .pitch{margin-top:16px; color:var(--text-muted); font-size:15px; line-height:1.6; max-width:480px;}
.hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.btn{font-size:14px; font-weight:700; padding:14px 24px; border-radius:14px; transition:all .2s var(--ease); display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--dark); color:#fff;}
.btn-primary:hover{background:var(--accent); transform:translateY(-2px);}
.btn-ghost{background:var(--bg); color:var(--text); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);}

.hero-side{display:flex; flex-direction:column; gap:14px;}
.side-card{border-radius:24px; padding:20px; flex:1; display:flex; flex-direction:column; justify-content:center;}
.side-card.dark{background:var(--dark); color:var(--text-inv);}
.side-card.accent{background:var(--accent); color:#fff;}
.side-card .big{font-size:25px; font-weight:800;}
.side-card .lab{font-size:12px; opacity:.75; margin-top:5px; font-weight:600;}

/* ---------- bento grid ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px; width:100%;}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr);}}
.cell{background:var(--surface); border-radius:var(--radius); padding:28px; box-shadow:0 4px 20px rgba(21,23,28,.05); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.cell:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(21,23,28,.09);}
.cell.dark{background:var(--dark); color:var(--text-inv);}
.cell h4{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin:0 0 14px;}
.cell.dark h4{color:#8b8f99;}
.cell p{color:var(--text-muted); font-size:14.5px; line-height:1.65;}
.cell.dark p{color:#c7c9d1;}

.span2{grid-column:span 2;} .span3{grid-column:span 3;} .span4{grid-column:span 4;} .span6{grid-column:span 6;}
@media (max-width:900px){ .span2,.span3,.span4,.span6{grid-column:span 2;} }

.avatar-mini{width:64px; height:64px; border-radius:18px; background:linear-gradient(140deg, var(--accent), var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin-bottom:16px;}

.facts-mini{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.facts-mini div{display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-top:1px solid var(--line);}
.facts-mini b{color:var(--text-faint); font-weight:600;}

.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.tag{font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--bg); color:var(--text);}
.cell.dark .tag{background:rgba(255,255,255,.1); color:#fff;}

.lang-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px;}
.lang-row .name{font-weight:700; font-size:14px;}
.bar{width:110px; height:7px; background:var(--bg); border-radius:99px; overflow:hidden;}
.cell.dark .bar{background:rgba(255,255,255,.15);}
.bar i{display:block; height:100%; background:var(--accent); border-radius:99px;}

.exp-year{font-size:12.5px; font-weight:700; color:var(--accent);}
.exp-role{font-size:16.5px; font-weight:700; margin-top:8px;}
.exp-org{color:var(--text-muted); font-size:13.5px; margin-top:2px;}

.contact-cell{display:flex; align-items:center; gap:14px; cursor:pointer;}
.contact-cell .ico{width:40px; height:40px; border-radius:12px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:17px; flex:none;}
.cell.dark .contact-cell .ico{background:rgba(255,255,255,.1);}
.contact-cell .v{font-weight:700; font-size:14.5px; margin-top:2px;}

/* ---------- missions / projets teaser (index.html) ---------- */
.mission-teaser-grid, .project-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; width:100%;}
@media (max-width:820px){.mission-teaser-grid, .project-teaser-grid{grid-template-columns:1fr;}}
.mission-teaser, .project-teaser{display:block; background:var(--surface); border-radius:var(--radius); padding:28px; box-shadow:0 4px 20px rgba(21,23,28,.05); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.mission-teaser:hover, .project-teaser:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(21,23,28,.09);}
.mission-teaser .tag-mini, .project-teaser .tag-mini{font-size:11.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
.mission-teaser h3, .project-teaser h3{font-size:18px; font-weight:800; margin:10px 0 8px;}
.mission-teaser p, .project-teaser p{color:var(--text-muted); font-size:14px; line-height:1.6;}
.mission-teaser .go, .project-teaser .go{margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent);}
.missions-more, .projects-more{margin-top:22px;}

/* ---------- project cells (projets.html) ---------- */
.project-cell .project-top{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.project-cell .role-mini{font-size:12.5px; font-weight:600; color:var(--text-faint);}
.project-cell h4{font-size:17px; font-weight:800; text-transform:none; letter-spacing:normal; color:var(--text); margin:0 0 10px;}
.cell.dark.project-cell h4{color:#fff;}
.tag.status-done{background:rgba(21,23,28,.06); color:var(--text-muted);}
.tag.status-progress{background:var(--accent-soft); color:var(--accent);}
.project-takeaway{background:var(--accent); color:#fff;}
.project-takeaway h4{color:rgba(255,255,255,.75) !important;}
.project-takeaway p{color:#fff; font-weight:600; font-size:15.5px;}

/* ---------- mission slides (missions.html) ---------- */
.mission-card h2{font-size:clamp(21px,2.6vw,28px); font-weight:800; line-height:1.18; margin-top:12px;}
.mission-card .role{color:var(--text-muted); font-size:14px; font-weight:600; margin-top:6px;}
.mission-info-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.mission-info-row .info{background:var(--bg); border-radius:14px; padding:9px 14px;}
.mission-info-row .info b{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:3px; font-weight:600;}
.mission-info-row .info span{font-weight:700; font-size:13.5px;}
.mission-card .desc{margin-top:16px; color:var(--text-muted); font-size:14.5px; line-height:1.6; max-width:640px;}
.mission-card .tag-row{margin-top:14px;}
.mission-card .cta{margin-top:20px;}
.mission-nav-index{display:flex; gap:8px; margin-top:18px;}
.mission-nav-index a{width:30px; height:30px; border-radius:11px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--text-muted); transition:all .2s var(--ease);}
.mission-nav-index a.on, .mission-nav-index a:hover{background:var(--accent); color:#fff;}

/* ---------- mission detail steps ---------- */
.step-card{max-width:760px; margin:0 auto;}
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--text-muted); margin-bottom:16px; transition:color .2s var(--ease);}
.back-link:hover{color:var(--accent);}
.step-num{font-size:12.5px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em;}
.step-card h2{font-size:clamp(24px,3.2vw,32px); font-weight:800; margin-top:12px;}
.step-card p{margin-top:16px; color:var(--text-muted); font-size:15px; line-height:1.65;}
.step-progress{display:flex; gap:8px; margin-top:22px;}
.step-progress span{width:28px; height:4px; border-radius:99px; background:var(--line);}
.step-progress span.on{background:var(--accent);}
.step-highlight{margin-top:18px; background:var(--accent-soft); border-radius:16px; padding:15px 18px; color:#8a4326; font-size:14px; font-weight:600;}

.section-footer{width:100%; margin-top:36px; padding-top:22px; border-top:1px solid var(--line);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-faint); font-weight:600;}
.foot-row a:hover{color:var(--accent);}

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