@font-face {
  font-family: 'DaSeiNei';
  src: url('https://www.hypernovasolutions.fr/assets/fonts/DaSeiNei.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
  --cream:#f5f0e8;--cream2:#ede8de;--ink:#0e0d0b;--ink2:#2a2720;
  --ink3:rgba(14,13,11,.45);--ink4:rgba(14,13,11,.15);
  --gold:#f4bf23;--gold2:#c99a18;--gold3:rgba(244,191,35,.12);
  --serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --border:rgba(14,13,11,.1);
  --hero-text: #0e0d0b;
  --hero-subtext: rgba(14,13,11,.55);
  --hero-accent: #c99a18;
  --hero-ring: rgba(14,13,11,.25);
  --hero-dot: #c99a18;
  --atom-line: rgba(14,13,11,.25);
  --atom-line-soft: rgba(14,13,11,.15);
  --atom-core: #c99a18;
  --atom-core-soft: rgba(14,13,11,.7);
  --atom-glow: rgba(201,154,24,.25);
  --ink: #0e0d0b;
  --about-text: rgba(14,13,11,.75);
  --about-strong: #0e0d0b;
  --about-left: #000000;

}

html{overflow-x:hidden;scroll-behavior:auto}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);overflow-x:hidden;}
::selection{background:var(--ink);color:var(--cream)}

body.dark {
  --hero-text: #f5f0e8;
  --hero-subtext: rgba(245,240,232,.35);
  --hero-accent: #f4bf23;
  --hero-ring: rgba(244,191,35,.5);
  --hero-dot: #f4bf23;
  --atom-line: rgba(245,240,232,.28);
  --atom-line-soft: rgba(245,240,232,.15);
  --atom-core: #f4bf23;
  --atom-core-soft: rgba(245,240,232,.8);
  --atom-glow: rgba(244,191,35,.25);
  --ink: #f5f0e8;
  --about-strong: #f5f0e8;
  --about-text: rgba(46, 46, 46, 0.75);
  --about-em: #rgba(0, 0, 0, 0.75);
  --about-left: #ffffff;
  --chip-text: rgba(14,13,11,.45);
  --chip-border: rgba(14,13,11,.15);
  --chip-hover: rgba(14,13,11,.75);
}

/* CURSOR */
#cursor-dot{width:8px;height:8px;background:var(--ink);border-radius:50%;position:fixed;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;pointer-events:none;z-index:10000}
#cursor-ring{width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:width .35s,height .35s,opacity .35s}

/* PROGRESS */
#sprogress{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:8000;transform-origin:left;width:100%;transform:scaleX(0)}

/* =========================================
   WATERMARK — couvre tout le body, fixé
   ========================================= */
#wm-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
/* Empile correctement le contenu au-dessus du watermark */
#header,main,footer,.ticker,
#hero,#intro,#atom-transition,
#services-container,#about,
#process,#projects,
#testimonials,#contact{
  position:relative;
  z-index:1;
}
.wm-track{
  position:absolute;
  left:-20vw;
  width:220vw;
  display:flex;
  align-items:center;
  gap:3rem;
  white-space:nowrap;
  transform:rotate(-17deg);
  transform-origin:center left;
}
.wm-item{
  font-family:'DaSeiNei',var(--serif);
  font-size:clamp(3.5rem,6vw,7rem);
  font-weight:400;
  letter-spacing:-.03em;
  white-space:nowrap;
  user-select:none;
  flex-shrink:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(14,13,11,.1);
}
.wm-item.gold{
  -webkit-text-stroke-color:rgba(201,154,24,.15);
}
@keyframes wmScrollL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wmScrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* BRAND NAME */
.brand-name{font-family:'DaSeiNei',var(--serif)!important;letter-spacing:.02em;text-transform:uppercase}

/* HEADER */
#header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:0 4rem;height:7rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(245,240,232,.7);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(14,13,11,.07);
  transition:padding .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
#header.scrolled{
  background:rgba(245,240,232,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 24px rgba(14,13,11,.06);
}
.logo-txt{font-family:var(--serif);font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-decoration:none;transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.header-cta{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--border);padding:.55rem 1.4rem;
  background:none;color:var(--ink);;transition:all .25s;font-family:var(--sans);
}
.header-cta:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* FLOATING THEME BTN */
.floating-btn{
  position:fixed;right:2rem;bottom:2rem;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  ;z-index:9999;
  background:rgba(245,240,232,.85);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(14,13,11,.1);
  box-shadow:0 4px 24px rgba(0,0,0,.10);
  transition:transform .25s ease,background .25s ease;
}
.floating-btn:hover{transform:scale(1.08)}
.floating-btn i{font-size:1.2rem;transition:color .3s ease}

/* =========================================
   HERO
   ========================================= */
#hero{
  height:100vh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);
}
.hero-bg-text{
  position:absolute;
  font-family:'DaSeiNei',var(--serif);
  font-size:clamp(8rem,18vw,22rem);font-weight:400;
  color:rgba(14,13,11,.06);letter-spacing:-.05em;
  white-space:nowrap;user-select:none;line-height:1;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.scroll-indicator{
  position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
}
.scroll-line{width:1px;height:60px;background:linear-gradient(to bottom,var(--ink3),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* =========================================
   TICKER
   ========================================= */
.ticker{
  overflow:hidden;background:var(--ink);padding:.9rem 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.ticker-track{display:inline-flex;gap:4rem;white-space:nowrap;animation:tickLeft 22s linear infinite; color:var(#f5f0e8)}
.ticker-item {
  font-family: 'DaSeiNei',var(--serif);
  font-size: clamp(1.8rem,3.5vw,3.5rem);
  color: var(#f5f0e8);
  letter-spacing: -.02em;
  font-weight: 400;
  color: #f5f0e8;
}
.ticker-item .dot{color:var(--gold)}
.ticker-item{
  color:var(#f5f0e8);
 }

@keyframes tickLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================
   INTRO
   ========================================= */
#intro{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--border);
}
.intro-left{
  padding:12vh 5vw;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.intro-atom-wrap{position:absolute;top:50%;right:-60px;transform:translateY(-50%);opacity:.5}
.intro-big{
  font-family:var(--serif);
  font-size:clamp(3rem,5.5vw,6.5rem);font-weight:400;
  line-height:1;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:2.5rem;
}
.intro-big em{font-style:italic;color:var(--gold2)}
.intro-p{font-size:clamp(1rem,1.4vw,1.3rem);line-height:1.75;font-weight:300;color:var(--ink2);margin-bottom:2rem}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--border);padding:.5rem 1.2rem;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
}
.pill-dot{width:6px;height:6px;background:#2ecc71;border-radius:50%}
.intro-right{
  display:flex;align-items:center;justify-content:center;
  background:var(--cream2);position:relative;overflow:hidden;
}
.intro-giant-num{
  font-family:var(--serif);font-size:clamp(6rem,14vw,18rem);
  font-weight:400;color:var(--ink);letter-spacing:-.06em;line-height:1;
  position:relative;z-index:2;
}
.intro-giant-label{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);text-align:center;margin-top:.5rem;
  position:relative;z-index:2;
}

/* =========================================
   SEC SHARED
   ========================================= */
.sec-label{
  font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
}
.sec-label::before{content:'';width:20px;height:1px;background:var(--ink3)}
.sec-title{font-family:var(--serif);font-size:clamp(2.5rem,4vw,4.5rem);font-weight:400;letter-spacing:-.03em}
.sec-title em{font-style:italic;color:var(--gold2)}

/* =========================================
   HORIZONTAL SCROLL SERVICES
   ========================================= */
#services-container{position:relative}
#services-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.services-header{
  padding:0 5vw 3vh;
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-shrink:0;
}
.drag-hint{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
#svc-track-wrap{
  display:flex;align-items:stretch;overflow:visible;
  padding:0 5vw;gap:2px;flex-shrink:0;
}
.svc-card{
  flex:0 0 360px;
  border:1px solid var(--border);
  padding:3rem 2.5rem;
  background:var(--cream);
  position:relative;overflow:hidden;
  transition:background .4s;
}
.svc-card:hover{background:var(--cream2)}
.svc-card::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2.5px;
  background:var(--gold);transition:width .6s ease;
}
.svc-card:hover::after{width:100%}
.svc-num{font-family:var(--serif);font-size:4rem;font-weight:400;color:var(--ink4);line-height:1;margin-bottom:2rem;letter-spacing:-.04em;display:block}
.svc-card h3{font-family:var(--serif);font-size:1.7rem;font-weight:400;margin-bottom:.7rem;letter-spacing:-.01em}
.svc-card p{font-size:.84rem;line-height:1.8;color:var(--ink3);font-weight:300;margin-bottom:1.5rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);padding:.22rem .6rem;color:var(--ink3);transition:all .25s}
.svc-card:hover .tag{border-color:rgba(201,154,24,.4);color:var(--gold2)}
.svc-atom-wrap{position:absolute;top:1.5rem;right:1.5rem;opacity:.4;pointer-events:none}

/* =========================================
   ABOUT
   ========================================= */
#about{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border)}
.about-left{
  padding:10vh 5vw;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--ink);color:var(--cream);
  position:relative;overflow:hidden;
}
.about-left .sec-label{color:rgba(245,240,232,.35)}
.about-left .sec-label::before{background:rgba(245,240,232,.35)}
.about-left .sec-title{color:var(--cream)}
.about-left em{color:var(--gold)}
.about-p{font-size:.9rem;line-height:1.85;font-weight:300;margin-top:2rem;margin-bottom:.8rem}
.about-p em{font-style:normal;font-weight:500}
.about-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.chip {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--chip-border);
  padding: .25rem .7rem;
  color: var(--chip-text);
  transition: all .25s;
  cursor: default;
}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.about-big-atom{position:absolute;bottom:-60px;right:-60px;opacity:.15}
.about-right{display:grid;grid-template-rows:1fr 1fr}
.about-stat{
  padding:5vh 4vw;border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.about-stat:last-child{border-bottom:none}
.stat-num{font-family:var(--serif);font-size:clamp(4rem,8vw,9rem);font-weight:400;letter-spacing:-.05em;color:var(--ink);line-height:.9}
.stat-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-top:.8rem}
.stat-atom{position:absolute;right:3vw;top:50%;transform:translateY(-50%);opacity:.2}

/* =========================================
   PROCESS
   ========================================= */
#process{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proc-pin{position:sticky;top:0;padding:8vh 5vw;background:var(--cream)}
.proc-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:5vh}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proc-step{
  padding:2.5rem 2rem;border-right:1px solid var(--border);
  position:relative;overflow:hidden;
}
.proc-step:last-child{border-right:none}
.proc-step::before{
  content:'';position:absolute;top:0;left:0;width:0;height:100%;
  background:var(--cream2);z-index:0;transition:width .5s ease;
}
.proc-step:hover::before{width:100%}
.proc-step>*{position:relative;z-index:1}
.proc-num{font-family:var(--serif);font-size:3.5rem;color:var(--ink4);line-height:1;display:block;margin-bottom:1.5rem;letter-spacing:-.04em}
.proc-step h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin-bottom:.6rem}
.proc-step p{font-size:.82rem;line-height:1.75;color:var(--ink3);font-weight:300}

/* =========================================
   PROJETS RÉALISÉS
   ========================================= */
#projects{
  border-top:1px solid var(--border);
  padding:10vh 5vw;
}
.projects-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:4vh;flex-wrap:wrap;gap:2rem;
}
.proj-filters{
  display:flex;gap:.4rem;flex-wrap:wrap;
}
.proj-filter{
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--border);padding:.35rem 1rem;
  background:none;color:var(--ink3);;
  transition:all .25s;font-family:var(--sans);
}
.proj-filter.active,
.proj-filter:hover{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.proj-card{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  background:var(--cream2);
  border:1px solid var(--border);
  ;
}
.proj-card.wide{grid-column:span 2}
.proj-card-bg{
  position:absolute;inset:0;
  background:var(--cream2);
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.proj-card:hover .proj-card-bg{transform:scale(1.04)}
.proj-card-bg svg{
  width:80%;height:80%;opacity:.12;
  transition:opacity .4s,transform .7s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover .proj-card-bg svg{opacity:.2;transform:scale(1.1) rotate(4deg)}
/* Couleur accent par catégorie */
.proj-card[data-cat="web"] .proj-card-bg{background:linear-gradient(135deg,#e8f0e0,#d4e8d8)}
.proj-card[data-cat="mobile"] .proj-card-bg{background:linear-gradient(135deg,#e0e8f4,#d0ddf0)}
.proj-card[data-cat="video"] .proj-card-bg{background:linear-gradient(135deg,#f0e8e0,#e8d4c8)}
.proj-card[data-cat="logiciel"] .proj-card-bg{background:linear-gradient(135deg,#f0e0f0,#e4d0e8)}
.proj-card[data-cat="branding"] .proj-card-bg{background:linear-gradient(135deg,#f4f0d0,#eae0b8)}

.proj-overlay{
  position:absolute;inset:0;
  background:rgba(14,13,11,0);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem;
  transition:background .4s ease;
}
.proj-card:hover .proj-overlay{background:rgba(14,13,11,.72)}
.proj-meta{
  transform:translateY(12px);opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .35s;
}
.proj-card:hover .proj-meta{transform:translateY(0);opacity:1}
.proj-cat{
  font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;display:block;
}
.proj-title{
  font-family:var(--serif);font-size:1.4rem;font-weight:400;
  color:white;line-height:1.2;margin-bottom:.5rem;
}
.proj-desc{
  font-size:.75rem;line-height:1.6;color:rgba(245,240,232,.65);
  font-weight:300;
}
.proj-tags-wrap{
  display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.7rem;
}
.proj-tags-wrap .tag{
  border-color:rgba(245,240,232,.2);
  color:rgba(245,240,232,.5);font-size:.52rem;
}
/* Numéro visible en permanence */
.proj-num{
  position:absolute;top:1.5rem;left:1.5rem;
  font-family:var(--serif);font-size:2.5rem;
  font-weight:400;color:rgba(14,13,11,.15);
  line-height:1;letter-spacing:-.04em;
  transition:color .3s;
}
.proj-card:hover .proj-num{color:rgba(245,240,232,.3)}

/* Masquage filtre */
.proj-card.hidden{
  display:none;
}

/* =========================================
   TESTIMONIALS
   ========================================= */
#testimonials{padding:8vh 0;border-top:1px solid var(--border);overflow:hidden}
.test-head{padding:0 5vw 4vh}
.test-track{display:flex;gap:1.5rem;width:max-content}
.test-row1{animation:testL 38s linear infinite}
.test-row2{animation:testR 44s linear infinite;margin-top:1.5rem}
@keyframes testL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes testR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.t-card{
  flex-shrink:0;width:380px;border:1px solid var(--border);
  padding:2.5rem;background:var(--cream);transition:background .3s,border-color .3s;
}
.t-card:hover{background:var(--cream2);border-color:rgba(14,13,11,.2)}
.t-q{
  font-family:var(--serif);font-size:1.05rem;font-style:italic;
  line-height:1.65;color:var(--ink2);margin-bottom:1.8rem;
}
.t-q::before{content:'\201C';font-size:2.5rem;line-height:0;vertical-align:-.45rem;margin-right:.1rem;color:var(--gold)}
.t-author{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.t-author strong{color:var(--ink);display:block;margin-bottom:.2rem;font-weight:500}

/* =========================================
   CONTACT
   ========================================= */
#contact{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1.2fr}
.contact-left{
  padding:10vh 5vw;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-links{display:flex;flex-direction:column;gap:0;margin-top:2.5rem}
.c-link{
  font-size:.88rem;color:var(--ink3);text-decoration:none;
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 0;border-bottom:1px solid var(--border);
  transition:color .25s,padding-left .25s;
}
.c-link:hover{color:var(--ink);padding-left:.5rem}
.contact-right{padding:10vh 5vw;background:var(--cream2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.f-field{
  border:1px solid var(--border);margin:-1px 0 0 -1px;padding:1.2rem 1.5rem;
  transition:border-color .25s,background .25s;
}
.f-field:focus-within{border-color:var(--gold);background:rgba(244,191,35,.04);z-index:1;position:relative}
.f-label{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:.5rem}
.f-input{background:none;border:none;outline:none;color:var(--ink);font-family:var(--sans);font-size:.9rem;font-weight:300;width:100%}
select.f-input{cursor:pointer}
textarea.f-input{height:100px;resize:none}
.f-full{grid-column:1/-1}
.submit-btn{
  width:100%;padding:1.2rem;background:var(--ink);color:var(--cream);
  border:none;font-family:var(--sans);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;;transition:all .3s;font-weight:500;
  margin-top:1px;
}
.submit-btn:hover{background:var(--gold2);letter-spacing:.22em}

/* =========================================
   FOOTER
   ========================================= */
#footer{border-top:1px solid var(--border)}
.footer-big{
  padding:12vh 5vw;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2rem;
}
.footer-label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.footer-title{
  font-family:var(--serif);
  font-size:clamp(3.5rem,7vw,8rem);font-weight:400;
  line-height:.92;letter-spacing:-.04em;color:var(--ink);
}
.footer-title em{font-style:italic;color:var(--gold2)}
.btn-arrow{
  display:inline-flex;align-items:center;gap:1rem;
  text-decoration:none;color:var(--ink);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  border:none;background:none;;transition:gap .3s;
  align-self:flex-start;margin-top:1rem;
}
.btn-arrow:hover{gap:1.8rem}
.arrow-circle{
  width:56px;height:56px;border:1.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s;flex-shrink:0;
}
.btn-arrow:hover .arrow-circle{background:var(--ink);color:var(--cream)}
.arrow-circle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.footer-atom-deco{position:absolute;right:5vw;top:50%;transform:translateY(-50%);opacity:.15}
.footer-bottom{
  padding:3rem 5vw;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
}
.footer-brand{font-family:'DaSeiNei',var(--serif)!important;font-size:1.1rem;color:var(--ink)}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-size:.72rem;letter-spacing:.08em;color:var(--ink3);text-decoration:none;transition:color .25s}
.footer-links a:hover{color:var(--ink)}

/* =========================================
   DARK MODE
   ========================================= */
body.dark{
  --cream:#0e0d0b;--cream2:#151311;
  --ink:#f5f0e8;--ink2:rgba(245,240,232,.85);
  --ink3:rgba(245,240,232,.55);--ink4:rgba(245,240,232,.18);
  --border:rgba(245,240,232,.12);
}
body.dark #header{background:rgba(14,13,11,.65);border-bottom:1px solid rgba(245,240,232,.08)}
body.dark #header.scrolled{background:rgba(14,13,11,.85);box-shadow:0 1px 30px rgba(0,0,0,.4)}
body.dark #cursor-dot{background:var(--cream)}
body.dark #cursor-ring{border-color:var(--cream)}
body.dark .ticker{background:#000}
body.dark #hero{background:#0e0d0b}
body.dark .hero-bg-text{color:rgba(245,240,232,.05)}
body.dark .svc-card,body.dark .t-card,body.dark .proc-step,body.dark .f-field{background:#151311}
body.dark .floating-btn{background:rgba(14,13,11,.65);border:1px solid rgba(245,240,232,.12)}
body.dark .floating-btn i{color:var(--cream)}
body.dark .wm-item{-webkit-text-stroke-color:rgba(245,240,232,.07)}
body.dark .wm-item.gold{-webkit-text-stroke-color:rgba(201,154,24,.12)}
body.dark .proj-card[data-cat="web"] .proj-card-bg{background:linear-gradient(135deg,#1a2220,#142018)}
body.dark .proj-card[data-cat="mobile"] .proj-card-bg{background:linear-gradient(135deg,#141c28,#101828)}
body.dark .proj-card[data-cat="video"] .proj-card-bg{background:linear-gradient(135deg,#201814,#1a1010)}
body.dark .proj-card[data-cat="logiciel"] .proj-card-bg{background:linear-gradient(135deg,#1c1420,#18101c)}
body.dark .proj-card[data-cat="branding"] .proj-card-bg{background:linear-gradient(135deg,#201c0c,#1a1808)}

body,#header,.svc-card,.t-card,.proc-step,.f-field,.ticker{
  transition:background .5s ease,color .5s ease,border-color .5s ease;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media(max-width:1100px){
  #header{padding:1.2rem 2rem}
  #header.scrolled{padding:.8rem 2rem}
  #intro,#about,#contact{grid-template-columns:1fr}
  .intro-right{display:none}
  .about-left{padding:7vh 2rem}
  .about-right{grid-template-rows:auto auto}
  .proc-steps{grid-template-columns:repeat(2,1fr)}
  .proc-step:nth-child(2){border-right:none}
  .proc-step:nth-child(3),.proc-step:nth-child(4){border-top:1px solid var(--border)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .proj-card.wide{grid-column:span 2}
  .footer-big{padding:8vh 2rem}
  .contact-left,.contact-right{padding:7vh 2rem}
  .nav-links{display:none}
}
@media(max-width:700px){
  .hero-bg-text{font-size:clamp(3rem,13vw,5rem)}
  .proc-steps{grid-template-columns:1fr}
  .proc-step{border-right:none}
  .projects-grid{grid-template-columns:1fr}
  .proj-card.wide{grid-column:span 1}
  .footer-title{font-size:clamp(2.5rem,9vw,5rem)}
}

.logo-offset {
  display: inline-block;
  transform: translateX(20px);
}

.floating-btn .fa-moon {
    color: #000;
}

.floating-btn .fa-sun {
    color: #fff;
}

.apple-demo-btn{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin-top:18px;
  padding:12px 22px;
  border-radius:999px;

  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.2);

  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.02em;

  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);

  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

  position:relative;
  z-index:10;
}

.apple-demo-btn svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.apple-demo-btn:hover{
  transform:translateY(-3px);
  background:#fff;
  color:#000;
  border-color:#fff;

  box-shadow:
    0 10px 30px rgba(255,255,255,.18),
    0 0 0 1px rgba(255,255,255,.1);
}

.apple-demo-btn:hover svg{
  transform:translateX(4px);
}

.apple-demo-btn:active{
  transform:translateY(-1px) scale(.98);
}