:root{
  --navy:#071523;
  --blue:#153a5b;
  --blue2:#2d6f9f;
  --yellow:#fff200;
  --white:#f7fbff;
  --muted:#aeb9c7;
  --line:rgba(255,255,255,.16);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--navy);color:var(--white);font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:42vw;height:42vw;border-radius:999px;background:radial-gradient(circle, rgba(45,111,159,.22), transparent 62%);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;filter:blur(10px)}.topbar{position:fixed;z-index:50;left:0;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:linear-gradient(180deg,rgba(7,21,35,.78),rgba(7,21,35,0));backdrop-filter:blur(8px)}.brand{font-weight:900;letter-spacing:.08em;color:var(--yellow);text-decoration:none}.topbar nav{display:flex;align-items:center;gap:28px}.topbar nav a{color:#d7e1ee;text-decoration:none;font-size:13px;font-weight:700;opacity:.86}.contact-link{border:1px solid rgba(255,242,0,.65);border-radius:999px;padding:10px 18px;color:var(--yellow)!important}.progress{position:fixed;right:36px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:22px}.progress a{position:relative;color:#7e8c9a;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.04em;padding-left:24px;transition:.35s}.progress a:before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:#6f7d8c;box-shadow:0 0 0 1px rgba(255,255,255,.2)}.progress a:after{content:"";position:absolute;left:4px;top:14px;width:1px;height:22px;background:rgba(255,255,255,.18)}.progress a:last-child:after{display:none}.progress a span{display:block;font-size:15px;margin-bottom:3px}.progress a.active{color:var(--yellow)}.progress a.active:before{background:var(--yellow);box-shadow:0 0 18px rgba(255,242,0,.9)}main{position:relative;z-index:2}.scene{position:relative;min-height:100vh;display:grid;align-items:center;isolation:isolate;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);scroll-snap-align:start}.scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,35,.88),rgba(7,21,35,.50) 42%,rgba(7,21,35,.08));z-index:-1}.scene:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, rgba(45,111,159,.18), transparent 35%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18));z-index:-1}.scene-bg{position:absolute;inset:0;z-index:-3;opacity:.78;background-size:cover;background-position:center;transform:scale(1.04);transition:1.2s ease}.pattern-topo{background-image:linear-gradient(115deg, rgba(7,21,35,.25), rgba(7,21,35,.8)), repeating-radial-gradient(circle at 45% 50%, rgba(255,255,255,.08) 0 1px, transparent 1px 28px)}.bg-code{background-image:linear-gradient(90deg,rgba(7,21,35,.78),rgba(7,21,35,.1)),url("data:image/svg+xml,%3Csvg width='1200' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1200' height='800' fill='%23091422'/%3E%3Cg fill='none' stroke='%232d6f9f' stroke-opacity='.35' font-family='monospace' font-size='24'%3E%3Ctext x='80' y='150'%3Econst architecture = robust.map(project => future)%3C/text%3E%3Ctext x='150' y='260'%3Easync function build(client, ux, ai) %7B%3C/text%3E%3Ctext x='220' y='370'%3Ereturn maintainable.solution()%3C/text%3E%3Ctext x='120' y='520'%3EPHP • API • Vanilla JS • LLM%3C/text%3E%3C/g%3E%3C/svg%3E")}.bg-design{background-image:linear-gradient(90deg,rgba(7,21,35,.82),rgba(7,21,35,.12)),url("data:image/svg+xml,%3Csvg width='1200' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1200' height='800' fill='%230a1726'/%3E%3Cg fill='none' stroke='%23fff200' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M160 500 C330 160 510 660 730 250 S1010 420 1110 130'/%3E%3Ccircle cx='255' cy='245' r='72'/%3E%3Crect x='725' y='410' width='250' height='160' rx='28'/%3E%3C/g%3E%3Cg fill='%232d6f9f' opacity='.25'%3E%3Ccircle cx='880' cy='210' r='90'/%3E%3Ccircle cx='430' cy='555' r='120'/%3E%3C/g%3E%3C/svg%3E")}.bg-architecture{background-image:linear-gradient(90deg,rgba(7,21,35,.88),rgba(7,21,35,.16)),url("data:image/svg+xml,%3Csvg width='1200' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1200' height='800' fill='%23081320'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2'%3E%3Cpath d='M80 610h1040M150 530h220v-150h180v150h170v-260h260v260h110'/%3E%3Crect x='160' y='170' width='230' height='140' rx='12'/%3E%3Crect x='530' y='120' width='190' height='110' rx='12'/%3E%3Crect x='810' y='255' width='230' height='150' rx='12'/%3E%3Cpath d='M390 240h140M720 180l90 145'/%3E%3C/g%3E%3C/svg%3E")}.bg-guitar{background-image:linear-gradient(90deg,rgba(7,21,35,.86),rgba(7,21,35,.18)),url("data:image/svg+xml,%3Csvg width='1200' height='800' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1200' height='800' fill='%23071420'/%3E%3Cg fill='none' stroke='%23fff200' stroke-opacity='.38' stroke-width='4'%3E%3Cpath d='M160 470 C240 360 330 360 390 450 C470 570 610 520 610 400 C610 260 455 260 405 350 C340 270 215 290 170 380 C130 455 120 530 210 580'/%3E%3Cpath d='M595 395 L1030 210'/%3E%3Cpath d='M720 340 L755 415 M800 305 L835 380 M880 270 L915 345'/%3E%3C/g%3E%3C/svg%3E")}.photo-stack{position:absolute;top:0;bottom:0;width:100vw;z-index:-2;opacity:0;filter:blur(8px);transform:translate3d(0,40px,0) scale(1.06);transition:opacity 1s ease, filter 1.1s ease, transform 1.15s cubic-bezier(.2,.8,.2,1)}.photo-stack img{width:100%;height:100%;object-fit:cover;display:block}.photo-stack:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,35,.04),rgba(7,21,35,.36))}.photo-left{left:0}.photo-left:after{background:linear-gradient(90deg,rgba(7,21,35,0),rgba(7,21,35,.62))}.photo-right{right:0}.photo-right:after{background:linear-gradient(270deg,rgba(7,21,35,0),rgba(7,21,35,.62))}.scene.is-active .photo-stack{opacity:1;filter:blur(0) saturate(1.08) contrast(1.05);transform:translate3d(0,0,0) scale(1)}.scene:not(.is-active) .photo-stack{opacity:0}.content{width:min(620px,calc(100vw - 72px));padding:130px 0;margin-left:11vw;opacity:0;transform:translateY(45px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}.content.right{margin-left:auto;margin-right:12vw}.scene.is-active .content{opacity:1;transform:translateY(0)}.glass{padding:48px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(135deg,rgba(8,22,36,.82),rgba(8,22,36,.36));box-shadow:0 30px 100px rgba(0,0,0,.34);backdrop-filter:blur(10px)}.content .eyebrow,.content .number{color:var(--yellow);font-size:13px;text-transform:uppercase;font-weight:900;letter-spacing:.12em;margin:0 0 12px}.number{opacity:.75;margin-bottom:4px}h1,h2{font-size:clamp(58px,7vw,128px);line-height:.86;margin:30px 0 28px;letter-spacing:-.07em;text-transform:uppercase}h2{font-size:clamp(44px,5vw,88px)}.lead,.content p{font-size:clamp(17px,1.5vw,22px);line-height:1.65;color:#d8e1ec;max-width:760px}.content:not(.hero .content) p{font-size:18px}.actions{display:flex;gap:16px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:15px 22px;color:#fff;text-decoration:none;font-weight:900;font-size:14px;transition:.25s}.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.55)}.btn.primary{background:var(--yellow);color:#071523;border-color:var(--yellow)}.tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:28px 0 0}.tags li{padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#e8eef5;font-size:13px;font-weight:800}.stat{display:flex;gap:18px;align-items:center;margin-top:30px}.stat strong{font-size:70px;line-height:.9;color:var(--yellow);letter-spacing:-.08em}.stat span{max-width:230px;color:#d7e1ee;font-weight:800}footer{position:fixed;z-index:50;left:34px;right:34px;bottom:18px;display:flex;justify-content:space-between;color:#6f8296;font-size:12px;pointer-events:none}.scene.in-view .scene-bg{transform:scale(1)}@media (max-width:980px){.progress{display:none}.topbar{padding:0 20px}.topbar nav{gap:14px}.topbar nav a:not(.contact-link){display:none}.scene{min-height:100svh}.photo-stack{width:100%;opacity:.38!important}.photo-stack:after{background:linear-gradient(180deg,rgba(7,21,35,.2),rgba(7,21,35,.94) 68%)}.content,.content.right{margin:0 auto;padding:120px 22px 90px;width:100%}.glass{padding:26px;border-radius:22px;margin-inline:16px}h1{font-size:58px}.lead,.content p{font-size:16px}footer{display:none}}
/* === Glass 3D tilt + lumière directionnelle === */
.glass{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.16) 0%,rgba(45,111,159,.10) 35%,transparent 62%);pointer-events:none;z-index:2;opacity:0;transition:opacity .35s ease}
.glass.lit::before{opacity:1}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 55%);pointer-events:none;z-index:1}

/* === Gleam sur les titres === */
h1,h2{position:relative;overflow:hidden}
h1::after,h2::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(108deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);transform:translateX(-130%);animation:gleam 7s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none;z-index:1}
@keyframes gleam{0%,35%{transform:translateX(-130%)}65%{transform:translateX(230%)}100%{transform:translateX(230%)}}
#developpement h2::after{animation-delay:1.2s}
#design h2::after{animation-delay:2.4s}
#architecture h2::after{animation-delay:3.6s}
#loisirs h2::after{animation-delay:4.8s}

/* === Photo depth parallax (couche img séparée) === */
.photo-stack img{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-origin:center center}

/* === Lueur scène active renforcée === */
.scene.is-active::after{background:radial-gradient(circle at 65% 35%,rgba(45,111,159,.26),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.22));transition:1s ease}

/* === Barre de progression de scroll === */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--blue2),var(--yellow));box-shadow:0 0 12px rgba(255,242,0,.6);transition:width .12s linear}

/* === Canvas particules (hero) === */
.particles{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5}

/* === Sections larges (parcours / réalisations) === */
.scene-wide::before{background:linear-gradient(180deg,rgba(7,21,35,.86),rgba(7,21,35,.64))}
.content-center{width:min(1080px,calc(100vw - 120px));margin:0 auto;padding:140px 0}

/* === Reveal au scroll === */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.shown{opacity:1;transform:none}

/* === Timeline parcours === */
.timeline{list-style:none;margin:46px 0 0;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--yellow),rgba(45,111,159,.4),transparent)}
.timeline-item{position:relative;display:grid;grid-template-columns:120px 1fr;gap:22px;padding:0 0 34px 44px}
.timeline-item:before{content:"";position:absolute;left:7px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,242,0,.15),0 0 18px rgba(255,242,0,.7)}
.timeline-item:nth-child(2){transition-delay:.12s}
.timeline-item:nth-child(3){transition-delay:.24s}
.timeline-item:nth-child(4){transition-delay:.36s}
.t-year{font-size:24px;font-weight:900;color:var(--yellow);letter-spacing:-.03em}
.t-body h3{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}
.t-body p{margin:0;font-size:17px;color:#cdd8e4;max-width:560px}

/* === Grille réalisations === */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.project-card{padding:30px;border-radius:22px}
.project-card:nth-child(2){transition-delay:.12s}
.project-card:nth-child(3){transition-delay:.24s}
.project-card .p-type{color:var(--yellow);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.1em;margin:0 0 10px}
.project-card h3{margin:0 0 12px;font-size:24px;letter-spacing:-.02em}
.project-card p{font-size:16px;color:#cdd8e4;margin:0 0 18px}
.project-card .tags{margin:0}

@media (max-width:980px){
  .content-center{width:100%;padding:120px 22px 90px}
  .timeline-item{grid-template-columns:1fr;gap:6px;padding-left:40px}
  .projects{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.content,.photo-stack,.reveal{opacity:1!important;transform:none!important;filter:none!important}.particles{display:none}}