*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:    #06060e;
  --bg2:   #0b0b18;
  --bg3:   #10101e;
  --white: #f0f0f5;
  --gray:  #68687a;
  --gray2: #1a1a2e;
  --gray3: #262638;
  --accent:#4a8fff;
  --purple:#7c5ce8;
  --teal:  #2ec4b6;
  --nav-h: 64px;
  --font:  'Inter', -apple-system, sans-serif;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: rgba(74,143,255,0.14) #06060e;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 5px; background: #06060e; }
::-webkit-scrollbar-track { background: #06060e; box-shadow: none; }
::-webkit-scrollbar-thumb { background: rgba(74,143,255,0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74,143,255,0.30); }
::-webkit-scrollbar-corner { background: #06060e; }

body {
  font-family: var(--font);
  background: transparent;
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
body.modal-open { overflow: hidden; }

*, *::before, *::after { outline: none; }
button, a, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; box-shadow: none; }
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
:focus-visible { outline: 2px solid rgba(74,143,255,0.6); outline-offset: 3px; border-radius: 4px; }

#page-bg {
  position: fixed; inset: 0; z-index: -2;
  background: var(--bg);
}
#bg-video {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 1;
  pointer-events: none;
}

#cursor-dot {
  position: fixed; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
#cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.45); border-radius: 50%;
  pointer-events: none; z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s;
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 56px; height: 56px; border-color: var(--accent); }

#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}
#navbar.scrolled {
  background: rgba(6,6,14,0.82);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom-color: rgba(255,255,255,0.07);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  height: var(--nav-h); padding: 0 40px;
  display: flex; align-items: center; gap: 40px;
}
.nav-logo {
  font-size: 1.55rem; font-weight: 800;
  color: var(--white); text-decoration: none;
  margin-right: auto; letter-spacing: 0.01em;
}
.nav-logo span { color: var(--accent); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 0.8125rem; color: rgba(240,240,245,0.68);
  text-decoration: none; padding: 7px 13px; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.07); }

.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(40px, 8vw); padding-top: var(--nav-h);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 35% 50%, rgba(6,6,14,0.2) 0%, rgba(6,6,14,0.7) 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.hero-title {
  font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.038em;
  margin-bottom: 28px; overflow: visible;
}
.hero-word {
  display: inline-block; opacity: 0; transform: translateY(40px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  margin-right: 0.22em;
}
.hero-word.visible { opacity: 1; transform: translateY(0); }
.hero-word-break { display: block; height: 0; }
.gradient-text {
  background: linear-gradient(130deg, #4a8fff 0%, #8b5cf6 48%, #2ec4b6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.hero-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.18rem); font-weight: 300;
  color: var(--gray); line-height: 1.7;
  opacity: 0; transform: translateY(18px);
  animation: fadeUp 0.8s 1.4s forwards; max-width: 560px;
}

.hero-counter {
  position: absolute; bottom: 44px; right: max(32px, 8vw); z-index: 1;
  display: flex; align-items: center; gap: 28px;
  opacity: 0; animation: fadeUp 0.8s 1.4s forwards;
}
.counter-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.counter-item strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.counter-item span { font-size: 0.67rem; color: var(--gray); letter-spacing: 0.07em; text-transform: uppercase; }
.counter-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.12); }
@media (max-width: 640px) { .hero-counter { display: none; } }

.hero-scroll {
  position: absolute; bottom: 44px; left: max(40px, 8vw); z-index: 1;
  opacity: 0; animation: fadeUp 0.8s 1.8s forwards;
  display: flex; align-items: center; gap: 14px;
}
.hero-scroll span { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gray); }
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.35), transparent);
  animation: scrollPulse 2.5s ease-in-out infinite;
}

#projects-section { position: relative; }
.projects-swipe-hint { display:none; }
#projects-track-outer { position: relative; }
#projects-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: clip;
  display: flex; align-items: center;
  padding-top: var(--nav-h); box-sizing: border-box;
}
#projects-track {
  display: flex; gap: 28px;
  padding: 0 max(40px, 5vw);
  will-change: transform;
}

.proj-card {
  flex-shrink: 0;
  width: min(520px, 80vw);
  height: calc(100vh - var(--nav-h) - 80px);
  border-radius: 28px; position: relative;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; isolation: isolate;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 40px 38px;
}
.proj-card:hover { transform: translateY(-12px) scale(1.02) translateZ(0); }
.proj-card-bg { position: absolute; inset: 0; z-index: 0; }
.proj-card-photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.28; mix-blend-mode: luminosity;
  transition: opacity 0.55s var(--ease);
  pointer-events: none; border-radius: inherit;
}
.proj-card:hover .proj-card-photo { opacity: 0.60; mix-blend-mode: normal; }
.proj-card-pattern {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0.14; transition: opacity 0.5s var(--ease); border-radius: inherit;
}
.proj-card:hover .proj-card-pattern { opacity: 0.24; }
.proj-card-num {
  position: absolute; top: 12px; right: 18px;
  font-size: clamp(9rem, 18vw, 16rem); font-weight: 900;
  line-height: 1; letter-spacing: -0.08em;
  color: rgba(255,255,255,0.15); z-index: 3;
  user-select: none; pointer-events: none;
  transition: transform 0.55s var(--ease), color 0.4s;
}
.proj-card:hover .proj-card-num { transform: scale(1.05) translate(6px,-6px); color: rgba(255,255,255,0.22); }
.proj-card-gradient {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit;
  background: linear-gradient(160deg, transparent 15%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.94) 100%);
}
.proj-card-content { position: relative; z-index: 5; }
.proj-card-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 980px;
  border: 1px solid currentColor; margin-bottom: 18px; opacity: 0.9;
}
.proj-card-title {
  font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 16px;
}
.proj-card-teaser {
  font-size: 0.9rem; font-weight: 300;
  color: rgba(240,240,245,0.72); line-height: 1.72;
  margin-bottom: 30px; max-width: 380px;
}
.proj-card-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 500;
  padding: 11px 22px; border-radius: 980px;
  border: 1px solid currentColor; background: transparent;
  cursor: pointer; font-family: var(--font);
  transition: background 0.25s, transform 0.25s var(--ease); color: inherit;
}
.proj-card-btn:hover { background: rgba(255,255,255,0.12); transform: translateX(4px); }
.proj-card-btn svg { width: 14px; height: 14px; transition: transform 0.25s; }
.proj-card-btn:hover svg { transform: translateX(3px); }

.about-section {
  min-height: 75vh; display: flex; align-items: center; justify-content: center;
  padding: 120px max(40px, 8vw); text-align: center; position: relative; overflow: hidden;
}
.about-section::before {
  content: ''; position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(74,143,255,0.07) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.about-inner { max-width: 780px; position: relative; z-index: 1; }
.section-eyebrow {
  display: block; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px;
}
.section-title {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 28px;
}
.section-text {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem); font-weight: 300;
  line-height: 1.82; color: var(--gray); max-width: 600px; margin: 0 auto 56px;
}
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skill-item {
  background: rgba(16,16,30,0.7); border: 1px solid var(--gray2);
  border-radius: 20px; padding: 30px 22px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color 0.4s, transform 0.4s var(--ease), box-shadow 0.4s;
  backdrop-filter: blur(8px);
}
.skill-item:hover { border-color: rgba(74,143,255,0.35); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(74,143,255,0.08); }
.skill-icon-wrap {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74,143,255,0.1); margin-bottom: 4px;
}
.skill-icon-wrap svg { width: 22px; height: 22px; color: var(--accent); }
.skill-item strong { font-size: 0.9375rem; font-weight: 600; }
.skill-item span { font-size: 0.8rem; font-weight: 300; color: var(--gray); line-height: 1.5; }

.contact-section {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  padding: 100px max(40px, 8vw); text-align: center; position: relative; overflow: hidden;
}
.contact-section::before {
  content: ''; position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(74,143,255,0.1) 0%, transparent 70%);
  bottom: -100px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.contact-inner { position: relative; z-index: 1; }
.contact-inner .section-text { margin-bottom: 40px; }
.btn-contact {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 500; padding: 16px 38px; border-radius: 980px;
  border: 1px solid rgba(74,143,255,0.35); color: var(--accent);
  text-decoration: none; background: transparent; cursor: pointer;
  font-family: var(--font); position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.2s;
}
.btn-contact::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(74,143,255,0.15), transparent);
  transform: translateX(-100%); transition: transform 0.5s;
}
.btn-contact:hover::before { transform: translateX(100%); }
.btn-contact:hover { border-color: var(--accent); transform: scale(1.02); }

footer {
  padding: 28px max(40px, 8vw);
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(5,5,14,0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-logo { font-weight: 800; font-size: 0.9375rem; }
.footer-logo span { color: var(--accent); }
.footer-copy { font-size: 0.79rem; color: var(--gray); }
.footer-visits { font-size: 0.75rem; color: rgba(104,104,122,0.6); white-space: nowrap; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 0.79rem; color: var(--gray); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes scrollPulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } }

/* ── Expand Overlay ── */
#expand-backdrop {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(4,4,12,0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
#expand-backdrop.show { opacity: 1; pointer-events: all; }

#expand-overlay {
  position: fixed; z-index: 9500; border-radius: 28px;
  background: rgba(8,8,22,0.92);
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden; opacity: 0; pointer-events: none; display: flex;
  --spring-open:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-close: cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    left 0.62s var(--spring-open), top 0.62s var(--spring-open),
    width 0.62s var(--spring-open), height 0.62s var(--spring-open),
    opacity 0.28s ease, border-radius 0.62s var(--spring-open), box-shadow 0.62s ease;
  box-shadow: none;
}
#expand-overlay.is-open {
  opacity: 1; pointer-events: all;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08), 0 0 100px -20px rgba(74,143,255,0.25);
}
#expand-overlay.is-closing {
  transition:
    left 0.52s var(--spring-close), top 0.52s var(--spring-close),
    width 0.52s var(--spring-close), height 0.52s var(--spring-close),
    opacity 0.22s ease, border-radius 0.52s var(--spring-close), box-shadow 0.3s ease;
  box-shadow: none;
}
#expand-accent { position: absolute; top:0; left:0; right:0; height:4px; background: var(--ec, var(--accent)); }
#expand-close {
  position: absolute; top:20px; right:20px; z-index:10;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-radius: 980px;
  background: var(--accent); border: 1px solid rgba(74,143,255,0.6);
  color:#fff; font-size:0.8rem; font-weight:600; font-family:var(--font);
  cursor:pointer; outline:none; -webkit-appearance:none;
  transition: background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
  box-shadow: 0 4px 18px rgba(74,143,255,0.35), 0 8px 32px rgba(0,0,0,0.4);
}
#expand-close:hover { background:#5f9fff; transform:scale(1.05); box-shadow:0 6px 24px rgba(74,143,255,0.55),0 12px 40px rgba(0,0,0,0.5); }
#expand-close:focus, #expand-close:active { outline:none !important; box-shadow:0 4px 18px rgba(74,143,255,0.35),0 8px 32px rgba(0,0,0,0.4); }

#expand-content { display:flex; width:100%; height:100%; opacity:0; transition:opacity 0.3s; }
#expand-content.show { opacity:1; }
#expand-left { flex:1; padding:52px 44px 44px; overflow-y:auto; display:flex; flex-direction:column; }
#expand-left::-webkit-scrollbar { width:4px; }
#expand-left::-webkit-scrollbar-track { background:transparent; }
#expand-left::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:2px; }
#expand-right { width:50%; position:relative; flex-shrink:0; border-left:1px solid rgba(255,255,255,0.06); }
#expand-right-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.65; }
.expand-right-grad { position:absolute; inset:0; background:linear-gradient(to right,rgba(8,8,22,0.9) 0%,transparent 40%); }

.expand-num-tag { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ec,var(--accent)); margin-bottom:14px; }
.expand-title { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-0.035em; line-height:1.06; margin-bottom:12px; }
.expand-headline { font-size:1.05rem; font-weight:400; color:rgba(240,240,245,0.85); line-height:1.55; margin-bottom:18px; font-style:italic; }
.expand-desc { font-size:0.9rem; font-weight:300; color:rgba(240,240,245,0.65); line-height:1.82; margin-bottom:28px; }
.expand-features { list-style:none; margin-bottom:32px; display:flex; flex-direction:column; gap:10px; }
.expand-features li { display:flex; align-items:flex-start; gap:10px; font-size:0.875rem; color:rgba(240,240,245,0.8); }
.expand-features li::before {
  content:''; flex-shrink:0; width:16px; height:16px; margin-top:2px;
  border-radius:50%; background:var(--ec,var(--accent)); opacity:0.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px; background-repeat:no-repeat; background-position:center;
}
.expand-open-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; border-radius:980px; border:none;
  font-size:0.95rem; font-weight:600; font-family:var(--font);
  color:#fff; text-decoration:none; cursor:pointer;
  background:var(--ec,var(--accent));
  transition:transform 0.3s var(--ease),box-shadow 0.3s,opacity 0.3s;
  margin-top:auto; width:fit-content;
}
.expand-open-btn:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,0,0,0.5); opacity:0.92; }
.expand-open-btn svg { width:16px; height:16px; transition:transform 0.25s; }
.expand-open-btn:hover svg { transform:translateX(3px); }
.expand-visit { font-size:0.75rem; color:rgba(240,240,245,0.35); margin-bottom:8px; }

/* ── Iframe Overlay (Nutrition / Flow Bike) ── */
#iframe-overlay { position:fixed; inset:0; z-index:9800; display:none; flex-direction:column; background:#06060e; }
#iframe-overlay.open { display:flex; }
#ifo-bar {
  display:flex; justify-content:flex-end; align-items:center;
  padding:8px 16px; background:#0B1220;
  border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0;
}
#ifo-quit-float {
  display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:980px;
  background:rgba(220,40,40,0.12); border:1px solid rgba(220,40,40,0.28);
  color:#fff; font-size:0.8rem; font-weight:500; font-family:var(--font);
  cursor:pointer; outline:none; transition:background 0.2s;
}
#ifo-quit-float:hover { background:rgba(220,40,40,0.7); border-color:rgba(220,40,40,0.5); }
#ifo-progress { position:absolute; top:44px; left:0; right:0; height:3px; z-index:10; display:none; }
#ifo-progress.visible { display:block; }
#iframe-overlay iframe { flex:1; width:100%; border:none; display:block; }
#ifo-progress-bar {
  height:100%; background:linear-gradient(90deg,var(--accent),var(--teal));
  width:0; animation:ifoLoad 2.2s ease forwards;
}
@keyframes ifoLoad { 0%{width:0;} 60%{width:72%;} 100%{width:100%;} }

/* ── Flip-card Modal (Test Cognitif / Ma Qualité Première) ── */
#flip-modal {
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(3,3,10,0.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; pointer-events:none; transition:opacity 0.3s; perspective:1600px;
}
#flip-modal.open { opacity:1; pointer-events:all; }
#flip-modal-box {
  background:#0b0b18; border:1px solid rgba(255,255,255,0.1);
  border-radius:24px; width:100%; max-width:680px; max-height:90vh;
  position:relative; box-shadow:0 40px 100px rgba(0,0,0,0.75);
  transform-style:preserve-3d; transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),max-width 0.45s var(--ease),height 0.45s var(--ease),border-radius 0.45s var(--ease);
}
#flip-modal-box.flipped { transform:rotateY(180deg); }
#flip-modal-box.app-mode { max-width:min(1100px,96vw); height:88vh; max-height:88vh; border-radius:18px; }
#flip-modal-box.app-mode .fmf-front,
#flip-modal-box.app-mode .fmf-back { border-radius:18px; max-height:88vh; }
.fmf { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fmf-front { position:relative; width:100%; overflow-y:auto; max-height:90vh; border-radius:24px; }
.fmf-back {
  position:absolute; inset:0; transform:rotateY(180deg);
  border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column; background:#0B1220;
}
.fmf-screenshot { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:20px 20px 0 0; }
.fmf-screenshot img { width:100%; height:100%; object-fit:cover; display:block; }
.fmf-body { padding:28px 32px 32px; }
.fmf-tag { font-size:0.72rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block; }
.fmf-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin-bottom:12px; }
.fmf-desc { font-size:0.9rem; font-weight:300; line-height:1.75; color:var(--gray); margin-bottom:24px; }
.fmf-visit { font-size:0.75rem; color:rgba(240,240,245,0.35); margin-bottom:18px; }
.fmf-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:50px; font-size:0.9rem; font-weight:600;
  color:#fff; border:none; cursor:pointer; font-family:var(--font);
  transition:opacity 0.2s,transform 0.2s;
}
.fmf-cta:hover { opacity:0.88; transform:translateY(-1px); }
.fmf-controls {
  display:flex; justify-content:flex-end; align-items:center;
  padding:8px 16px; background:#0B1220; flex-shrink:0; gap:12px; z-index:10;
}
.fmf-float-btn {
  display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:500;
  color:rgba(240,240,245,0.9); background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.15); border-radius:980px; padding:6px 14px;
  cursor:pointer; font-family:var(--font); transition:background 0.2s,transform 0.2s;
}
.fmf-float-btn:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }
.fmf-quit { background:rgba(220,40,40,0.12); border-color:rgba(220,40,40,0.28); }
.fmf-quit:hover { background:rgba(220,40,40,0.7) !important; border-color:rgba(220,40,40,0.5); }
.fmf-loader {
  position:absolute; inset:44px 0 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; background:#06060e; z-index:2;
  color:rgba(240,240,245,0.55); font-size:0.9rem; transition:opacity 0.3s;
}
.fmf-loader.hidden { opacity:0; pointer-events:none; }
.fmf-spinner {
  width:36px; height:36px;
  border:3px solid rgba(255,255,255,0.08);
  border-top-color:rgba(255,255,255,0.6); border-radius:50%;
  animation:fmf-spin 0.7s linear infinite;
}
@keyframes fmf-spin { to { transform:rotate(360deg); } }
#fmIframe { flex:1; width:100%; border:none; display:block; }

/* ── Studio Animaux — modal direct (iframe seul, sans flip) ── */
#sa-modal {
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(3,3,10,0.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
#sa-modal.open { opacity:1; pointer-events:all; }
#sa-modal-box {
  background:#0B1220; border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; width:min(1100px,96vw); height:88vh;
  position:relative; box-shadow:0 40px 100px rgba(0,0,0,0.75);
  display:flex; flex-direction:column; overflow:hidden;
}
#sa-controls {
  display:flex; justify-content:flex-end; align-items:center;
  padding:8px 16px; background:#0B1220; flex-shrink:0; z-index:10;
}
#sa-quit {
  display:flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:500;
  color:rgba(240,240,245,0.9); background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.15); border-radius:980px; padding:6px 14px;
  cursor:pointer; font-family:var(--font); transition:background 0.2s,transform 0.2s;
}
#sa-quit:hover { background:rgba(220,40,40,0.7); border-color:rgba(220,40,40,0.5); transform:translateY(-1px); }
.sa-loader {
  position:absolute; inset:44px 0 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; background:#06060e; z-index:2;
  color:rgba(240,240,245,0.55); font-size:0.9rem; transition:opacity 0.3s;
}
.sa-loader.hidden { opacity:0; pointer-events:none; }
.sa-spinner {
  width:36px; height:36px;
  border:3px solid rgba(245,158,11,0.15);
  border-top-color:#f59e0b; border-radius:50%;
  animation:fmf-spin 0.7s linear infinite;
}
#sa-iframe { flex:1; width:100%; border:none; display:block; }

@media (max-width:768px) {
  :root { --nav-h: 74px; }
  #navbar {
    background: linear-gradient(180deg, rgba(6,6,14,0.94) 0%, rgba(6,6,14,0.70) 72%, rgba(6,6,14,0) 100%);
    border-bottom-color: transparent;
  }
  #navbar.scrolled {
    background: rgba(6,6,14,0.88);
  }
  .nav-inner {
    height: var(--nav-h);
    max-width: none;
    padding: max(8px, env(safe-area-inset-top)) 16px 10px;
    gap: 10px;
  }
  .nav-logo {
    flex: 0 0 auto;
    margin-right: 0;
    white-space: nowrap;
    font-size: clamp(1.02rem, 4.5vw, 1.18rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .nav-links {
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(16,16,30,0.48);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .nav-links li { flex: 0 0 auto; }
  .nav-links a {
    white-space: nowrap;
    font-size: clamp(0.66rem, 2.65vw, 0.76rem);
    line-height: 1;
    padding: 8px 7px;
    border-radius: 999px;
  }
  .hero {
    padding-left: max(24px, 7vw);
    padding-right: max(24px, 7vw);
    padding-top: calc(var(--nav-h) + 14px);
  }
  .skills-grid { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; }
  body { cursor:auto; }
  #cursor-dot, #cursor-ring { display:none; }
  #expand-right { display:none; }
  #expand-left { padding:48px 24px 36px; }
  .expand-title { font-size:1.8rem; }
  #bg-video { display:none; }
  #projects-section {
    overflow:visible;
    padding:42px 0 56px;
  }
  .projects-swipe-hint {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:max-content;
    max-width:calc(100vw - 48px);
    margin:0 auto 16px;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid rgba(74,143,255,0.24);
    background:rgba(16,16,30,0.56);
    color:rgba(240,240,245,0.72);
    box-shadow:0 16px 40px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    pointer-events:none;
    opacity:0.9;
    transition:opacity 0.28s ease, transform 0.28s ease;
  }
  .projects-swipe-hint i {
    position:relative;
    display:block;
    width:42px;
    height:16px;
  }
  .projects-swipe-hint i::before {
    content:'';
    position:absolute;
    left:2px; right:2px; top:7px;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,rgba(46,196,182,0),rgba(46,196,182,0.65),rgba(74,143,255,0.95));
  }
  .projects-swipe-hint i::after {
    content:'';
    position:absolute;
    top:3px; left:2px;
    width:10px; height:10px;
    border-radius:50%;
    background:linear-gradient(135deg,#2ec4b6,#4a8fff);
    box-shadow:0 0 18px rgba(74,143,255,0.75);
    animation:projectSwipeHint 1.35s ease-in-out infinite;
  }
  #projects-section.projects-hint-dismissed .projects-swipe-hint {
    opacity:0;
    transform:translateY(-5px);
  }
  #projects-track-outer { height:auto !important; }
  #projects-sticky {
    position:relative; top:auto; height:auto;
    display:block; overflow:visible;
    padding-top:0;
  }
  #projects-track {
    --mobile-card-w: min(84vw, 400px);
    display:flex;
    width:100vw;
    max-width:100vw;
    overflow-x:auto; overflow-y:hidden;
    transform:none !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:calc((100vw - var(--mobile-card-w)) / 2);
    scroll-behavior:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    padding:0 calc((100vw - var(--mobile-card-w)) / 2) 22px;
    gap:clamp(14px,4vw,22px);
    scrollbar-width:none;
    will-change:scroll-position;
    cursor:grab;
  }
  #projects-track:active,
  #projects-track.is-dragging { cursor:grabbing; }
  #projects-track::-webkit-scrollbar { display:none; }
  .proj-card {
    flex:0 0 var(--mobile-card-w);
    width:var(--mobile-card-w); height:min(72vh,620px); height:min(72svh,620px);
    scroll-snap-align:center;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-x;
  }
  .proj-card-btn { touch-action:manipulation; }
  .proj-card:hover { transform:none !important; }
}
@keyframes projectSwipeHint {
  0%,100% { transform:translateX(0); opacity:0.45; }
  45% { transform:translateX(26px); opacity:1; }
  70% { transform:translateX(26px); opacity:0.45; }
}
@media (max-width:480px) {
  #expand-left { padding:44px 18px 28px; }
  .nav-inner { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .nav-links a { padding-inline: 6px; }
}
@media (max-width:360px) {
  .nav-logo { font-size: 0.98rem; }
  .nav-links a { font-size: 0.62rem; padding-inline: 5px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .hero-word { opacity:1; transform:none; }
  .reveal { opacity:1; transform:none; }
}