@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; border-radius:26px; box-shadow:0 20px 45px rgba(21,23,28,.16);}
  .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;}
}

.nav-right{display:flex; align-items:center; gap:10px;}

/* ---------- language switch (FR/EN pill, top right) ---------- */
.lang-switch{display:flex; gap:2px; background:var(--surface); padding:4px; border-radius:999px; box-shadow:0 4px 16px rgba(21,23,28,.06);}
.lang-switch button{display:flex; align-items:center; gap:6px; border:none; background:transparent; padding:6px 11px 6px 6px; border-radius:999px; cursor:pointer; font-size:12px; font-weight:700; color:var(--text-muted); transition:background .2s var(--ease), color .2s var(--ease);}
.lang-switch button:hover{color:var(--text);}
.lang-switch button.is-active{background:var(--accent); color:#fff;}
.flag-icon{width:20px; height:14px; border-radius:3px; overflow:hidden; display:block; flex:none; box-shadow:0 0 0 1px rgba(21,23,28,.08);}
@media (max-width:480px){.lang-switch .lang-label{display:none;} .lang-switch button{padding:6px;}}

/* ---------- section framing (fullpage-style slides) ---------- */
section{min-height:100vh; display:flex; align-items:center; padding:100px 0 88px; position:relative;}
/* Mobile/tablet: no forced full-screen "slide" per section (that pairing —
   min-height:100vh + the wheel auto-scroll in main.js — is a desktop
   affordance). Sections instead size to their content with tighter padding,
   so touch scrolling reads as one continuous, closely-spaced page. Keep this
   breakpoint in sync with MOBILE_BREAKPOINT in assets/main.js. */
@media (max-width:1024px){section{min-height:0; padding:64px 0 48px;}}
@media (max-width:640px){section{padding:52px 0 40px;}}
.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:1024px){.scroll-cue{display:none;}}

/* ---------- hero (accueil) ---------- */
section.hero{padding:96px 0 108px;}
@media (max-width:1024px){section.hero{padding:64px 0 48px;}}
@media (max-width:640px){section.hero{padding:52px 0 40px;}}
.hero{position:relative;}
.hero-grid{display:grid; grid-template-columns:1.65fr 1fr; gap:16px; align-items:stretch; width:100%;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
/* Hero-main enlarged (2026-09-08): once the CTA row was removed and the
   card wasn't fighting a wider grid ratio, it read as too small next to
   the shortcut column — more width from the grid, extra padding, and
   bigger type give it real presence again. Kept to desktop/tablet widths
   so the mobile stacked layout stays compact. */
@media (min-width:641px){.hero-main.slide-card{padding:56px 52px;}}
.hero-main h1{font-size:clamp(28px,4.8vw,54px); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0;}
/* Name treatment (2026-09-08): the "Portfolio — v3.0" badge above the title
   was dropped, so the name itself now carries the visual opener — a gradient
   matching the avatar-mini / mission-icon tiles elsewhere on the site, so it
   reads as a signature rather than plain heading text. The role keeps the
   solid accent color it already had. */
.hero-main h1 .hero-name{background:linear-gradient(120deg, var(--accent) 10%, var(--accent-2) 110%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-main h1 .hero-role{color:var(--accent);}
.hero-main .pitch{margin-top:16px; color:var(--text-muted); font-size:16px; line-height:1.65; max-width:540px;}
.hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

/* Hero main card, centered layout (2026-09-08): the CTA buttons were removed
   (they duplicated the Missions/Contact shortcut cards to the right), so the
   card now holds just the title + pitch — centered both ways so it doesn't
   read as a stray block of top-aligned text once it stretches to match the
   height of the 3-card column beside it. */
.hero-main-centered{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.hero-main-centered .pitch{margin-left:auto; margin-right:auto;}

/* Typewriter title (2026-09-08, looping v2): the h1 types itself out on
   load, pauses, erases itself, pauses, and retypes — forever — at a
   slower, slightly irregular per-character pace meant to read as someone
   actually typing rather than a mechanical reveal. Height is reserved via
   JS (measured before the text is first cleared) so the pitch/card below
   never jumps as the line count changes through the cycle. Respects
   prefers-reduced-motion (loop is skipped, full text shown) — see
   assets/i18n.js, typeHeroTitle().*/
.type-cursor{display:inline-block; width:3px; height:.85em; background:var(--accent); margin-left:2px; vertical-align:-0.08em; animation:type-blink .85s step-end infinite;}
@keyframes type-blink{50%{opacity:0;}}
.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;}
/* Quick-fact cards (Cyber focus / English level) — small white cards with a
   tinted icon bubble, in line with the rest of the site's bento language
   (soft accent tints, not solid color blocks). Replaced two big solid
   dark/orange squares that felt heavy-handed just to say "Cyber" / "B2". */
.stat-card{background:var(--surface); border-radius:22px; padding:18px 20px; flex:1; display:flex; align-items:center; gap:14px; box-shadow:0 4px 20px rgba(21,23,28,.05); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.stat-card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(21,23,28,.09);}
.stat-icon{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:none;}
.stat-icon svg{width:22px; height:22px;}
.stat-icon.tone-accent{background:var(--accent-soft); color:var(--accent);}
.stat-icon.tone-blue{background:rgba(79,140,255,.14); color:var(--accent-2);}
.stat-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.stat-value{font-size:15px; font-weight:800; color:var(--text); line-height:1.25;}
.stat-label{font-size:12px; color:var(--text-muted); font-weight:600;}

/* Hero quick-nav cards (2026-09) — replace the quick-fact cards above: instead
   of passive info (Cyber focus / English level), the hero side column now
   links straight to Experience / Missions / Contact, with a big faded number
   per card and a dark card in the middle to break up the repetition. */
.nav-shortcuts2{display:flex; flex-direction:column; gap:14px;}
.nav-shortcut2{position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; background:var(--surface); border-radius:24px; padding:0 26px; box-shadow:0 4px 20px rgba(21,23,28,.05); text-decoration:none; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.nav-shortcut2:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(21,23,28,.10);}
.nav-shortcut2 .kicker2{position:relative; z-index:1; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:4px;}
.nav-shortcut2 .title2{position:relative; z-index:1; font-size:19px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:10px;}
.nav-shortcut2 .title2 svg{width:20px; height:20px; color:var(--accent); flex:none;}
.nav-shortcut2.dark{background:var(--dark);}
.nav-shortcut2.dark .kicker2{color:#9297a3;}
.nav-shortcut2.dark .title2{color:#fff;}
.nav-shortcut2.dark .title2 svg{color:var(--accent-2);}
.nav-shortcut2 .bignum{position:absolute; right:14px; bottom:-14px; font-size:88px; font-weight:800; color:var(--bg); z-index:0; line-height:1;}
.nav-shortcut2.dark .bignum{color:rgba(255,255,255,.06);}

/* Hero shortcut cards, "hobby card" treatment (2026-09-08): same illustrated
   backdrop as the "À côté du travail" cards — a drawn gradient with an
   oversized, faded line-icon behind the text and a scrim for contrast —
   applied to the hero's 3 nav-shortcut cards at Theo's request, so the
   hero carries the same bold/spotlight visual language end to end. The
   plain bignum digit backdrop is dropped here in favour of the icon art;
   .bignum stays defined above for any other card that still wants it. */
.nav-shortcut2.bg-accent{background:linear-gradient(120deg, var(--accent) 0%, #ff9a6b 60%, #ffcbb3 100%);}
.nav-shortcut2.bg-blue{background:linear-gradient(120deg, #3f6fe0 0%, #4f8cff 60%, #9fc0ff 100%);}
.nav-shortcut2.bg-dark{background:linear-gradient(120deg, #14161b 0%, #1b1e25 55%, #22262f 100%);}
.nav-shortcut2-art{position:absolute; top:50%; right:-6px; transform:translateY(-50%); width:112px; height:112px; color:#fff; opacity:.2; pointer-events:none; z-index:0; transition:transform .5s var(--ease), opacity .35s var(--ease);}
.nav-shortcut2-art svg{width:100%; height:100%; stroke-width:1.4;}
.nav-shortcut2.bg-accent::after, .nav-shortcut2.bg-blue::after, .nav-shortcut2.bg-dark::after{content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, rgba(15,16,20,.72) 0%, rgba(15,16,20,.32) 42%, rgba(15,16,20,0) 66%);}
.nav-shortcut2:hover .nav-shortcut2-art{transform:translateY(-50%) scale(1.1) rotate(-4deg); opacity:.3;}
.nav-shortcut2.bg-accent .kicker2, .nav-shortcut2.bg-blue .kicker2, .nav-shortcut2.bg-dark .kicker2{color:rgba(255,255,255,.72);}
.nav-shortcut2.bg-accent .title2, .nav-shortcut2.bg-blue .title2, .nav-shortcut2.bg-dark .title2{color:#fff;}
.nav-shortcut2.bg-accent .title2 svg, .nav-shortcut2.bg-blue .title2 svg, .nav-shortcut2.bg-dark .title2 svg{color:#fff;}

/* ---------- 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;}

/* Portrait card (2026-09-04, v2): a smaller inset photo rather than a
   full-bleed panel — sits inside the card's normal padding like its
   siblings, with a name caption overlaid on the image and a hover
   interaction (zoom + accent-tinted scrim) rather than a static block. */
.cell.photo-cell{display:flex; align-items:center; justify-content:center;}
.about-photo-frame{position:relative; width:100%; max-width:210px; aspect-ratio:1/1; border-radius:20px; overflow:hidden; margin:0 auto;}
.about-photo-frame img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.about-photo-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,23,28,.72) 0%, rgba(21,23,28,0) 62%); transition:background .35s var(--ease);}
.about-photo-frame:hover img{transform:scale(1.07);}
.about-photo-frame:hover::after{background:linear-gradient(0deg, rgba(255,107,74,.78) 0%, rgba(255,107,74,0) 68%);}
.about-photo-caption{position:absolute; left:14px; right:14px; bottom:12px; z-index:1; color:#fff; font-weight:800; font-size:14px; letter-spacing:-.01em;}

/* Hobby cards ("À côté du travail", 2026-09-04): same treatment as the About
   portrait — an image-like backdrop with a dark scrim and text overlaid —
   but the backdrop is a drawn gradient + an oversized line-icon motif
   instead of a photo, since these cards illustrate a theme (gym, gaming)
   rather than showing something real. Hover echoes the photo-frame: the
   motif drifts and the scrim warms up slightly. */
.cell.hobby-cell{padding:0; overflow:hidden;}
.hobby-frame{position:relative; min-height:300px; height:100%; display:flex; align-items:flex-end; padding:28px; overflow:hidden;}
.hobby-frame.hobby-gym{background:linear-gradient(135deg, #ff6b4a, #ff9a6b 60%, #ffcbb3);}
.hobby-frame.hobby-games{background:linear-gradient(135deg, #3f6fe0, #4f8cff 55%, #9fc0ff);}
.hobby-art{position:absolute; top:-26px; right:-26px; width:220px; height:220px; color:#fff; opacity:.22; transition:transform .5s var(--ease), opacity .35s var(--ease);}
.hobby-art svg{width:100%; height:100%; stroke-width:1.4;}
.hobby-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,23,28,.7) 0%, rgba(21,23,28,0) 58%); transition:background .35s var(--ease);}
.hobby-frame:hover .hobby-art{transform:scale(1.1) rotate(-4deg); opacity:.32;}
.hobby-frame:hover::after{background:linear-gradient(0deg, rgba(21,23,28,.82) 0%, rgba(21,23,28,0) 64%);}
.hobby-content{position:relative; z-index:1;}
.hobby-content h4{color:#fff; opacity:.85;}
.hobby-content p{color:rgba(255,255,255,.92);}
.hobby-content .tag-row{margin-top:12px;}
.hobby-content .tag{background:rgba(255,255,255,.18); color:#fff;}
@media (max-width:900px){.hobby-frame{min-height:260px;}}

/* About "Profil" / "Ce qui m'anime" cards, spotlight treatment (2026-09-08):
   same gradient + oversized icon-art + scrim + white overlay mechanics as
   the hobby cards and hero shortcuts, applied to the two remaining plain
   cards in the About row so all three cards there (portrait included) read
   as one cohesive, illustrated set rather than one styled card next to two
   plain ones. The old .avatar-mini "TT" tile is dropped here — redundant
   once the whole card carries color and an icon of its own. */
.cell.about-spot-cell{padding:0; overflow:hidden;}
.about-spot{position:relative; min-height:280px; height:100%; display:flex; align-items:flex-end; padding:26px; overflow:hidden;}
.about-spot.tone-accent{background:linear-gradient(135deg, var(--accent), #ff9a6b 60%, #ffcbb3);}
.about-spot.tone-blue{background:linear-gradient(135deg, #3f6fe0, #4f8cff 55%, #9fc0ff);}
.about-spot.tone-dark{background:linear-gradient(135deg, #14161b, #1b1e25 55%, #262b34);}
.about-spot-art{position:absolute; top:-24px; right:-24px; width:200px; height:200px; color:#fff; opacity:.22; transition:transform .5s var(--ease), opacity .35s var(--ease);}
.about-spot-art svg{width:100%; height:100%; stroke-width:1.4;}
.about-spot::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,23,28,.72) 0%, rgba(21,23,28,0) 58%); transition:background .35s var(--ease);}
.about-spot:hover .about-spot-art{transform:scale(1.1) rotate(-4deg); opacity:.32;}
.about-spot:hover::after{background:linear-gradient(0deg, rgba(21,23,28,.84) 0%, rgba(21,23,28,0) 64%);}
.about-spot-content{position:relative; z-index:1;}
.about-spot-content h4{color:#fff; opacity:.85;}
.about-spot-content p{color:rgba(255,255,255,.92);}
@media (max-width:900px){.about-spot{min-height:240px;}}

.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;}

/* Contact cards, spotlight treatment (2026-09-08): same gradient + oversized
   icon-art + scrim mechanics as the hero shortcuts, but horizontal/short
   like those rather than the taller About/hobby cards, since these three
   cards are naturally wide-and-short. Mirrors .nav-shortcut2's layout
   almost exactly (icon bleeding off the right edge, text pinned left) so
   Contact reads as a continuation of the hero's visual language. */
.cell.contact-spot-cell{padding:0; overflow:hidden;}
.contact-spot{position:relative; display:flex; flex-direction:column; justify-content:center; height:100%; min-height:112px; padding:0 26px; overflow:hidden; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.contact-spot:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(21,23,28,.10);}
.contact-spot.tone-accent{background:linear-gradient(120deg, var(--accent) 0%, #ff9a6b 60%, #ffcbb3 100%);}
.contact-spot.tone-blue{background:linear-gradient(120deg, #3f6fe0 0%, #4f8cff 60%, #9fc0ff 100%);}
.contact-spot.tone-dark{background:linear-gradient(120deg, #14161b 0%, #1b1e25 55%, #22262f 100%);}
.contact-spot-art{position:absolute; top:50%; right:-10px; transform:translateY(-50%); width:96px; height:96px; color:#fff; opacity:.2; pointer-events:none; z-index:0; transition:transform .5s var(--ease), opacity .35s var(--ease);}
.contact-spot-art svg{width:100%; height:100%; stroke-width:1.4;}
.contact-spot::after{content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, rgba(15,16,20,.72) 0%, rgba(15,16,20,.32) 42%, rgba(15,16,20,0) 66%);}
.contact-spot:hover .contact-spot-art{transform:translateY(-50%) scale(1.1) rotate(-4deg); opacity:.3;}
.contact-spot-content{position:relative; z-index:1;}
.contact-spot-content .label{display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.72); margin-bottom:4px;}
.contact-spot-content .v{font-weight:800; font-size:16.5px; color:#fff;}

/* ---------- 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 icon tile (2026-09-04): reuses the gradient-square motif already
   used for the avatar-mini "TT" tile in the About Profil card, so each
   mission reads as illustrated without needing a real screenshot. */
.mission-icon{width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none;}
.mission-icon svg{width:28px; height:28px; stroke-width:2;}
.mission-icon.t-accent{background:linear-gradient(140deg, var(--accent), #ff9a6b); color:#fff;}
.mission-icon.t-blue{background:linear-gradient(140deg, var(--accent-2), #7db2ff); color:#fff;}
.mission-icon.t-dark{background:var(--dark); color:#fff;}
.project-teaser .mission-icon{margin-bottom:14px;}
.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;}
}

/* ---------- assistant (chat-style site navigator) ---------- */
.assistant-fab{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:58px; height:58px; border:none; cursor:pointer; padding:0;
  /* soft speech-bubble silhouette — one softer corner instead of a hard
     emoji tail, fully rounded on the other three like the rest of the DA */
  border-radius:50% 50% 50% 15px;
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(255,107,74,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-radius .35s var(--ease);
}
.assistant-fab:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 14px 32px rgba(255,107,74,.42);}
.assistant-fab[data-open="1"]{border-radius:50%;}

.fab-icon{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1) rotate(0deg); transition:opacity .2s ease, transform .2s ease;}
.fab-icon-close{opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-45deg);}
.assistant-fab[data-open="1"] .fab-icon-msg{opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(45deg);}
.assistant-fab[data-open="1"] .fab-icon-close{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);}

.assistant-panel{
  position:fixed; right:22px; bottom:92px; z-index:199;
  width:352px; max-width:calc(100vw - 32px); max-height:min(68vh,560px);
  background:var(--surface); border-radius:26px; box-shadow:0 24px 54px rgba(21,23,28,.22);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.assistant-panel.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
@media (max-width:640px){.assistant-panel{right:16px; left:16px; width:auto; bottom:88px;}}

.assistant-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 14px; border-bottom:1px solid var(--line);}
.assistant-head-id{display:flex; align-items:center; gap:10px;}
.assistant-avatar{width:36px; height:36px; border-radius:11px; background:var(--dark); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex:none;}
.assistant-title{font-size:13.5px; font-weight:700;}
.assistant-sub{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
.assistant-close{background:var(--bg); border:none; width:28px; height:28px; border-radius:10px; cursor:pointer; font-size:12px; color:var(--text-muted); flex:none;}
.assistant-close:hover{color:var(--accent);}

.assistant-thread{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.assistant-msg{max-width:86%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.5;}
.assistant-msg.bot{align-self:flex-start; background:var(--bg); color:var(--text); border-bottom-left-radius:5px;}
.assistant-msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px; font-weight:600;}

.assistant-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 14px;}
.assistant-chip{background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all .2s var(--ease);}
.assistant-chip:hover{border-color:var(--accent); color:var(--accent);}

.assistant-input-row{display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line);}
.assistant-input-row input{flex:1; border:1px solid var(--line); background:var(--bg); border-radius:13px; padding:11px 14px; font-size:13.5px; font-family:var(--font); color:var(--text);}
.assistant-input-row input:focus{outline:2px solid var(--accent-soft); border-color:var(--accent);}
.assistant-input-row button{width:38px; height:38px; border-radius:12px; border:none; background:var(--dark); color:#fff; font-size:15px; cursor:pointer; flex:none; transition:background .2s var(--ease);}
.assistant-input-row button:hover{background:var(--accent);}