:root{
  --font-display:'Unbounded',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-hand:'Gochi Hand',cursive;
  --dark:#1a1432;
  --dark-2:#241b44;
  --pink:#f6cfe0;
  --pink-deep:#efb6cf;
  --ink:#1a1420;
  --cream:#f7f0f8;
  --hot:#ff4f9e;
  --hot-deep:#e63d8c;
  --lav:#d9ccfb;
  --peach:#ffd9ad;
  --mint:#cdeede;
  --line-dark:rgba(247,240,248,0.14);
  --line-light:rgba(26,20,32,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--dark);color:var(--cream);overflow-x:hidden;position:relative;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.03em;text-wrap:balance;}
p,li{text-wrap:pretty;}
img{display:block;max-width:100%;}
section{position:relative;}
a{color:inherit;}
::selection{background:var(--hot);color:#fff;}

/* grain photo */
body::before{
  content:'';position:fixed;inset:0;z-index:300;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* ===== MENU ===== */
.pill{
  position:fixed;top:16px;left:50%;z-index:200;
  width:min(760px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 9px 9px 26px;border-radius:999px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transform:translate(-50%,-140%);opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.25,1), opacity .5s ease, background .5s ease, border-color .5s ease;
}
.pill.show{transform:translate(-50%,0);opacity:1;}
.pill[data-theme="pink"]{background:rgba(150,100,175,0.5);border-color:rgba(255,255,255,0.35);}
.nav-logo{font-family:var(--font-display);font-weight:800;font-size:17px;color:#fff;text-decoration:none;letter-spacing:-0.03em;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{color:#fff;opacity:.88;text-decoration:none;font-size:14px;font-weight:600;position:relative;transition:opacity .2s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:currentColor;transition:width .25s ease;}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after{width:100%;}
.nav-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cream);color:var(--ink);text-decoration:none;
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,79,158,0.7);}
.nav-btn .dot{width:7px;height:7px;border-radius:50%;background:#31c48d;animation:dotPulse 1.8s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===== HERO ===== */
.hero{
  min-height:max(100vh,720px);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(255,79,158,0.18), transparent 60%),
    #1a1432;
}
.bg-word{
  position:absolute;z-index:1;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,8.2vw,116px);letter-spacing:-0.04em;line-height:1;
  white-space:nowrap;user-select:none;pointer-events:none;
  color: rgba(246,239,248,0.07);
  opacity:0;
}
.bg-word.bg-word-1{top:25%;left:-1%;animation:wordL 1.2s cubic-bezier(.2,.8,.25,1) .5s forwards;}
.bg-word.bg-word-2{top:34%;right:3%;color: rgba(255,79,158,0.14);animation:wordR 1.2s cubic-bezier(.2,.8,.25,1) .65s forwards;}
.bg-word.bg-word-3{top:66%;left:2%;color: rgba(255,79,158,0.14);animation:wordL 1.2s cubic-bezier(.2,.8,.25,1) .8s forwards;}
.bg-word.bg-word-4{top:75%;right:2%;animation:wordR 1.2s cubic-bezier(.2,.8,.25,1) .95s forwards;}
@keyframes wordL{from{opacity:0;transform:translateX(-80px);}to{opacity:1;transform:none;}}
@keyframes wordR{from{opacity:0;transform:translateX(80px);}to{opacity:1;transform:none;}}

/* --- attache + badge --- */
.rig{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  margin-top:-6px;
  transform-origin:50% 0;
  animation:rigDrop 1.9s cubic-bezier(.2,.8,.25,1) .1s both, sway 7s ease-in-out 2s infinite;
}
@keyframes rigDrop{
  0%{transform:translateY(-105%) rotate(0deg);}
  50%{transform:translateY(1.5%) rotate(5deg);}
  66%{transform:translateY(0) rotate(-3.6deg);}
  82%{transform:rotate(1.8deg);}
  100%{transform:rotate(0deg);}
}
@keyframes sway{0%,100%{transform:rotate(-1.1deg);}50%{transform:rotate(1.1deg);}}

.strap{
  width:32px;height:clamp(150px,34vh,330px);
  background:
    linear-gradient(90deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.55) 22%,rgba(255,255,255,0.05) 48%,rgba(255,255,255,0.4) 78%,rgba(255,255,255,0) 100%),
    repeating-linear-gradient(60deg,rgba(255,255,255,0.0) 0 3px,rgba(160,110,170,0.12) 3px 4px),
    linear-gradient(180deg,#f3d9ea,#efc9e0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25),0 0 22px rgba(0,0,0,0.25);
  border-radius:0 0 2px 2px;
}
.clasp{
  position:relative;width:44px;height:26px;margin-top:-2px;
  border-radius:5px 5px 9px 9px;
  background:linear-gradient(180deg,#f6f6fa 0%,#b0aebd 52%,#eceaf3 100%);
  border:1px solid rgba(0,0,0,0.28);
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  z-index:4;
}
.clasp::before{content:'';position:absolute;left:50%;top:5px;width:20px;height:3px;border-radius:2px;background:rgba(0,0,0,0.25);transform:translateX(-50%);}
.ring{
  position:absolute;left:50%;top:15px;width:20px;height:28px;transform:translateX(-50%);
  border:3px solid #cfcdd9;border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.4),inset 0 0 2px rgba(255,255,255,0.7);
}
.badge-scene{perspective:1300px;margin-top:2px;z-index:3;}
.badge3d{
  --bw:clamp(210px,min(21vw,31vh),285px);
  position:relative;width:var(--bw);aspect-ratio:0.64;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.3,.7,.2,1);
  cursor:pointer;outline:none;
}
.badge3d.flipped{transform:rotateY(180deg);}
.badge3d:focus-visible{box-shadow:0 0 0 3px var(--hot);border-radius:24px;}

.face{
  position:absolute;inset:0;border-radius:22px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(155deg,rgba(176,150,238,0.55),rgba(104,80,172,0.55));
  border:1.5px solid rgba(255,255,255,0.4);
  box-shadow:0 36px 70px -26px rgba(0,0,0,0.75),inset 0 0 0 1px rgba(255,255,255,0.1);
  overflow:hidden;
}
.face.back{transform:rotateY(180deg);}
.face::after{ /* reflet vitré */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,0.26) 46%,rgba(255,255,255,0.05) 54%,transparent 66%);
  z-index:5;
}
.slot{
  position:absolute;top:11px;left:50%;width:44px;height:12px;transform:translateX(-50%);
  border-radius:8px;border:2px solid rgba(255,255,255,0.6);background:rgba(18,12,40,0.55);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);z-index:2;
}
.inner{
  position:absolute;left:9px;right:9px;bottom:9px;top:34px;
  border-radius:14px;background:#fbf5fb;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
}

/* face avant */
.f-photo{
  flex:0 0 57%;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 70% 20%,#ffb6d6,#f58fbe 55%,#e86aa6);
}
.f-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.f-info{flex:1;padding:10px 12px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.f-name{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.9vw,23px);color:var(--ink);letter-spacing:-0.04em;line-height:1;}
.f-role{font-size:10px;color:#6f6578;margin-top:6px;line-height:1.35;font-weight:600;}
.f-sign{font-family:var(--font-hand);font-size:21.25px;color:#3b2e57;transform:rotate(-6deg);line-height:1;margin-top:2px;}
.f-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:0 12px 11px;gap:6px;}
.f-pill{display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.02em;color:#1d6f50;background:#d8f3e6;padding:4px 8px;border-radius:999px;}
.f-pill i{width:5px;height:5px;border-radius:50%;background:#25b27a;}

/* face arrière */
.face.back .inner{padding:16px 16px 12px;}
.face.back h4{color:var(--ink);font-size:13px;font-weight:700;margin-bottom:8px;}
.b-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line-light);}
.b-row b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:-0.02em;}
.b-row span{color:#7a7185;font-size:10px;line-height:1.35;display:block;margin-top:2px;}
.b-sign{font-family:var(--font-hand);font-size:17px;color:#3b2e57;margin-top:auto;line-height:1.1;}
.b-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-light);}
.b-foot>span{font-size:9px;color:#8a8092;font-weight:700;letter-spacing:.03em;}

.chip{width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;}
.chip svg{width:16px;height:16px;}
.chip-rose{background:#fbd0e0;} .chip-lavande{background:var(--lav);} .chip-peche{background:var(--peach);} .chip-menthe{background:var(--mint);}

.barcode{display:flex;gap:2px;align-items:flex-end;height:16px;flex:none;}
.barcode i{display:block;background:#15111f;}

/* phrase tapée + défiler */
.typer{
  position:absolute;left:clamp(18px,4vw,56px);bottom:34px;z-index:4;
  font-size:13px;font-weight:500;color:rgba(247,240,248,0.85);letter-spacing:.01em;
  min-height:18px;
}
.caret{display:inline-block;width:1.5px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.scroll-hint{
  position:absolute;right:clamp(18px,4vw,56px);bottom:30px;z-index:4;
  display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.06em;color:rgba(247,240,248,0.6);
}
.scroll-hint i{width:1px;height:26px;background:linear-gradient(var(--hot),transparent);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
.typer,.scroll-hint{transition:opacity .35s ease,visibility 0s;}
.hero.is-away .typer,.hero.is-away .scroll-hint{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;}

/* ===== BIO ===== */
.bio{
  background:
    radial-gradient(ellipse 760px 460px at 88% 6%, rgba(255,255,255,0.45), transparent 60%),
    linear-gradient(180deg,#f7d2e3,#f3c4db);
  color:var(--ink);padding:150px 0 130px;overflow:hidden;
}
.bio::before{ /* transition floue sombre → rose */
  content:'';position:absolute;left:0;right:0;top:0;height:230px;pointer-events:none;
  background:linear-gradient(180deg,#1a1434 0%,rgba(26,20,52,0.75) 28%,rgba(26,20,52,0) 100%);
  filter:blur(6px);
}
.bio-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;position:relative;}
.bio-visual{position:relative;}
.bio-photo{
  aspect-ratio:4/5;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,#fff,var(--pink-deep));
  box-shadow:0 40px 70px -34px rgba(26,20,32,0.4);
}
.bio-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.bio-sign{
  position:absolute;top:-22px;right:-10px;z-index:2;
  font-family:var(--font-hand);font-weight:400;font-size:clamp(22px,2.55vw,32.3px);color:#e0245e;
  transform:rotate(-6deg);text-shadow:0 2px 14px rgba(255,255,255,0.7);
}
@media (max-width:360px){.bio-sign{right:6px;}} /* très petits écrans : « salut, moi c’est Amélie » reste entièrement visible */
.bio-device{
  position:absolute;right:-9%;bottom:-7%;width:64%;aspect-ratio:4/3;z-index:3;
  border:6px solid #17121f;border-radius:18px;overflow:hidden;background:#17121f;
  box-shadow:0 30px 50px -18px rgba(26,20,32,0.55);
  transform:rotate(4deg);animation:float 7s ease-in-out infinite;
}
.bio-device img{width:100%;height:100%;object-fit:cover;object-position:20% top;}
/* Repli si une capture de projet est absente : dégradé + nom du projet */
.proj-img::before,.bio-device::before{
  content:attr(data-name);position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;
  background:linear-gradient(135deg,#0d0a14,#1d1530 60%,#2e1d4a);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:clamp(16px,2.4vw,28px);letter-spacing:-0.03em;
}
.proj-img img,.bio-device img{position:relative;}
@keyframes float{0%,100%{transform:rotate(4deg) translateY(0);}50%{transform:rotate(3deg) translateY(-10px);}}

.bio-text h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;font-weight:800;margin-bottom:26px;}
.bio-text p{font-size:15.5px;line-height:1.7;color:#5d5266;max-width:470px;}
.type-wrap{position:relative;text-wrap:wrap;} /* pas de balance ici : le texte tapé lettre par lettre changerait de retours à la ligne en cours de frappe */
.type-wrap .ghost{visibility:hidden;display:block;}
.type-wrap .live{position:absolute;left:0;top:0;right:0;display:block;}
.type-wrap .live.typing::after{content:'';display:inline-block;width=3px;height=.9em;background:currentColor;margin-left:4px;vertical-align:-0.08em;animation:blink 1s steps(1) infinite;}

/* ===== CE QUE JE FAIS ===== */
.whatido{background:linear-gradient(180deg,#1a1434,#150f2c);padding:120px 0;}
.section-tag{color:var(--hot);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:46px;display:block;}
.do-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:30px 0;border-top:1px solid var(--line-dark);border-radius:14px;
  transition:padding-left .3s ease, background .3s ease;
}
.do-row:last-child{border-bottom:1px solid var(--line-dark);}
.do-row:hover{padding-left:14px;background:rgba(255,255,255,0.03);}
.do-left{display:flex;align-items:center;gap:22px;}
.do-left .chip{width:46px;height:46px;border-radius:13px;}
.do-left .chip svg{width:21px;height:21px;}
.do-left h3{font-size:clamp(28px,4.2vw,50px);font-weight:700;color:var(--cream);transition:color .25s ease;}
.do-row:hover h3{color:var(--hot);}
.do-row p{color:rgba(247,240,248,0.55);font-size:14.5px;max-width:300px;text-align:right;line-height:1.5;}
.soon{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--hot);color:#fff;padding:5px 11px;border-radius:999px;vertical-align:middle;margin-left:10px;}

/* ===== OFFRES ===== */
.offres{background:linear-gradient(180deg,#150f2c,#1a1434);padding:120px 0 110px;border-top:1px solid var(--line-dark);}
.offres-head{text-align:center;margin-bottom:60px;}
.offres-head h2{font-size:clamp(38px,6vw,76px);font-weight:800;letter-spacing:-0.05em;line-height:1;color:var(--cream);}
.offres-head p{margin:16px auto 0;font-size:15px;color:rgba(247,240,248,0.66);max-width:560px;line-height:1.55;}
.offres-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.offre{
  position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.12);color:var(--cream);
}
.offre h3{font-size:clamp(21px,2vw,26px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;}
.offre-sum{margin-top:10px;font-size:14.5px;line-height:1.55;color:rgba(247,240,248,0.72);}
.offre ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px;}
.offre li{position:relative;padding-left:22px;font-size:14px;line-height:1.45;color:rgba(247,240,248,0.9);}
.offre li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--hot);}
.offre-price{
  margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,0.14);
  font-family:var(--font-display);font-weight:800;font-size:clamp(19px,1.8vw,23px);letter-spacing:-0.04em;color:var(--hot);
}
.offre--star{background:linear-gradient(160deg,#f6cfe0,#efb6cf);border-color:rgba(255,255,255,0.5);color:var(--ink);}
.offre--star .offre-sum{color:#5d5266;}
.offre--star li{color:var(--ink);}
.offre--star li::before{background:var(--hot-deep);}
.offre--star .offre-price{border-top-color:rgba(26,20,32,0.16);color:var(--ink);}
.offre-tag{
  align-self:flex-start;margin-bottom:14px;padding:6px 12px;border-radius:999px;
  background:var(--ink);color:var(--cream);font-size:11px;font-weight:700;letter-spacing:.03em;
}
.offres-cta{margin-top:48px;text-align:center;}
.offres-group{margin:56px 0 22px;font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-0.03em;color:var(--cream);}
.offres-head + .offres-group{margin-top:0;}
.offres-grid--two{grid-template-columns:repeat(2,1fr);}
.offre-next{margin-top:6px;font-size:13px;line-height:1.45;color:rgba(247,240,248,0.66);}
.offre--star .offre-next{color:#5d5266;}
.offres-note{margin:36px auto 0;max-width:720px;text-align:center;font-size:14px;line-height:1.6;color:rgba(247,240,248,0.66);}
.btn-light{
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;background:var(--cream);color:var(--ink);
  text-decoration:none;font-weight:700;font-size:15px;
  transition:transform .25s cubic-bezier(.2,.8,.25,1),box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn-light:hover{transform:translateY(-3px);background:var(--hot);color:#fff;box-shadow:0 16px 30px -14px rgba(255,79,158,0.6);}
.btn-light i{font-style:normal;font-size:13px;}
/* Sections activables depuis script.js (SHOW_OFFERS, SHOW_STATS) */
.offres[hidden],.cta-band[hidden],.nav-links a[hidden]{display:none !important;}

/* ===== BANDEAU CONTACT ===== */
.cta-band{background:linear-gradient(180deg,#150f2c,#1a1434);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:54px 0;}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;}
.cta-band-text{max-width:560px;}
.cta-band h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--cream);}
.cta-band p{margin-top:12px;font-size:15px;line-height:1.6;color:rgba(247,240,248,0.72);}
.cta-band-btns{display:flex;flex-wrap:wrap;gap:12px;}
@media (min-width:900px){.cta-band-in{flex-wrap:nowrap;}.cta-band-btns{flex-direction:column;align-items:stretch;flex:none;}.cta-band-btns a{justify-content:space-between;}}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;padding:14.5px 26px;border-radius:999px;border:1.5px solid rgba(247,240,248,0.45);color:var(--cream);
  text-decoration:none;font-weight:700;font-size:15px;
  transition:transform .25s cubic-bezier(.2,.8,.25,1),background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-ghost:hover{transform:translateY(-3px);background:var(--cream);color:var(--ink);border-color:var(--cream);}
.btn-ghost i{font-style:normal;font-size:13px;}
@media (max-width:980px){.offres-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.offres{padding:90px 0 80px;}.offres-grid,.offres-grid--two{grid-template-columns:1fr;}.offres-head{margin-bottom:40px;}}

/* ===== CHIFFRES ===== */
.stats{background:linear-gradient(180deg,#f4c6dc,#f6cfe0);color:var(--ink);padding:100px 0 90px;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,6.2vw,88px);letter-spacing:-0.05em;line-height:1;}
.stat > span{display:block;margin-top:10px;font-size:13.5px;color:#6a5e72;max-width:220px;line-height:1.4;}
.stat b span{display:inline;margin:0;font-size:inherit;color:inherit;max-width:none;line-height:inherit;}

/* ===== COMMENT JE TRAVAILLE (même fond que la bande des chiffres) ===== */
.stats[hidden],.how[hidden]{display:none !important;}
.how{background:linear-gradient(180deg,#f4c6dc,#f6cfe0);color:var(--ink);padding:100px 0 90px;}
.how-title{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-0.05em;line-height:1;margin-bottom:48px;}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step{padding:28px 24px 26px;border-radius:22px;background:rgba(255,255,255,0.5);border:1px solid rgba(26,20,32,0.08);}
.step-n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.4vw,46px);letter-spacing:-0.05em;line-height:1;color:var(--hot-deep);margin-bottom:22px;}
.step h3{font-size:clamp(19px,1.7vw,22px);font-weight:800;letter-spacing:-0.04em;line-height:1.15;margin-bottom:10px;}
.step p{font-size:14.5px;line-height:1.6;color:#5d5266;}
.how-grid .step:nth-child(2){transition-delay:.08s;}
.how-grid .step:nth-child(3){transition-delay:.16s;}
.how-grid .step:nth-child(4){transition-delay:.24s;}
@media (max-width:980px){.how-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.how{padding:80px 0 70px;}.how-grid{grid-template-columns:1fr;}.how-title{margin-bottom:34px;}}
@media (prefers-reduced-motion:reduce){.how-grid .step{transition-delay:0s !important;}}

/* ===== BANDE ===== */
.marquee{background:#17112e;padding:20px 0;overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-flex;animation:mscroll 32s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.02em;color:#fff;display:inline-flex;align-items:center;}
.marquee-track span::after{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#fff;margin:0 40px;opacity:.9;}
@keyframes mscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== PROJETS ===== */
.work{background:linear-gradient(180deg,#f6cfe0,#f3c4db);color:var(--ink);padding:120px 0 100px;overflow:hidden;}
.work-head{text-align:center;padding:0 24px;margin-bottom:30px;}
.work-head h2{font-size:clamp(38px,6vw,76px);font-weight:800;letter-spacing:-0.05em;line-height:1;}
.work-head p{margin:16px auto 0;font-size:15px;color:#6a5e72;max-width:460px;line-height:1.55;}
.work-track{
  display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:40px max(24px,calc((100vw - 1180px)/2 + 32px)) 64px;
  scrollbar-width:none;cursor:grab;
}
.work-track::-webkit-scrollbar{display:none;}
.work-track.dragging,.work-track.auto-scroll{scroll-snap-type:none;}
.work-track.dragging{cursor:grabbing;}
.proj{position:relative;isolation:isolate;flex:0 0 clamp(290px,42vw,560px);scroll-snap-align:center;text-decoration:none;color:inherit;display:block;user-select:none;}
.proj-img{
  position:relative;aspect-ratio:16/10.5;border-radius:20px;overflow:hidden;background:#17121f;
  box-shadow:0 30px 60px -28px rgba(26,20,32,0.5);
}
.proj-img img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.proj-badge{
  position:absolute;bottom:14px;left:14px;z-index:2;padding:5px 11px;border-radius:999px;
  font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.2;
  color:#fff;background:rgba(23,18,31,0.62);border:1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* Ombre renforcée : calque dédié dont seule l'opacité s'anime */
.proj::after{
  content:'';position:absolute;top:0;left:0;right:0;aspect-ratio:16/10.5;z-index:-1;border-radius:20px;
  box-shadow:0 30px 50px -18px rgba(26,20,32,0.7);opacity:0;pointer-events:none;
}
/* Projets en cours : carte non cliquable, image floutée + libellé centré */
.proj--soon{cursor:default;}
.proj--soon .proj-img img{filter:blur(10px);transform:scale(1.08);}
.proj--soon .proj-img::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(14,10,24,0.38);}
.proj-soon-label{
  position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);white-space:nowrap;
  padding:10px 20px;border-radius:999px;background:rgba(247,240,248,0.94);color:var(--ink);
  font-family:var(--font-body);font-size:13.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.5);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .proj{transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .65s ease;}
  .proj::after{transition:opacity .65s ease;}
  .work-track.has-focus .proj{transform:scale(.94);opacity:.6;}
  .work-track.has-focus .proj.is-active{transform:scale(1.1);opacity:1;}
  .work-track.has-focus .proj.is-active::after{opacity:1;}
}
.proj-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;padding:16px 4px 0;}
.proj-meta b{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.03em;}
.proj-meta span{font-size:12.5px;color:#7a6d82;}
.work-nav{display:flex;justify-content:center;gap:12px;margin-top:-18px;}
.work-nav button{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-size:18px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.work-nav button:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}

/* ===== PANNEAU DÉTAILS PROJET ===== */
.pj{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;}
.pj [hidden],.pj[hidden]{display:none !important;}
.pj-backdrop{position:absolute;inset:0;background:rgba(14,10,24,0.66);opacity:0;transition:opacity .35s ease;}
.pj-panel{
  position:relative;width:min(820px,100%);max-height:min(90vh,100%);overflow-y:auto;overscroll-behavior:contain;
  background:var(--cream);color:var(--ink);border-radius:26px;outline:none;
  box-shadow:0 50px 100px -30px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.pj.is-open .pj-backdrop{opacity:1;}
.pj.is-open .pj-panel{opacity:1;transform:none;}
.pj-close{
  position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;color:#fff;
  background:rgba(23,18,31,0.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pj-close:hover{background:var(--ink);}
.pj-close:focus-visible,.pj-cta:focus-visible{outline:3px solid var(--hot);outline-offset:3px;}
.pj-media{aspect-ratio:16/9;background:linear-gradient(135deg,#0d0a14,#1d1530 60%,#2e1d4a);}
.pj-media img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.pj-body{padding:30px clamp(22px,4vw,44px) 38px;}
.pj-status{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(26,20,32,0.08);border:1px solid var(--line-light);
}
.pj-body h3{font-size:clamp(28px,4.4vw,46px);font-weight:800;letter-spacing:-0.045em;line-height:1.05;margin:14px 0 18px;}
.pj-facts{display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:6px;}
.pj-facts div{min-width:0;}
.pj-facts dt,.pj-block h4{font-family:var(--font-body);font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a7d94;margin-bottom:6px;}
.pj-facts dd{font-size:15px;line-height:1.5;}
.pj-block{margin-top:26px;}
.pj-block p{font-size:15.5px;line-height:1.7;color:#4d4256;}
.pj-block ul{list-style:none;}
.pj-block li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:#4d4256;margin-bottom:8px;}
.pj-block li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--hot);}
.pj-block .pj-tools{display:flex;flex-wrap:wrap;gap:8px;}
.pj-block .pj-tools li{padding:6px 13px;margin:0;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--pink);}
.pj-block .pj-tools li::before{display:none;}
.pj-toolgroup + .pj-toolgroup{margin-top:16px;}
.pj-toolgroup h5{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.pj-cta{
  display:inline-block;margin-top:32px;padding:14px 26px;border-radius:999px;background:var(--ink);color:var(--cream);
  font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .2s ease,background .2s ease;
}
.pj-cta:hover{background:var(--hot-deep);transform:translateY(-2px);}
@media (max-width:700px){
  .pj{padding:0;align-items:stretch;}
  .pj-panel{width:100%;max-height:none;height:100%;border-radius:0;transform:translateY(100%);opacity:1;
    transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .pj.is-open .pj-panel{transform:none;}
  .pj-media{aspect-ratio:16/10;}
}
@media (prefers-reduced-motion:reduce){
  .pj-backdrop,.pj-panel,.pj-cta{transition:none;}
  .pj-panel{transform:none;}
}

/* ===== À PROPOS ===== */
.about{background:linear-gradient(180deg,#1a1434,#150f2c);padding:130px 0;}
.about-title{font-size:clamp(32px,4.6vw,60px);font-weight:800;letter-spacing:-0.05em;line-height:1;margin-bottom:56px;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;}
.why-card{display:flex;flex-direction:column;padding:30px 26px 28px;border-radius:22px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);}
.why-card h3{font-size:clamp(20px,1.9vw,24px);font-weight:800;letter-spacing:-0.04em;line-height:1.15;color:var(--hot);margin-bottom:12px;}
.why-card p{font-size:14.5px;line-height:1.65;color:rgba(247,240,248,0.74);}
/* Tablette : les titres peuvent passer sur 2 lignes, on réserve la place pour que les phrases démarrent à la même hauteur */
@media (min-width:761px) and (max-width:1060px){.why-card h3{min-height:2.3em;}}
.why-grid .why-card:nth-child(2){transition-delay:.1s;}
.why-grid .why-card:nth-child(3){transition-delay:.2s;}
@media (prefers-reduced-motion:reduce){.why-grid .why-card{transition-delay:0s !important;}}
@media (max-width:760px){.why-grid{grid-template-columns:1fr;}}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip-pill{
  padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;text-decoration:none;color:rgba(247,240,248,0.85);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.18);transition:background .2s ease,border-color .2s ease;
}
a.chip-pill:hover{background:rgba(255,79,158,0.18);border-color:var(--hot);}
/* Écrans tactiles : zone cliquable portée à 44 px sans changer l'apparence */
@media (pointer:coarse){
  .nav-btn,.nav-logo,a.chip-pill{position:relative;}
  .nav-btn::after,a.chip-pill::after{content:'';position:absolute;inset:-4px 0;}
  .nav-logo::after{content:'';position:absolute;inset:-12px -8px;}
}

/* ===== FORMULAIRE DE CONTACT ===== */
.contact{background:linear-gradient(180deg,#150f2c,#1a1434);padding:120px 0 130px;}
.contact [hidden]{display:none !important;}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:48px 64px;align-items:start;}
.contact-intro h2{font-size:clamp(30px,3.8vw,52px);font-weight:800;letter-spacing:-0.05em;line-height:1;color:var(--cream);}
.contact-intro p{margin-top:18px;font-size:16px;line-height:1.6;color:rgba(247,240,248,0.74);}
.contact-card{padding:34px clamp(20px,3.4vw,38px) 36px;border-radius:22px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color-scheme:dark;}
.form-note{font-size:13px;line-height:1.5;color:rgba(247,240,248,0.62);margin-bottom:22px;}
.form-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 18px;position:relative;}
.span-3{grid-column:span 3;}
.span-6{grid-column:span 6;}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--cream);margin-bottom:8px;}
.field .opt{font-weight:500;color:rgba(247,240,248,0.6);}
.field input[type="text"],.field input[type="email"],.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(247,240,248,0.28);
  color:var(--cream);font:inherit;font-size:16px;line-height:1.4;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{resize:vertical;min-height:140px;}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23f7f0f8" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9l7 7 7-7"/></svg>');
  background-repeat:no-repeat;background-position:right 16px center;
}
.field select option{background:#241b44;color:var(--cream);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(247,240,248,0.5);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.check input:focus-visible{outline:3px solid var(--hot);outline-offset:2px;}
.field input::placeholder{color:rgba(247,240,248,0.4);}
.field [aria-invalid="true"]{border-color:#ff8a8a;}
.field-count{margin-top:6px;font-size:12.5px;color:rgba(247,240,248,0.6);text-align:right;}
.field-error{margin-top:7px;font-size:13.5px;font-weight:600;line-height:1.4;color:#ff9b9b;}
.field-error::before{content:'! ';font-weight:800;}
.check{display:flex;align-items:flex-start;gap:12px;}
.check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--hot);cursor:pointer;}
.check label{margin:0;font-size:14px;font-weight:500;line-height:1.55;color:rgba(247,240,248,0.85);cursor:pointer;}
.check label a{color:var(--cream);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.check label a:hover{color:var(--hot);}
.check label a:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{margin-top:22px;padding:14px 16px;border-radius:14px;font-size:14.5px;line-height:1.55;}
.form-status--error{background:rgba(255,138,138,0.12);border:1px solid rgba(255,138,138,0.5);color:#ffd2d2;}
.form-status a{color:#fff;font-weight:700;text-underline-offset:3px;}
.contact-submit{margin-top:26px;border:0;cursor:pointer;font-family:inherit;}
.form-status + .contact-submit{margin-top:18px;}
.contact-submit:focus-visible,.form-success .btn-light:focus-visible{outline:3px solid var(--hot);outline-offset:3px;}
.contact-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;background:var(--cream);color:var(--ink);box-shadow:none;}
.form-success{padding:6px 0;outline:none;}
.form-success h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-0.04em;line-height:1.3;color:var(--cream);margin-bottom:26px;}
@media (max-width:900px){.contact{padding:90px 0 100px;}.contact-grid{grid-template-columns:1fr;gap:34px;}}
@media (max-width:640px){.contact{padding:80px 0 90px;}.span-3{grid-column:span 6;}.contact-submit{width:100%;justify-content:center;}}

/* ===== APPEL FINAL ===== */
.cta{
  background:radial-gradient(ellipse 900px 520px at 20% 100%,rgba(255,255,255,0.4),transparent 60%),linear-gradient(180deg,#f6cfe0,#f3c4db);
  color:var(--ink);padding:150px 0 40px;overflow:hidden;
}
.cta h2{font-size:clamp(44px,9.6vw,120px);font-weight:800;line-height:0.92;letter-spacing:-0.06em;margin-bottom:46px;}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;}
@media (max-width:600px){.cta h2{font-size:min(44px,7.2vw);}} /* « Construisons‑la. » ne se coupe pas : le trait d'union est insécable */
.btn-dark,.btn-outline{
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:15px;
  transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-dark{background:var(--ink);color:var(--cream);}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(26,20,32,0.5);background:var(--hot-deep);}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);padding:14.5px 26px;}
.btn-outline:hover{transform:translateY(-3px);background:var(--ink);color:var(--cream);}
.btn-dark i,.btn-outline i{font-style:normal;font-size:13px;}
.copy{margin-top:110px;font-size:12.5px;color:#7a6d82;}

/* ===== PAGE MENTIONS LÉGALES ===== */
.copy a{color:#5d5266;font-weight:600;text-underline-offset:3px;}
.copy a:hover{color:var(--ink);}
.copy a:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px;}
.legal{background:linear-gradient(180deg,#150f2c,#1a1434);padding:150px 0 110px;}
.legal-wrap{max-width:860px;}
.legal h1{font-size:clamp(28px,4.2vw,52px);font-weight:800;letter-spacing:-0.05em;line-height:1.05;color:var(--cream);}
.legal-updated{margin-top:16px;font-size:13.5px;color:rgba(247,240,248,0.6);}
.legal-toc{margin:36px 0 12px;padding:22px 26px;border-radius:22px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);}
.legal-toc ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;}
.legal-toc a{font-size:14.5px;font-weight:600;color:var(--cream);text-underline-offset:4px;}
.legal-toc a:hover{color:var(--hot);}
.legal-block{margin-top:46px;padding-top:34px;border-top:1px solid var(--line-dark);scroll-margin-top:96px;}
.legal-block h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-0.04em;line-height:1.15;color:var(--hot);margin-bottom:18px;}
.legal-block p,.legal-block li{font-size:15.5px;line-height:1.7;color:rgba(247,240,248,0.84);}
.legal-block p + p{margin-top:10px;}
.legal-block ul{list-style:none;display:grid;gap:12px;}
.legal-block li{position:relative;padding-left:20px;}
.legal-block li::before{content:'';position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--hot);}
.legal-block strong{color:var(--cream);}
.legal-block a{color:var(--cream);text-underline-offset:3px;overflow-wrap:anywhere;}
.legal-block a:hover{color:var(--hot);}
.legal a:focus-visible,.legal-toc a:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px;}
/* Champs encore à compléter : bien visibles, à ne pas oublier avant la mise en ligne */
mark.todo{background:#ffe94d;color:#1a1420;font-weight:700;padding:2px 7px;border-radius:5px;}
.legal-foot{background:linear-gradient(180deg,#f6cfe0,#f3c4db);color:var(--ink);padding:40px 0;}
.legal-foot .copy{margin-top:0;}
@media (max-width:640px){.legal{padding:120px 0 80px;}.legal-toc{padding:18px 20px;}.legal-toc ul{flex-direction:column;gap:10px;}.legal-block{margin-top:36px;padding-top:28px;}}

/* ===== RÉVÉLATIONS ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.25,1);}
.reveal.in-view{opacity:1;transform:none;}
.reveal-blur{opacity:0;filter:blur(16px);transform:scale(.96);transition:opacity 1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.25,1);}
.reveal-blur.in-view{opacity:1;filter:blur(0);transform:none;}

/* ===== MOBILE ===== */
@media(max-width:860px){
  .nav-links{display:none;}
  .pill{padding-left:20px;}
  .bg-word{font-size:clamp(34px,11vw,60px);}
  .bg-word.bg-word-1{top:24%;} .bg-word.bg-word-2{top:32%;} .bg-word.bg-word-3{top:70%;} .bg-word.bg-word-4{top:78%;}
  .typer{left:20px;bottom:30px;font-size:12px;max-width:62%;}
  .bio{padding:120px 0 100px;}
  .bio-grid{grid-template-columns:1fr;gap:56px;}
  .bio-visual{max-width:420px;}
  .bio-device{right:-4%;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .do-row p{display:none;}
  .do-left{gap:16px;}
  .copy{margin-top:70px;}
}

/* ===== MOUVEMENT RÉDUIT ===== */
@media(prefers-reduced-motion:reduce){
  .rig,.bg-word,.bio-device,.nav-btn .dot,.scroll-hint i,.caret,.marquee-track{animation:none !important;}
  .bg-word{opacity:.94;}
  .badge3d{transition:none;}
  .reveal,.reveal-blur{opacity:1;filter:none;transform:none;transition:none;}
}