@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --creme:#F5F0E8; --noir:#0A0A0A; --bordeaux:#7A1C2E;
  --lilas:#C9A0C4; --lilas-vif:#B87DB5;
  --bg:#F5F0E8; --fg:#0A0A0A; --nav-h:72px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"]{ --bg:#0A0A0A; --fg:#F0EAE0; }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:clip;transition:background .5s,color .5s;cursor:none;}

/* CUSTOM CURSOR */
.ca-cursor,.ca-cursor-ring{position:fixed;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);z-index:99999;}
.ca-cursor{width:10px;height:10px;background:var(--bordeaux);z-index:99999;transition:width .18s var(--ease),height .18s var(--ease),background .18s,border-radius .18s;mix-blend-mode:multiply;}
[data-theme="dark"] .ca-cursor{mix-blend-mode:screen;background:var(--lilas-vif);}
.ca-cursor-ring{width:38px;height:38px;border:1.5px solid rgba(122,28,46,.35);z-index:99998;transition:width .38s var(--ease),height .38s var(--ease),opacity .25s;}
[data-theme="dark"] .ca-cursor-ring{border-color:rgba(184,125,181,.35);}
body.cursor-hover .ca-cursor{width:20px;height:20px;background:var(--lilas-vif);}
body.cursor-hover .ca-cursor-ring{width:52px;height:52px;opacity:.5;}
@media(pointer:coarse){.ca-cursor,.ca-cursor-ring{display:none;}body{cursor:auto;}}

/* GRAIN */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* NAV */
nav:not(.nav-mobile-menu):not(.mobile-bottom-nav):not(.proj-nav){
  position:fixed;
  top:1rem;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 3rem);
  max-width:1240px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  z-index:500;
  border-radius:50px;
}
nav:not(.nav-mobile-menu):not(.mobile-bottom-nav):not(.proj-nav)::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:50px;
  border:1px solid rgba(255,255,255,.06);
  transition:background .5s;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
}
[data-theme="dark"] nav:not(.nav-mobile-menu):not(.mobile-bottom-nav):not(.proj-nav)::before{background:rgba(6,6,6,.92);border-color:rgba(255,255,255,.05);}

.nav-logo{position:relative;z-index:1;text-decoration:none;display:flex;align-items:center;}
.nav-logo img{height:30px;width:auto;display:block;transition:opacity .2s;}
.nav-logo:hover img{opacity:.75;}
.nav-logo img{filter:brightness(0) saturate(100%) invert(1) !important;}

/* NAV LOGO IMAGE */
.nav-logo img {
  height: 34px;
  width: 34px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: opacity .2s, transform .2s;
}
.nav-logo:hover img { opacity: .8; transform: scale(1.05); }

/* FOOTER LOGO */
.f-logo img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  border-radius: 5px;
  opacity: .65;
  transition: opacity .2s;
}
.f-logo:hover img { opacity: 1; }


.nav-links{position:relative;z-index:1;display:flex;gap:2.2rem;list-style:none;}
.nav-links a{font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:#F0EAE0;text-decoration:none;opacity:.5;transition:opacity .2s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--lilas-vif);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{opacity:1;}

.nav-right{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;}
.nav-btn{background:none;border:1px solid rgba(255,255,255,.2);color:#F0EAE0;font-family:'DM Sans',sans-serif;font-size:.68rem;letter-spacing:.1em;padding:.4rem .85rem;border-radius:20px;cursor:pointer;transition:all .25s;-webkit-tap-highlight-color:transparent;}
[data-theme="dark"] .nav-btn{border-color:rgba(255,255,255,.18);}
.nav-btn:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;}

/* SOCIAL ICONS IN NAV */
.nav-socials{position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;}
.nav-social{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#F0EAE0;text-decoration:none;transition:all .25s;cursor:pointer;opacity:.55;}
[data-theme="dark"] .nav-social{border-color:rgba(255,255,255,.15);}
.nav-social:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;opacity:1;transform:scale(1.08);}
.nav-social svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;}

/* HAMBURGER */
.nav-hamburger{display:none;position:relative;z-index:2;background:none;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.55rem .65rem;cursor:pointer;flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
[data-theme="dark"] .nav-hamburger{border-color:rgba(255,255,255,.2);}
.nav-hamburger span{display:block;width:18px;height:1.5px;background:#F0EAE0;border-radius:2px;transition:all .3s var(--ease);}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px);}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px);}

/* MOBILE OVERLAY MENU */
.nav-mobile-menu{position:fixed;inset:0;top:var(--nav-h);background:var(--bg);z-index:510;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease);}
.nav-mobile-menu.open{opacity:1;pointer-events:all;transform:translateY(0);}
.nav-mobile-menu a{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,7vw,3rem);font-weight:700;color:var(--fg);text-decoration:none;opacity:.45;transition:opacity .2s,color .2s;letter-spacing:-.02em;}
.nav-mobile-menu a:hover,.nav-mobile-menu a.active{opacity:1;color:var(--bordeaux);}
.nav-mobile-socials{display:flex;gap:1rem;margin-top:1rem;}
.nav-mobile-socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(28,20,16,.15);display:flex;align-items:center;justify-content:center;color:var(--fg);text-decoration:none;opacity:.55;}
[data-theme="dark"] .nav-mobile-socials a{border-color:rgba(240,234,224,.15);}
.nav-mobile-socials a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}

/* BOTTOM NAV MOBILE */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(245,240,232,.93);backdrop-filter:blur(18px);border-top:1px solid rgba(28,20,16,.08);z-index:480;justify-content:space-around;align-items:center;}
[data-theme="dark"] .mobile-bottom-nav{background:rgba(10,10,10,.93);border-color:rgba(240,234,224,.08);}
.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--fg);opacity:.38;transition:opacity .2s,color .2s;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;padding:.4rem .6rem;}
.mobile-bottom-nav a.active{opacity:1;color:var(--bordeaux);}
.mobile-bottom-nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* PAGE TRANSITION */
#page-curtain{position:fixed;inset:0;z-index:9998;background:var(--noir);transform:translateY(100%);pointer-events:none;transition:transform .55s var(--ease);}
#page-curtain.show{transform:translateY(0);}
#page-curtain.hide{transform:translateY(-100%);}

/* SCROLL REVEAL */
.reveal,.reveal-l,.reveal-r{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease);}
.reveal{transform:translateY(52px);}
.reveal-l{transform:translateX(-52px);}
.reveal-r{transform:translateX(52px);}
.reveal.on,.reveal-l.on,.reveal-r.on{opacity:1;transform:translate(0);}
.d1{transition-delay:.1s;}.d2{transition-delay:.22s;}.d3{transition-delay:.34s;}.d4{transition-delay:.48s;}.d5{transition-delay:.65s;}

/* ORBES LUMIÈRE */
.light-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(90px);animation:odrift ease-in-out infinite alternate;}
.oa{width:560px;height:460px;background:radial-gradient(ellipse,rgba(201,160,196,.4) 0%,transparent 70%);top:-8%;left:12%;animation-duration:12s;}
.ob{width:390px;height:390px;background:radial-gradient(ellipse,rgba(122,28,46,.15) 0%,transparent 70%);top:28%;right:-6%;animation-duration:16s;animation-delay:-6s;}
.oc{width:280px;height:280px;background:radial-gradient(ellipse,rgba(201,160,196,.2) 0%,transparent 70%);bottom:6%;left:4%;animation-duration:18s;animation-delay:-10s;}
@keyframes odrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(38px,30px) scale(1.08);}}

.rays{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.ray{stroke:rgba(122,28,46,.12);stroke-width:1;animation:rflicker 4s ease-in-out infinite alternate;}
.ray:nth-child(2){animation-delay:.7s;stroke-width:2;stroke:rgba(122,28,46,.07);}
.ray:nth-child(3){animation-delay:1.3s;}
.ray:nth-child(4){animation-delay:2s;stroke-width:2;}
.ray:nth-child(5){animation-delay:2.7s;}
@keyframes rflicker{0%{opacity:.2;}100%{opacity:.85;}}

.spark{position:absolute;border-radius:50%;background:var(--bordeaux);animation:sparkup linear infinite;pointer-events:none;}
@keyframes sparkup{0%{transform:translateY(100vh) scale(0);opacity:0;}8%{opacity:.6;}92%{opacity:.2;}100%{transform:translateY(-6vh) scale(.2);opacity:0;}}

/* UTILS */
.s-tag{display:block;font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bordeaux);opacity:.75;margin-bottom:1.5rem;}
.s-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:700;line-height:.93;letter-spacing:-.025em;}
.s-title em{font-style:italic;font-weight:300;color:var(--lilas-vif);}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.88rem 2.1rem;font-family:'DM Sans',sans-serif;font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:none;cursor:none;border-radius:50px;transition:all .38s var(--ease);}
.btn-dark{background:var(--noir);color:var(--creme);}
[data-theme="dark"] .btn-dark{background:var(--bordeaux);color:#fff;}
.btn-dark:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.25);}
.btn-outline{background:transparent;color:var(--fg);border:1px solid rgba(28,20,16,.22);}
[data-theme="dark"] .btn-outline{border-color:rgba(240,234,224,.22);}
.btn-outline:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;transform:translateY(-4px);}

/* FOOTER */
footer{padding:2.5rem 3rem;border-top:1px solid rgba(28,20,16,.08);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;}
[data-theme="dark"] footer{border-color:rgba(240,234,224,.08);}
.f-logo{text-decoration:none;display:flex;align-items:center;}
.f-logo img{height:26px;width:auto;opacity:.7;transition:opacity .2s;}
.f-logo:hover img{opacity:1;}
.f-links{display:flex;gap:1.5rem;list-style:none;}
.f-links a{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.38;transition:opacity .2s;}
.f-links a:hover{opacity:1;}
.f-copy{font-size:.63rem;opacity:.32;letter-spacing:.05em;}

/* FOOTER SOCIALS */
.f-socials{display:flex;gap:.5rem;}
.f-social{width:28px;height:28px;border-radius:50%;border:1px solid rgba(28,20,16,.12);display:flex;align-items:center;justify-content:center;color:var(--fg);opacity:.4;text-decoration:none;transition:all .2s;}
[data-theme="dark"] .f-social{border-color:rgba(240,234,224,.12);}
.f-social:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;opacity:1;}
.f-social svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;}

/* SKIP LINK */
.skip{position:fixed;top:-100%;left:1rem;background:var(--bordeaux);color:#fff;padding:.5rem 1rem;border-radius:0 0 8px 8px;font-size:.8rem;text-decoration:none;z-index:9999;transition:top .2s;}
.skip:focus{top:0;}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:4px;}

/* PROJ CARD — fix border-radius during hover scale */
.proj-card{border-radius:20px;overflow:hidden;cursor:none;display:block;text-decoration:none;color:var(--fg);position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.proj-card:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(0,0,0,.13);}
/* Keep inner images contained with border-radius */
.card-img{position:relative;overflow:hidden;border-radius:20px 20px 0 0;}
.proj-card.big .card-img{height:420px;}
.proj-card:not(.big) .card-img{height:280px;}
.card-gradient{position:absolute;inset:0;transition:transform .6s var(--ease);border-radius:inherit;}
.proj-card:hover .card-gradient{transform:scale(1.04);}

/* P-CARD */
.p-card{border-radius:18px;overflow:hidden;text-decoration:none;color:var(--fg);display:block;background:rgba(28,20,16,.03);border:1px solid rgba(28,20,16,.07);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;cursor:none;}
[data-theme="dark"] .p-card{background:rgba(240,234,224,.04);border-color:rgba(240,234,224,.07);}
.p-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.12);border-color:rgba(122,28,46,.25);}
.p-visual{height:220px;position:relative;overflow:hidden;border-radius:18px 18px 0 0;}
.p-bg{position:absolute;inset:0;transition:transform .6s var(--ease);}
.p-card:hover .p-bg{transform:scale(1.05);}

@media(max-width:768px){
  nav:not(.nav-mobile-menu):not(.mobile-bottom-nav):not(.proj-nav){padding:0 1.2rem;}
  .nav-links,.nav-socials{display:none !important;}
  .nav-hamburger{display:flex !important;}
  .mobile-bottom-nav{display:flex !important;}
  footer{padding:2rem 1.2rem 72px;}
}

/* VIEW TRANSITIONS */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 300ms cubic-bezier(0.4,0,1,1) both slide-out; }
::view-transition-new(root) { animation: 300ms cubic-bezier(0,0,0.6,1) 300ms both slide-in; }
@keyframes slide-out { to { opacity:0; transform:translateY(-20px); } }
@keyframes slide-in { from { opacity:0; transform:translateY(20px); } }

/* KEYBOARD NAVIGATION INDICATOR */
body.kb-nav :focus { outline: 2px solid var(--bordeaux) !important; outline-offset: 4px !important; }

/* PROJ CONTENT MOBILE */
@media(max-width:768px) {
  .proj-content { padding: 5rem 1.5rem 8rem !important; }
  .mockup-full-inner { height: 280px !important; }
  .mockup-half-inner { height: 200px !important; }
  .proj-meta-bar { gap: 1rem; }
  .proj-nav { padding: 2rem 1.5rem 5rem; }
  .intro-block p { font-size: .95rem; }
}

/* HERO PROJET MOBILE */
@media(max-width:768px) {
  #hero-proj { padding: calc(var(--nav-h)+3rem) 1.5rem 4rem !important; }
  .proj-title { font-size: clamp(3.5rem,14vw,6rem) !important; }
  .hero-about #hero-about { padding: calc(var(--nav-h)+3rem) 1.5rem 4rem; }
}

/* HERO PADDING FIXES */
#hero { padding: calc(var(--nav-h) + 4rem) 4rem 5rem !important; }
#hero-about { padding: calc(var(--nav-h) + 4rem) 4rem 5rem !important; }
#hero-proj { padding: calc(var(--nav-h) + 4rem) 4rem 5rem !important; }
.hero-tag, .about-tag, .proj-ue-tag { margin-left: 0 !important; }

/* FIX: hero-title / proj-title must not overflow horizontally */
.hero-title, .proj-title, .hero-proj-title, .about-h1 {
  overflow: visible;
  word-break: break-word;
  hyphens: manual;
}

/* FIX: skill pills icons — remove filter that makes them black squares */
.skill-pill img {
  filter: none !important;
  opacity: .75;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.skill-pill:hover img {
  filter: brightness(0) saturate(100%) invert(1) !important;
}

/* FIX: about page portrait top margin */
.portrait-wrap { margin-top: 0; }

/* FIX: proj-nav must NOT be fixed */
.proj-nav {
  position: relative !important;
  top: auto !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 4rem 3rem 6rem;
  max-width: 900px;
  margin: 0 auto;
  background: none !important;
  backdrop-filter: none !important;
  height: auto !important;
  border-bottom: none !important;
}
.proj-nav::before { display: none !important; }

/* MOBILE FIXES */
@media(max-width: 768px) {
  #hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem !important; }
  #hero-about { padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem !important; }
  #hero-proj { padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem !important; }
  
  /* Force content away from left edge */
  main { overflow-x: hidden; }
  .hero-title { font-size: clamp(4rem, 15vw, 8rem) !important; }
  .proj-title { font-size: clamp(3.5rem, 14vw, 7rem) !important; }
  .hero-proj-title { font-size: clamp(3.5rem, 14vw, 7rem) !important; }
  .about-h1 { font-size: clamp(3rem, 12vw, 6rem) !important; }
  
  .proj-nav {
    grid-template-columns: 1fr !important;
    padding: 2rem 1.5rem 5rem !important;
  }
  
  /* Skills home pills on mobile */
  .skills-pills { gap: .5rem; }
  .skill-pill { font-size: .65rem; padding: .45rem 1rem; }
  
  /* Contact form mobile */
  #contact-home { padding: 4rem 1.5rem 6rem !important; }
  
  /* Sections padding */
  #apercu, #skills-home, #valeurs, #competences, #motivations { padding: 4rem 1.5rem !important; }
  #parcours { padding: 4rem 1.5rem !important; }
  #projets-content { padding: 2rem 1.5rem 6rem !important; }
}

/* PROJ NAV ITEM — ensure it's not position:fixed */
.proj-nav-item { cursor: pointer; }

/* CARD ICON SVG — global rule (in case not in page CSS) */
.card-icon-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  transition: transform .4s var(--ease);
}
.proj-card:hover .card-icon-svg,
.p-card:hover .card-icon-svg {
  transform: translate(-50%, -50%) scale(1.18) rotate(-6deg);
}

/* ABOUT valeur icon SVG */
.valeur-icon-svg { margin-bottom: 1rem; display: block; opacity: .75; }

/* SKILL PILL SVG icons */
.skill-pill svg { flex-shrink: 0; opacity: .6; transition: opacity .2s; }
.skill-pill:hover svg { opacity: 1; stroke: #fff; }
.abbr-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: .6rem; font-weight: 700; letter-spacing: 0; flex-shrink: 0; }

/* MOBILE: hide cursor elements */
@media (pointer: coarse) {
  .ca-cursor, .ca-cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  a, button, [role="button"] { cursor: pointer !important; }
}

/* FOCUS RING for keyboard nav */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
  border-radius: 3px;
}

/* SECTION TITLE ALIGNMENT — same left margin for all home sections */
#skills-home,
#apercu,
#contact-home {
  padding-left: 4rem;
  padding-right: 4rem;
}
#skills-home { max-width: 1200px; }
#apercu { max-width: 1200px; }

@media(max-width: 768px) {
  #skills-home,
  #apercu,
  #contact-home {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* MOBILE PILL NAV */
@media(max-width: 768px) {
  nav:not(.nav-mobile-menu):not(.mobile-bottom-nav):not(.proj-nav) {
    top: .6rem;
    width: calc(100% - 1.5rem);
    height: 48px;
    padding: 0 1rem;
  }
}

@media(max-width: 768px) {
  .nav-mobile-menu {
    top: calc(.6rem + 48px + .4rem) !important;
  }
}