/* ═══════════════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a; --white:#f7f3ec; --cream:#faf7f2;
  --green:#1fce6d; --purple:#7c5ce8; --yellow:#ffc233;
  --orange:#ff5c1a; --lime:#c6f135; --blue:#3b82f6;
  --pink:#ff3fa4;   --teal:#00d4c8;
  --fp:'Poppins',sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--black);color:var(--white);font-family:var(--fp);overflow-x:hidden}

/* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════ */
.cursor{
  position:fixed;width:12px;height:12px;border-radius:50%;
  background:var(--lime);pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);transition:transform 0.1s;mix-blend-mode:difference;
}
.cursor-ring{
  position:fixed;width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(198,241,53,0.5);pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);transition:all 0.12s ease-out;
}

/* ═══════════════════════════════════════════
   S1 – HERO
═══════════════════════════════════════════ */
#hero{
  min-height:100svh;background:var(--black);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:70px 24px 100px;
  position:relative;overflow:hidden;
}
/* Blobs */
.blob{
  position:absolute;border-radius:50%;filter:blur(112px);
  opacity:0.28;pointer-events:none;
  animation:blobmove var(--d,5.6s) ease-in-out infinite;
  will-change:transform;
}
.blob1{
  width:560px;height:560px;
  background:radial-gradient(circle,rgba(124,92,232,0.95) 0%,rgba(124,92,232,0.6) 48%,transparent 76%);
  top:-180px;left:-180px;--d:4.6s;animation-delay:0s;
}
.blob2{
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,92,26,0.92) 0%,rgba(255,92,26,0.58) 50%,transparent 78%);
  bottom:-220px;right:-150px;--d:5.1s;animation-delay:-1.8s;
}
.blob3{
  width:470px;height:470px;
  background:radial-gradient(circle,rgba(31,206,109,0.95) 0%,rgba(31,206,109,0.58) 48%,transparent 76%);
  top:44%;left:47%;margin:-235px 0 0 -235px;--d:4.3s;animation-delay:-2.6s;
}
.blob4{
  width:460px;height:460px;
  background:radial-gradient(circle,rgba(255,194,51,0.95) 0%,rgba(255,194,51,0.58) 48%,transparent 76%);
  top:12%;right:-170px;--d:4.8s;animation-delay:-0.9s;
}
@keyframes blobmove{
  0%,100%{transform:scale(1) translate(0,0)}
  33%{transform:scale(1.16) translate(30px,-32px)}
  66%{transform:scale(0.88) translate(-28px,24px)}
}

/* Hero 2×2 grid */
.hgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  width:min(400px,88vw);margin-bottom:2.8rem;position:relative;z-index:2;
}
/* ── DROP-IN ANIMATION — soft & natural ── */
@keyframes dropIn{
  0%  {opacity:0;transform:translateY(-70px) scale(0.9)}
  50% {opacity:1;transform:translateY(7px)   scale(1.02)}
  72% {transform:translateY(-3px) scale(0.99)}
  100%{opacity:1;transform:translateY(0)     scale(1)}
}
.hcard{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:visible;
  opacity:0;animation:dropIn 0.85s cubic-bezier(.22,.68,0,1.2) forwards;
}
.hcard:nth-child(1){animation-delay:0.04s}
.hcard:nth-child(2){animation-delay:0.24s}
.hcard:nth-child(3){animation-delay:0.44s}
.hcard:nth-child(4){animation-delay:0.64s}
.hcard::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,0.14);
  opacity:0;transition:opacity 0.2s;border-radius:inherit;
}
.hcard:hover::after{opacity:1}
.hcard svg{width:50%;height:50%;fill:rgba(0,0,0,0.82);position:relative;z-index:2;pointer-events:none}

.hc-g{background:var(--green);border-radius:30px}
.hc-p{background:var(--purple);border-radius:50%}
.hc-y{background:var(--yellow);border-radius:30px}
.hc-o{background:var(--orange);clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,0 100%)}

.float-badge{
  position:absolute;top:-16px;right:-16px;
  background:var(--lime);color:var(--black);
  font-size:0.59rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;white-space:nowrap;z-index:20;
  animation:wobble 3s ease-in-out infinite;box-shadow:0 4px 16px rgba(198,241,53,0.4);
}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Hero text */
.htitle{
  font-size:clamp(3.2rem,13vw,6rem);font-weight:900;letter-spacing:-3px;
  line-height:0.9;text-align:center;color:var(--white);margin-bottom:1rem;
  position:relative;z-index:2;
}
.htitle span{
  background:linear-gradient(135deg,var(--lime),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hsub{
  font-size:clamp(0.68rem,2.5vw,0.82rem);font-weight:600;letter-spacing:0.35em;
  text-transform:uppercase;color:rgba(247,243,236,0.38);text-align:center;
  position:relative;z-index:2;
}
/* Scroll indicator */
.scroll-ind{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;
  color:rgba(247,243,236,0.28);z-index:2;animation:fadeupInd 1.5s ease 2.2s both;
}
.scroll-ind-line{
  width:1px;height:38px;
  background:linear-gradient(to bottom,transparent,var(--lime));
  animation:growLine 1.6s ease infinite;
}
@keyframes growLine{0%,100%{transform:scaleY(0);opacity:0}50%{transform:scaleY(1);opacity:1}}
@keyframes fadeupInd{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══════════════════════════════════════════
   S2 – PHRASE
═══════════════════════════════════════════ */
#phrase{
  background:var(--cream);
  color:var(--black);
  padding:90px 28px 100px;
  position:relative;
  overflow:hidden;
}
#phrase::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%3E%3Cg%20stroke='%233b82f6'%20stroke-opacity='0.18'%20stroke-width='0.8'%20stroke-linecap='round'%3E%3Cpath%20d='M9%206.6v4.8'/%3E%3Cpath%20d='M6.6%209h4.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:18px 18px;
  background-repeat:repeat;
  opacity:0.78;
}
.phrase-inner{max-width:520px;margin:0 auto;position:relative;z-index:1}
.phrase-text{
  font-size:clamp(2.4rem,10vw,4.5rem);font-weight:900;
  letter-spacing:-2px;line-height:1.06;text-align:center;
}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(2.6rem,10vw,4.2rem);height:clamp(2.6rem,10vw,4.2rem);
  border-radius:12px;vertical-align:middle;margin:0 4px;
  position:relative;top:-4px;
  transition:transform 0.3s cubic-bezier(.34,1.56,.64,1);cursor:default;
}
.chip:hover{transform:scale(1.2) rotate(-8deg)}
.chip svg{width:58%;height:58%;fill:rgba(0,0,0,0.85)}
.chip-g{background:var(--green);border-radius:12px}
.chip-p{background:var(--purple);border-radius:50%}
.chip-o{background:var(--orange);clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.chip-y{background:var(--yellow);border-radius:12px}
.chip-l{background:var(--lime);border-radius:12px}

/* ═══════════════════════════════════════════
   S3 – COLONNES COLORÉES (staggered)
═══════════════════════════════════════════ */
#columns{
  height:100svh;overflow:hidden;display:flex;
  position:relative;background:var(--orange); /* gaps show as orange = seamless */
  margin-bottom:0;z-index:2;
}
.col{flex:1;height:100%;position:relative;overflow:hidden}.col-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  will-change:transform;
}
/* Column colors */
.c1{background:var(--yellow)}
.c2{background:var(--orange)}
.c3{background:var(--lime)}
.c4{background:var(--purple)}
.c5{background:var(--teal)}

/* ── STAGGERED EDGES: each column shifted at top & bottom ── */
/* Using translateY on the whole column to stagger their vertical position */
.c1{transform:translateY(-4%)}
.c2{transform:translateY(5%)}
.c3{transform:translateY(-8%)}
.c4{transform:translateY(3%)}
.c5{transform:translateY(-6%)}

/* Bottom shapes inside each column */
.cshape{width:140%;margin-bottom:-10px;transition:transform 0.1s linear}
.c1 .cshape{aspect-ratio:1;border-radius:50% 50% 0 0/40% 40% 0 0;background:var(--blue)}
.c2 .cshape{aspect-ratio:1;clip-path:polygon(50% 0%,100% 100%,0% 100%);background:var(--lime)}
.c3 .cshape{aspect-ratio:1;border-radius:50% 50% 0 0/40% 40% 0 0;background:var(--black)}
.c4 .cshape{aspect-ratio:1;clip-path:polygon(50% 0%,100% 100%,0% 100%);background:var(--yellow)}
.c5 .cshape{aspect-ratio:1;border-radius:50% 50% 0 0/40% 40% 0 0;background:var(--pink)}

/* Floating shapes inside columns */
.cf{position:absolute;pointer-events:none}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes dotfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* ═══════════════════════════════════════════
   S4 – IDENTITÉ (orange)
═══════════════════════════════════════════ */
#identity{
  --identity-bottom-gap:80px;
  --identity-photo-bottom-nudge:14px;
  background:var(--orange);padding:80px 28px var(--identity-bottom-gap);
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;z-index:1;
}
.map-bg{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,0,0,0.14) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.badge-pill{display:inline-flex;align-items:center;gap:10px;margin-bottom:2rem;position:relative;z-index:2}
.bp-num{
  width:38px;height:38px;background:var(--black);color:var(--white);
  border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;
}
.bp-label{border:2.5px solid rgba(0,0,0,0.45);border-radius:100px;padding:5px 16px;font-weight:700;font-size:0.82rem;color:var(--black)}
#identity h2{
  font-size:clamp(2.8rem,12vw,5.5rem);font-weight:900;
  letter-spacing:-3px;line-height:0.9;color:var(--black);margin-bottom:1.5rem;position:relative;z-index:2;
}
.idesc{
  font-size:0.98rem;line-height:1.8;color:rgba(0,0,0,0.62);
  max-width:400px;position:relative;z-index:2;margin-bottom:2.5rem;
}
/* Interest tags */
.tags{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:2;margin-bottom:2.5rem}
.tag{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:rgba(0,0,0,0.11);border:2px solid rgba(0,0,0,0.13);border-radius:100px;
  font-weight:700;font-size:0.84rem;color:var(--black);
  transition:all 0.3s cubic-bezier(.34,1.56,.64,1);cursor:default;
}
.tag:hover{background:rgba(0,0,0,0.22);transform:scale(1.05) translateY(-2px)}
.tag i{font-size:0.95rem}
.tag-ai{background:rgba(0,0,0,0.18)!important;border-color:rgba(0,0,0,0.3)!important}

.identity-layout{
  width:min(1240px,100%);
  margin:0 auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  align-items:end;
  gap:clamp(18px,4vw,54px);
}
.identity-copy{
  min-width:0;
}
.identity-copy .idesc{
  max-width:640px;
}
.identity-copy .tags{
  margin-bottom:0;
}
.identity-photo-wrap{
  position:relative;
  justify-self:end;
  align-self:end;
  margin:0 0 calc((var(--identity-bottom-gap) * -1) - var(--identity-photo-bottom-nudge)) 0;
  width:min(140%,588px);
  z-index:1;
  pointer-events:none;
}
.identity-photo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:50% bottom;
  filter:none;
}

/* ═══════════════════════════════════════════
   S5 – RÉSEAUX SOCIAUX
═══════════════════════════════════════════ */
#socials{background:var(--black);padding:90px 24px 100px}
.soc-header{text-align:center;margin-bottom:3.5rem}
.soc-eyebrow{
  font-size:0.7rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--lime);margin-bottom:1rem;display:block;
}
.soc-title{font-size:clamp(2rem,9vw,4rem);font-weight:900;letter-spacing:-2.5px;line-height:0.95;color:var(--white)}
.soc-title em{font-style:normal;color:var(--lime)}

/* New airy card grid */
.soc-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:620px;margin:0 auto;padding:0 4px;
}
.scard{
  display:flex;flex-direction:column;gap:14px;
  padding:24px;border-radius:24px;text-decoration:none;
  border:1.5px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.04);
  transition:all 0.35s cubic-bezier(.34,1.56,.64,1);
}
.scard:hover{
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-5px);
}
.sc-top{display:flex;align-items:center;justify-content:space-between}
.sc-ico{
  width:50px;height:50px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:var(--c,#444);color:#fff;
  transition:transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.scard:hover .sc-ico{transform:scale(1.12) rotate(-6deg)}
.sc-arr{
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;color:rgba(255,255,255,0.28);
  transition:all 0.25s;
}
.scard:hover .sc-arr{border-color:rgba(255,255,255,0.5);color:#fff;transform:rotate(45deg)}
.scard h4{font-size:1rem;font-weight:700;color:var(--white);margin:0}
.scard p{font-size:0.75rem;color:rgba(247,243,236,0.36);margin:0;line-height:1.45}
@media(max-width:440px){.soc-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════
   S6 – PIN ACCESS
═══════════════════════════════════════════ */
#access{
  background:var(--cream);color:var(--black);
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:80px 24px 100px;text-align:center;position:relative;overflow:hidden;
}
.access-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
.ac-shape{position:absolute;pointer-events:none;animation:acfloat var(--dur) ease-in-out infinite;opacity:0.22}
@keyframes acfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-28px) rotate(12deg)}}
.ac1{width:110px;height:110px;background:var(--yellow);top:8%;left:4%;--dur:5s;border-radius:26px}
.ac2{width:75px;height:75px;background:var(--purple);top:12%;right:6%;--dur:7s;border-radius:50%}
.ac3{width:58px;height:58px;background:var(--green);bottom:18%;left:8%;--dur:6s;border-radius:14px}
.ac4{width:90px;height:90px;background:var(--pink);bottom:12%;right:4%;--dur:8s;clip-path:polygon(50% 0%,100% 100%,0% 100%)}
.ac5{width:45px;height:45px;background:var(--teal);top:50%;left:2%;--dur:4.5s;border-radius:50%}
.ac6{width:65px;height:65px;background:var(--orange);bottom:35%;right:3%;--dur:6.5s;border-radius:18px}

.ac-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,0,0,0.06);border:1.5px solid rgba(0,0,0,0.1);border-radius:100px;
  padding:7px 16px;font-size:0.7rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(0,0,0,0.42);margin-bottom:2rem;
  position:relative;z-index:2;
}
.ac-badge::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
#access h2{
  font-size:clamp(2.8rem,12vw,5rem);font-weight:900;letter-spacing:-2.5px;line-height:0.9;
  color:var(--black);margin-bottom:0.6rem;position:relative;z-index:2;
}
#access .asub{font-size:0.85rem;color:rgba(0,0,0,0.38);margin-bottom:3rem;position:relative;z-index:2}
.pdots{display:flex;gap:14px;margin-bottom:2.5rem;position:relative;z-index:2}
.pd{
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(0,0,0,0.18);background:transparent;transition:all 0.2s;
}
.pd.on{border-color:var(--black);background:var(--black);box-shadow:0 0 12px rgba(0,0,0,0.25)}
.pd.er{border-color:var(--orange);background:var(--orange);animation:jiggle 0.4s ease}
.pd.ok{border-color:var(--green);background:var(--green);box-shadow:0 0 14px rgba(31,206,109,0.5)}
@keyframes jiggle{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.numpad{display:grid;grid-template-columns:repeat(3,66px);gap:10px;position:relative;z-index:2}
.nk{
  width:66px;height:66px;border-radius:18px;
  border:2px solid rgba(0,0,0,0.1);background:rgba(0,0,0,0.04);
  color:var(--black);font-family:var(--fp);font-size:1.3rem;font-weight:800;
  cursor:pointer;transition:all 0.15s;
  display:flex;align-items:center;justify-content:center;user-select:none;
}
.nk:hover{background:var(--black);color:var(--white);border-color:var(--black);transform:scale(1.07)}
.nk:active{transform:scale(0.88)}
.nk.del{font-size:1rem;color:rgba(0,0,0,0.35)}
.nk.del:hover{color:var(--white)}
.nk.emp{visibility:hidden}

/* ═══════════════════════════════════════════
   CV PAGE (cv.html)
═══════════════════════════════════════════ */
.cv-page{background:var(--black);min-height:100vh}
.cv-topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,0.92);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:0 24px;height:58px;
  display:flex;align-items:center;justify-content:space-between;
}
.cv-back{
  display:flex;align-items:center;gap:8px;
  color:rgba(247,243,236,0.55);text-decoration:none;
  font-size:0.82rem;font-weight:600;letter-spacing:-0.2px;transition:color 0.2s;
}
.cv-back:hover{color:var(--lime)}
.cv-back i{font-size:0.75rem;transition:transform 0.2s}
.cv-back:hover i{transform:translateX(-3px)}
.cv-topbar .logo{font-weight:800;font-size:1rem;color:var(--white)}
.cvbody{max-width:600px;margin:0 auto;padding:40px 24px 100px}

/* CV sections */
.cv-hs{padding:60px 0 50px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:60px}
.cv-hs .ey{font-size:0.68rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--lime);margin-bottom:1.5rem}
.cv-hs h1{font-size:clamp(3rem,13vw,5rem);font-weight:900;letter-spacing:-3px;line-height:0.9;color:var(--white);margin-bottom:1.5rem}
.cv-hs p{font-size:0.88rem;line-height:1.85;color:rgba(247,243,236,0.48);max-width:420px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2rem}
.pill{
  display:flex;align-items:center;gap:8px;padding:7px 13px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;font-size:0.78rem;color:rgba(247,243,236,0.62);
}
.pill i{color:var(--lime)}
.csec{margin-bottom:56px}
.csh{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.csh h2{font-size:1.5rem;font-weight:800;letter-spacing:-0.5px;color:var(--white)}
.ctag{
  font-size:0.64rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(198,241,53,0.3);padding:3px 10px;border-radius:100px;
}
.sect-lbl{
  font-size:0.66rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--lime);margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.sect-lbl i{font-size:0.75rem}

/* Letter */
.lbox{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:24px}
.lbox p{font-size:0.87rem;line-height:1.9;color:rgba(247,243,236,0.52);margin-bottom:1rem}
.lbox p:last-of-type{margin-bottom:0}
.lsig{margin-top:1.5rem}
.lsig img{height:46px;filter:brightness(0) invert(1) opacity(0.4)}
.lsig strong{display:block;color:var(--white);margin-top:0.4rem;font-size:0.9rem}

/* Timeline */
.tl{display:flex;flex-direction:column;gap:12px}
.tc{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  border-radius:18px;padding:20px;transition:border-color 0.2s;
}
.tc:hover{border-color:rgba(198,241,53,0.2)}
.tc .dt{font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);margin-bottom:0.4rem}
.tc h3{font-size:1rem;font-weight:800;color:var(--white);margin-bottom:0.2rem}
.tc .co{font-size:0.78rem;color:var(--purple);margin-bottom:0.75rem}
.tc ul{list-style:none;display:flex;flex-direction:column;gap:3px}
.tc li{font-size:0.82rem;color:rgba(247,243,236,0.46);padding-left:12px;position:relative;line-height:1.5}
.tc li::before{content:'›';position:absolute;left:0;color:var(--lime)}
.tsub{font-size:0.64rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(247,243,236,0.26);margin:8px 0 3px}
.cl{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  background:rgba(198,241,53,0.1);border:1px solid rgba(198,241,53,0.25);
  border-radius:8px;font-size:0.72rem;color:var(--lime);text-decoration:none;margin-top:10px;transition:all 0.2s;
}
.cl:hover{background:rgba(198,241,53,0.2)}

/* Projects */
.pgrid{display:flex;flex-direction:column;gap:12px}
.pcard{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  border-radius:18px;overflow:hidden;transition:all 0.25s;
}
.pcard:hover{border-color:rgba(198,241,53,0.2);transform:translateY(-2px)}
.pcard img{width:100%;height:150px;object-fit:cover;display:block}
.pinfo{padding:15px}
.pinfo h4{font-size:0.92rem;font-weight:800;margin-bottom:5px}
.pinfo p{font-size:0.8rem;color:rgba(247,243,236,0.45);line-height:1.5}

/* Skills */
.skills-blk{display:flex;flex-direction:column;gap:10px}
.skbl{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.skbl:hover{transform:translateX(8px)}
.sk-g{background:rgba(31,206,109,0.1);border:1px solid rgba(31,206,109,0.2)}
.sk-b{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2)}
.sk-p{background:rgba(124,92,232,0.1);border:1px solid rgba(124,92,232,0.2)}
.sk-y{background:rgba(255,194,51,0.1);border:1px solid rgba(255,194,51,0.2)}
.sk-o{background:rgba(255,92,26,0.1);border:1px solid rgba(255,92,26,0.2)}
.sk-l{background:rgba(198,241,53,0.1);border:1px solid rgba(198,241,53,0.2)}
.skie{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.skbl h4{font-size:0.92rem;font-weight:700;color:var(--white)}
.skbl p{font-size:0.75rem;color:rgba(247,243,236,0.42);margin-top:2px}

/* Tools */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tcard{padding:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:16px;transition:all 0.2s}
.tcard:hover{border-color:rgba(198,241,53,0.22);transform:translateY(-2px)}
.tc-ai{border-color:rgba(198,241,53,0.14)!important}
.tc-ai:hover{border-color:rgba(198,241,53,0.38)!important}
.tico{width:32px;height:32px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.tico img{width:100%;height:100%;object-fit:contain}
.tcard h5{font-size:0.82rem;font-weight:700;color:var(--white);margin-bottom:2px}
.tcard p{font-size:0.7rem;color:rgba(247,243,236,0.36)}

/* Languages */
.lgrid{display:flex;flex-direction:column;gap:10px}
.lrow{
  display:flex;align-items:center;gap:13px;padding:13px 15px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:15px;
}
.lflag{font-size:1.5rem}
.ln h5{font-weight:700;font-size:0.87rem}
.ln p{font-size:0.7rem;color:rgba(247,243,236,0.36)}
.lbadge{margin-left:auto;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.lb-n{background:rgba(198,241,53,0.13);color:var(--lime);border:1px solid rgba(198,241,53,0.3)}
.lb-b{background:rgba(124,92,232,0.13);color:var(--purple);border:1px solid rgba(124,92,232,0.3)}
.lb-p{background:rgba(255,194,51,0.13);color:var(--yellow);border:1px solid rgba(255,194,51,0.3)}
.lb-s{background:rgba(255,255,255,0.05);color:rgba(247,243,236,0.35);border:1px solid rgba(255,255,255,0.1)}

/* PDF + Contact */
.pdfbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:17px;
  border-radius:17px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:var(--white);text-decoration:none;font-weight:700;font-size:0.9rem;
  transition:all 0.2s;margin-bottom:14px;
}
.pdfbtn:hover{background:rgba(198,241,53,0.1);border-color:var(--lime);color:var(--lime)}
.ctbig{background:var(--lime);border-radius:22px;padding:34px 24px;text-align:center;margin-bottom:18px}
.ctbig h2{font-size:1.7rem;font-weight:900;letter-spacing:-1px;color:var(--black);margin-bottom:0.4rem}
.ctbig p{font-size:0.86rem;color:rgba(0,0,0,0.55);margin-bottom:1.5rem}
.cbtns{display:flex;flex-direction:column;gap:9px}
.cbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;
  border-radius:13px;font-weight:700;font-size:0.9rem;text-decoration:none;transition:all 0.2s;
  cursor:pointer;border:none;font-family:var(--fp);
}
.cbtn-bk{background:var(--black);color:var(--white)}
.cbtn-bk:hover{background:#222;transform:scale(1.01)}
.cbtn-wh{background:var(--white);color:var(--black)}
.cbtn-wh:hover{background:#e8e3db;transform:scale(1.01)}
.cvft{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;border-top:1px solid rgba(255,255,255,0.07);
  font-size:0.74rem;color:rgba(247,243,236,0.26);
}
.cvft a{color:rgba(247,243,236,0.35);text-decoration:none;margin-left:12px;transition:color 0.2s}
.cvft a:hover{color:var(--lime)}

/* ═══════════════════════════════════════════
   S5.5 – RÉALISATIONS WEB (new section)
═══════════════════════════════════════════ */
#webprojects{
  background:linear-gradient(180deg,#0f1c34 0%,#132445 100%);
  padding:90px 24px 100px;
  position:relative;overflow:hidden;
}
/* Dark teal/purple gradient accent shapes */
.wp-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wp-bg::before{
  content:'';position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,0.2),transparent 70%);
  top:-100px;right:-100px;
  animation:wpblob 8s ease-in-out infinite;
}
.wp-bg::after{
  content:'';position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,0.16),transparent 70%);
  bottom:-80px;left:-80px;
  animation:wpblob 10s ease-in-out infinite 3s;
}
@keyframes wpblob{
  0%,100%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.15) translate(20px,-20px)}
}
.wp-header{text-align:center;margin-bottom:3.5rem;position:relative;z-index:2}
.wp-eyebrow{
  font-size:0.7rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;
  color:#67e8f9;margin-bottom:1rem;display:block;
}
.wp-title{
  font-size:clamp(2rem,9vw,4rem);font-weight:900;
  letter-spacing:-2.5px;line-height:0.95;color:var(--white);
}
.wp-title em{font-style:normal;color:#67e8f9}

/* Carousel */
.wp-track{
  display:flex;gap:24px;overflow-x:auto;padding-bottom:12px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  cursor:grab;-webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  position:relative;z-index:2;
}
.wp-track:active{cursor:grabbing}
.wp-track::-webkit-scrollbar{display:none}
.wp-track.wp-track-static{
  justify-content:center;
  overflow:visible;
  cursor:default;
  flex-wrap:wrap;
  gap:28px;
}
.wp-track.wp-track-static .wpcard{
  width:min(600px,94vw);
}

.wpcard{
  flex-shrink:0;width:min(560px,92vw);
  border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.08);
  scroll-snap-align:start;
  transition:all 0.35s cubic-bezier(.34,1.56,.64,1);
}
.wpcard:hover{
  border-color:rgba(0,212,200,0.3);
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,212,200,0.12);
}
.wpcard-preview{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  position:relative;overflow:hidden;
  background:#0a1628;
}
.wp-frame-shell{
  position:absolute;inset:32px 0 0 0;
  overflow:hidden;background:#fff;
}
.wp-site-shot{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  background:#fff;
}
.wp-preview-link{
  position:absolute;right:10px;bottom:10px;z-index:3;
  font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,0.72);
  border:1px solid rgba(255,255,255,0.25);border-radius:999px;
  text-decoration:none;padding:5px 9px;
}
.wp-preview-link:hover{background:rgba(10,10,10,0.9)}
.wpcard-preview img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  object-position:top center;
}
/* Browser chrome mockup overlay */
.wpcard-chrome{
  position:absolute;top:0;left:0;right:0;height:32px;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(4px);
  display:flex;align-items:center;padding:0 12px;gap:6px;z-index:2;
}
.wpc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wpc-d1{background:#ff5f57}.wpc-d2{background:#febc2e}.wpc-d3{background:#28c840}
.wpc-url{
  flex:1;margin:0 8px;height:16px;background:rgba(255,255,255,0.08);
  border-radius:4px;display:flex;align-items:center;padding:0 8px;
  font-size:0.58rem;color:rgba(255,255,255,0.4);overflow:hidden;white-space:nowrap;
  font-family:monospace;
}
.wpcard-body{padding:22px}
.wp-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.61rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--teal);background:rgba(0,212,200,0.1);
  border:1px solid rgba(0,212,200,0.22);border-radius:100px;
  padding:3px 10px;margin-bottom:10px;
}
.wpcard-body h4{
  font-size:1.05rem;font-weight:800;color:var(--white);
  margin-bottom:8px;letter-spacing:-0.3px;
}
.wpcard-body p{
  font-size:0.8rem;color:rgba(247,243,236,0.42);
  line-height:1.65;margin-bottom:14px;
}
.wp-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.76rem;font-weight:700;color:var(--teal);
  text-decoration:none;transition:gap 0.2s;
}
.wp-link:hover{gap:12px}
.wp-link i{font-size:0.65rem}

/* Navigation (flèches + dots) */
.wp-nav{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin-top:24px;position:relative;z-index:2;
}
.wp-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(255,255,255,0.07);color:rgba(247,243,236,0.6);
  cursor:pointer;transition:background 0.2s,color 0.2s,transform 0.2s;
  flex-shrink:0;
}
.wp-arrow:hover{background:rgba(0,212,200,0.15);color:var(--teal);transform:scale(1.1)}
.wp-arrow:active{transform:scale(0.95)}

/* Dots */
.wp-dots{display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.wpdot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.15);border:none;padding:0;
  cursor:pointer;transition:all 0.3s;
}
.wpdot.on{background:var(--teal);width:22px;border-radius:4px}

/* ═══════════════════════════════════════════
   MOBILE DOCK + MEGA MENU
═══════════════════════════════════════════ */
.mobile-dock,.mobile-mega-menu{display:none}
@media(max-width:860px){
  .mobile-dock{
    position:fixed;
    right:12px;
    left:auto;
    bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:13100;
    display:flex;
    align-items:center;
    gap:0;
  }
  .dock-menu-btn{
    width:56px;height:56px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.24);
    background:rgba(10,16,28,0.94);
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    cursor:pointer;
    box-shadow:0 12px 24px rgba(0,0,0,0.32);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .dock-menu-btn span{
    width:22px;height:2px;border-radius:99px;background:#f8faff;
    display:block;transform-origin:center;
    transition:transform 0.22s ease,opacity 0.22s ease;
  }
  .dock-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .dock-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .dock-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.menu-open .dock-menu-btn{
    border-color:rgba(198,241,53,0.55);
    box-shadow:0 0 0 2px rgba(198,241,53,0.2),0 12px 24px rgba(0,0,0,0.36);
  }
  .dock-cta{
    display:none;
  }
  .dock-cta i{font-size:0.86rem}

  .mobile-mega-menu{
    position:fixed;inset:0;z-index:13000;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity 0.25s ease,visibility 0.25s ease;
    display:block;
  }
  .mobile-mega-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .mega-backdrop{
    position:absolute;inset:0;
    background:rgba(5,10,18,0.72);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  }
  .mega-panel{
    position:relative;min-height:100%;
    padding:20px 20px calc(22px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 84% -10%,rgba(198,241,53,0.2),transparent 38%),
      radial-gradient(circle at 8% 100%,rgba(0,212,200,0.18),transparent 34%),
      linear-gradient(170deg,#0b1424 0%,#121f37 100%);
    transform:translateY(20px);
    transition:transform 0.35s cubic-bezier(.22,.68,0,1.15);
    overflow-y:auto;
  }
  .mobile-mega-menu.is-open .mega-panel{transform:translateY(0)}
  .mega-lang{
    display:flex;
    align-items:center;
    gap:8px;
    margin:2px 0 14px;
  }
  .mega-lang-btn{
    min-width:52px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.06);
    color:#f8faff;
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .mega-lang-btn.is-active{
    border-color:rgba(198,241,53,0.8);
    background:rgba(198,241,53,0.18);
    color:#f6ffe0;
  }
  .mega-link{
    display:flex;align-items:center;gap:12px;
    text-decoration:none;color:#f8faff;
    padding:12px 4px;border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .mega-num{
    font-size:0.64rem;font-weight:700;letter-spacing:0.16em;
    color:rgba(198,241,53,0.8);min-width:32px;
  }
  .mega-label{
    font-size:1.12rem;font-weight:800;letter-spacing:-0.01em;
  }
  .mega-legal-links{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-top:20px;
  }
  .mega-legal-links a{
    text-decoration:none;
    font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    color:rgba(248,250,255,0.86);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;padding:8px 12px;
    background:rgba(255,255,255,0.05);
  }
  body.menu-open{overflow:hidden}
}

/* Footer */
.site-footer{
  background:#eef4ff;color:#10223f;
  border-top:1px solid rgba(16,34,63,0.15);
  padding:18px 24px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.site-footer p{
  font-size:0.82rem;font-weight:600;color:rgba(16,34,63,0.85);
}
.site-footer-links{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.site-footer-links a{
  color:#1d4ed8;text-decoration:none;font-size:0.78rem;font-weight:700;
}
.site-footer-links a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.rev{opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease}
.rev.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.08s!important}.d2{transition-delay:0.16s!important}
.d3{transition-delay:0.24s!important}.d4{transition-delay:0.32s!important}
.d5{transition-delay:0.40s!important}.d6{transition-delay:0.48s!important}

/* ═══════════════════════════════════════════
   MOBILE PERFORMANCE / REDUCED MOTION
═══════════════════════════════════════════ */
@media (hover:none), (pointer:coarse){
  .cursor,.cursor-ring{display:none!important}
  .blob{
    filter:blur(72px)!important;
    opacity:0.22!important;
    animation:blobmove 6.3s ease-in-out infinite!important;
  }
  .hcard{
    opacity:0;
    animation:dropIn 0.78s cubic-bezier(.22,.68,0,1.2) forwards!important;
  }
  .hcard:nth-child(1){animation-delay:0.04s}
  .hcard:nth-child(2){animation-delay:0.20s}
  .hcard:nth-child(3){animation-delay:0.36s}
  .hcard:nth-child(4){animation-delay:0.52s}
  .float-badge,
  .scroll-ind-line,
  .ac-shape,
  .wp-bg::before,
  .wp-bg::after{animation:none!important}
  .hcard,
  .chip,
  .tag,
  .scard,
  .skbl,
  .tcard,
  .wpcard{transition:none!important}
  .rev{opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
  .rev{opacity:1!important;transform:none!important}
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:500px){
  .numpad{grid-template-columns:repeat(3,58px)}.nk{width:58px;height:58px;font-size:1.1rem}
  .tgrid{grid-template-columns:1fr}
  #columns{height:75svh}
  .c1{transform:translateY(-3%)}.c2{transform:translateY(4%)}.c3{transform:translateY(-6%)}
  .c4{transform:translateY(2%)}.c5{transform:translateY(-4%)}
  .site-footer{padding-left:18px;padding-right:18px}
}

@media(max-width:980px){
  .identity-layout{
    grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);
    gap:28px;
  }
  .identity-photo-wrap{
    width:min(136%,504px);
  }
}

@media(max-width:780px){
  .identity-layout{
    grid-template-columns:1fr;
    align-items:start;
    gap:18px;
  }
  .identity-copy{
    order:1;
  }
  .identity-copy .idesc{
    max-width:100%;
  }
  .identity-photo-wrap{
    order:2;
    justify-self:center;
    align-self:end;
    width:min(95vw,476px);
  }
}