/* =========================================================
   DLT3D — Système visuel v2
   Blanc dominant · Noir structure · Rouge #F00000 (sobre)
   Thème clair (défaut) + sombre · Police : Hanken Grotesk
   ========================================================= */

:root,
[data-theme="light"]{
  --bg:#ffffff;
  --bg-2:#f5f5f4;
  --surface:#ffffff;
  --surface-2:#f6f6f5;
  --text:#1a1a1a;
  --text-2:#5a5a5a;
  --text-3:#909090;
  --line:#e4e4e1;
  --line-strong:#d3d3cf;
  --red:#F00000;
  --red-soft:rgba(240,0,0,.08);
  --inverse-bg:#141416;
  --inverse-text:#f5f5f5;
  --pattern:rgba(26,26,26,.05);
  --halo:rgba(240,0,0,.04);
  --shadow:0 40px 90px -50px rgba(0,0,0,.30);
  --shadow-card:0 24px 60px -40px rgba(0,0,0,.30);
  --media-1:#1d1d22; --media-2:#0e0e11;
  --logo-light:block; --logo-dark:none;
  --ghost:rgba(26,26,26,.08);
}
[data-theme="dark"]{
  --bg:#141416;
  --bg-2:#1b1b1e;
  --surface:#1b1b1e;
  --surface-2:#202024;
  --text:#f4f4f5;
  --text-2:#a6a6ad;
  --text-3:#76767d;
  --line:#2b2b30;
  --line-strong:#3a3a40;
  --red:#ff2a2a;
  --red-soft:rgba(255,42,42,.12);
  --inverse-bg:#000000;
  --inverse-text:#f5f5f5;
  --pattern:rgba(255,255,255,.05);
  --halo:rgba(240,0,0,.10);
  --shadow:0 40px 90px -50px rgba(0,0,0,.8);
  --shadow-card:0 30px 70px -40px rgba(0,0,0,.85);
  --media-1:#23232a; --media-2:#0e0e11;
  --logo-light:none; --logo-dark:block;
  --ghost:rgba(255,255,255,.06);
}

/* Alias hérités (anciennes pages) → tokens sémantiques, adaptatifs au thème */
:root{
  --white:var(--text); --gray:var(--text-2); --gray-dim:var(--text-3);
  --black:var(--surface); --black-2:var(--bg-2);
  --anthracite:var(--surface-2); --anthracite-2:var(--surface-2);
  --red-bright:var(--red); --red-deep:var(--red);
}

/* ---- Marianne (réservée à l'État) → substitut libre Hanken Grotesk ---- */
:root{
  --font-display:'Hanken Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --maxw:1300px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;letter-spacing:-.005em;
  transition:background .5s var(--ease), color .5s var(--ease);
}
::selection{background:var(--red);color:#fff}

/* fond schéma adaptatif (mask -> teinte par le thème) */
body::before{
  content:"";position:fixed;inset:-8%;
  background:var(--pattern);
  -webkit-mask:url('assets/circuit.svg') 0 0/460px;
  mask:url('assets/circuit.svg') 0 0/460px;
  z-index:0;pointer-events:none;
  -webkit-mask-image:url('assets/circuit.svg');
  mask-image:url('assets/circuit.svg');
  mask-size:460px;
  /* fade out vers le bas */
  opacity:1;
}
body::after{
  content:"";position:fixed;top:-26vh;left:50%;
  width:120vw;height:70vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--halo),transparent 62%);
  z-index:0;pointer-events:none;
}
main,footer,header{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800;text-transform:uppercase;
  line-height:.96;letter-spacing:-.025em;
}
.eyebrow{
  font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-2);display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--red);display:inline-block}
.red{color:var(--red)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:13px var(--gut);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:28px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__logo img{height:25px}
.logo-light{display:var(--logo-light)}
.logo-dark{display:var(--logo-dark)}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-2);padding:10px 15px;transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav__link:hover{color:var(--text)}
.nav__link:hover::after,.nav__link.active::after{transform:scaleX(1)}
.nav__link.active{color:var(--text)}
.nav__cta{
  font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;background:var(--red);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s;
}
.nav__cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px var(--red)}

/* theme toggle */
.theme-toggle{
  width:42px;height:42px;border:1px solid var(--line-strong);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);
  transition:border-color .3s,background .3s,transform .3s;position:relative;
}
.theme-toggle:hover{border-color:var(--red);transform:translateY(-2px)}
.theme-toggle .ic{position:relative;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.theme-toggle svg{display:block}
[data-theme="light"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:none}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:26px;height:2px;background:var(--text);transition:.3s var(--ease)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:13px;
  font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:17px 28px;cursor:pointer;border:1px solid transparent;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s,border-color .3s,box-shadow .3s;
}
.btn--primary{background:var(--text);color:var(--bg)}
.btn--primary:hover{background:var(--red);color:#fff;transform:translateY(-3px);box-shadow:0 16px 34px -16px var(--red)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px var(--red);filter:saturate(1.1)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}
.line-mask{overflow:hidden;display:block}
.line-mask > span{display:block;transform:translateY(110%);
  transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.hero.ready .line-mask > span{transform:none}

/* ---------- Section heads ---------- */
.sec-head{margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{font-size:clamp(40px,6.6vw,104px);margin-top:20px}
.sec-head p{max-width:48ch;color:var(--text-2);margin-top:22px;font-size:clamp(16px,1.4vw,20px)}
.idx{font-family:var(--font-display);color:var(--red);font-size:14px;letter-spacing:.06em}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:80px var(--gut) 38px;position:relative;overflow:hidden}
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;
  padding-bottom:52px;border-bottom:1px solid var(--line)}
.foot h4{font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin-bottom:20px}
.foot__links{display:flex;flex-direction:column;gap:11px}
.foot__links a{color:var(--text-2);transition:color .3s,padding-left .3s;font-size:15px}
.foot__links a:hover{color:var(--text);padding-left:7px}
.foot__logo img{height:30px;margin-bottom:20px}
.foot__bottom{max-width:var(--maxw);margin:30px auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.norms{display:flex;gap:9px;flex-wrap:wrap}
.norm{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text-2);border:1px solid var(--line-strong);
  padding:8px 13px;transition:border-color .3s,color .3s}
.norm:hover{border-color:var(--red);color:var(--text)}
.foot__copy{font-size:13px;color:var(--text-3)}

/* scroll progress */
.scrollline{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:200;
  box-shadow:0 0 10px var(--red);transition:width .1s linear}

/* ---------- Responsive nav ---------- */
@media(max-width:900px){
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(82vw,360px);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;
    background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(20px);
    padding:0 40px;transform:translateX(100%);transition:transform .5s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav__links.open{transform:none}
  .nav__link{font-size:21px;padding:13px 0}
  .nav__link::after{left:0;right:auto;width:0}
  .nav__cta{margin-top:18px}
  .nav__burger{display:flex;z-index:101}
  .nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.open span:nth-child(2){opacity:0}
  .nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .foot__grid{grid-template-columns:1fr;gap:34px}
}

/* =========================================================
   COUCHE EXPÉRIENCE — curseur, grain, loader, 3D, scroll
   ========================================================= */

/* ---- Grain (statique, léger) ---- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain{opacity:.07}

/* ---- Curseur custom magnétique ---- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;
  mix-blend-mode:normal;will-change:transform;opacity:0;transition:opacity .4s}
.cursor{width:38px;height:38px;border:1.5px solid var(--red);
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .4s,border-color .3s}
.cursor-dot{width:6px;height:6px;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 12px var(--red)}
.cursor.is-hover{width:64px;height:64px;background:var(--red-soft);border-color:var(--red)}
.cursor.is-down{width:28px;height:28px}
body.cursor-ready{cursor:none}
body.cursor-ready a,body.cursor-ready button,body.cursor-ready .nav__burger{cursor:none}
body.cursor-ready input,body.cursor-ready textarea,body.cursor-ready select{cursor:auto}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none!important}body.cursor-ready{cursor:auto}}

/* ---- Loader ---- */
.loader{position:fixed;inset:0;z-index:12000;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease .3s}
.loader.done{transform:translateY(-101%);opacity:1;pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.loader__logo{height:42px;width:auto;clip-path:inset(0 100% 0 0);animation:logoReveal 1s var(--ease) .15s forwards}
@keyframes logoReveal{to{clip-path:inset(0 0 0 0)}}
.loader__bar{width:200px;height:2px;background:var(--line);overflow:hidden;position:relative}
.loader__bar span{position:absolute;inset:0;width:0;background:var(--red);animation:barFill 1.25s var(--ease) .2s forwards;box-shadow:0 0 12px var(--red)}
@keyframes barFill{to{width:100%}}
.loader__pct{font-size:11px;letter-spacing:.3em;color:var(--text-3);font-variant-numeric:tabular-nums}
body.is-loading{overflow:hidden}

/* ---- Ligne schéma qui se dessine ---- */
.schematic{position:fixed;top:0;left:16px;height:100vh;width:46px;z-index:5;pointer-events:none;display:none}
@media(min-width:1280px){.schematic{display:block}}
.schematic path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.schematic .track{stroke:var(--line)}
.schematic .draw{stroke:var(--red);filter:drop-shadow(0 0 4px var(--red))}
.schematic circle{fill:var(--bg);stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* ---- Révélation mot à mot ---- */
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word > i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:var(--wd,0ms)}
.in .word > i,[data-words].in .word > i{transform:none}

/* ---- Flip cards (expertises) ---- */
.flips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.flip{perspective:1600px;min-height:280px}
.flip__inner{position:relative;width:100%;height:100%;min-height:280px;transition:transform .85s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip:hover .flip__inner,.flip.flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);padding:34px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface)}
.flip__front{background:var(--bg)}
.flip__idx{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:15px}
.flip__front h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.4vw,36px);line-height:.95;letter-spacing:-.02em}
.flip__hint{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:8px}
.flip__hint::after{content:"";width:20px;height:1px;background:var(--red)}
.flip__back{transform:rotateY(180deg);background:var(--text);color:var(--bg);border-color:var(--text)}
.flip__back p{font-size:15px;line-height:1.55;color:var(--bg);opacity:.85}
.flip__back h4{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:20px;margin-bottom:14px;color:var(--bg)}
.flip__back a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--bg);display:inline-flex;gap:8px}
.flip__back a .arr{color:var(--red)}
@media(max-width:1080px){.flips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.flips{grid-template-columns:1fr}.flip,.flip__inner{min-height:220px}}

/* ---- Tilt holographique ---- */
.tilt{will-change:transform;transform-style:preserve-3d}
.tilt__shine{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle 240px at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.18),transparent 60%);mix-blend-mode:overlay}
.tilt:hover .tilt__shine{opacity:1}

/* ---- Navbar glass renforcé ---- */
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  box-shadow:0 1px 0 0 color-mix(in srgb,var(--text) 8%,transparent),0 18px 50px -30px rgba(0,0,0,.4);
}

@media (prefers-reduced-motion:reduce){
  .flip__inner{transition:none}
}

/* ---------- Clients & partenaires (bandeau de logos défilant) ---------- */
.clients{
  background:var(--inverse-bg);color:#f4f4f5;
  padding:clamp(68px,9vw,118px) 0;overflow:hidden;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.clients__head{text-align:center;display:flex;flex-direction:column;align-items:center;
  margin-bottom:clamp(42px,6vw,70px)}
.clients__head .eyebrow{color:rgba(255,255,255,.55);justify-content:center}
.clients__head h2{font-size:clamp(32px,5vw,72px);color:#fff;margin-top:18px}
.clients__head h2 .red{color:var(--red)}

.clients__marquee{position:relative;display:flex;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__track{display:flex;gap:0;width:max-content;will-change:transform;
  animation:clientsScroll 32s linear infinite}
.clients__marquee:hover .clients__track{animation-play-state:paused}

.logo-card{flex:0 0 auto;width:188px;height:108px;margin-right:28px;
  background:#fff;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:13px;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.logo-card img{max-width:100%;max-height:82px;width:auto;height:auto;object-fit:contain;
  filter:none;opacity:1;
  transition:filter .3s var(--ease),opacity .3s var(--ease)}
.logo-card:hover{transform:scale(1.05);box-shadow:0 18px 38px -14px rgba(0,0,0,.7)}

/* 2e bandeau : partenaires (défile en sens inverse des clients) */
.clients__head--partners{margin-top:clamp(48px,7vw,90px)}
.clients__track--rev{animation-direction:reverse}

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

@media(max-width:700px){
  .logo-card{width:130px;height:74px;margin-right:16px;padding:11px}
  .logo-card img{max-height:52px}
  .clients__track{animation-duration:24s}
}
@media(prefers-reduced-motion:reduce){
  .clients__track{animation:none}
  .clients__marquee{-webkit-mask:none;mask:none}
}