/* New Immo Studies — feuille de style du site de présentation */
html{ color-scheme:dark; }
:root{
  --blue:    #5477d4;
  --blue-2:  #4767bf;
  --accent:  #6487de;
  --bg:      #101215;
  --surface: #181B20;
  --surface-2:#1F232A;
  --onyx:    #06070A;
  --ink:     #EEEEF0;
  --grey:    #989DA7;
  --grey-2:  #A4A8B1;
  --hair:    #2A2D34;
  --logo:    url("img/nis-logo.webp?v=78bb2be3");

  --sans:   -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --r:  24px;
  --rl: 30px;
  --gut: clamp(20px, 4.5vw, 56px);
  --max: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
p,h1,h2,h3{ margin:0; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:8px; }
svg{ display:block; }
img{ max-width:100%; display:block; }

/* ── type ── */
.pre{ font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:var(--grey); }
.h1{ font-size:clamp(2.8rem, 7vw, 5.8rem); font-weight:400; line-height:1.02; letter-spacing:-.038em; text-wrap:balance; margin-top:22px; }
.h2{ font-size:clamp(2rem, 3.4vw, 2.7rem); font-weight:400; line-height:1.13; letter-spacing:-.036em; text-wrap:balance; margin-top:22px; }
.sub{ font-size:14px; line-height:1.65; color:var(--grey-2); margin-top:18px; max-width:38ch; }
.lede{ font-size:15px; line-height:1.65; color:var(--grey-2); margin-top:22px; max-width:46ch; }
.label{ font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }

/* ── identité ── */
.lockup{ display:inline-flex; align-items:center; gap:12px; }
.rosette{ width:34px; height:34px; flex:none; background:var(--logo) center/contain no-repeat; display:block; }
.wordmark{ height:16px; width:auto; aspect-ratio:2393.65/209.8; color:currentColor; transform:translateY(1px); }

/* ── nav ── */
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter:blur(20px) saturate(1.2); border-bottom:1px solid var(--hair); }
.top-in{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav{ display:flex; gap:28px; }
.nav a{ font-size:13px; font-weight:400; color:var(--grey); letter-spacing:-.01em; transition:color .25s; white-space:nowrap; }
.nav a:hover{ color:var(--ink); }
@media (max-width:780px){ .nav{ display:none; } }

/* ── révélations ── */
.js .rv{ opacity:0; transform:translateY(18px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.in.d1{transition-delay:.08s} .js .rv.in.d2{transition-delay:.16s} .js .rv.in.d3{transition-delay:.24s} .js .rv.in.d4{transition-delay:.32s}
.mask{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.js .mask>span{ display:block; transform:translateY(108%); }
.js .lit .mask>span{ transform:none; transition:transform 1.05s cubic-bezier(.18,.9,.2,1); }
.js .lit .mask:nth-of-type(2)>span{ transition-delay:.09s; }
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{ opacity:1; transform:none; transition:none; }
  .js .mask>span,.js .lit .mask>span{ transform:none; transition:none; }
}

/* ── cartes ── */
.tile{
  background:var(--surface); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  min-height:176px; position:relative;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .3s;
}
.tile:hover{ transform:translateY(-3px); background:var(--surface-2); }
.tile h3{ font-size:1.08rem; font-weight:500; letter-spacing:-.02em; line-height:1.25; }
.tile p{ color:var(--grey); font-size:14px; line-height:1.55; margin-top:6px; }
.tile .circ{ align-self:flex-end; }

.circ{
  width:44px; height:44px; border-radius:50%; background:#262A32; border:1px solid #383C45; color:var(--ink);
  display:grid; place-items:center; flex:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.tile:hover .circ, .panel:hover .circ{ transform:scale(1.08); }
.circ svg{ width:15px; height:15px; }

.panel{
  border-radius:var(--rl); padding:30px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  min-height:340px; transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.panel:hover{ transform:translateY(-3px); }
.panel.blue{ background:var(--blue); color:#fff; }
.panel.onyx{ background:var(--onyx); color:#fff; }
.panel .big{ font-size:clamp(1.6rem, 2.4vw, 2.15rem); font-weight:500; line-height:1.12; letter-spacing:-.03em; max-width:16ch; position:relative; }
.panel .ctl{ display:flex; align-items:center; gap:14px; font-weight:400; font-size:14px; position:relative; }
.panel.blue .circ{ background:#fff; border-color:#fff; color:var(--blue); }
.panel.onyx .circ{ background:#fff; border-color:#fff; color:#111; }
.panel.cta{ align-items:center; justify-content:center; text-align:center; gap:18px; }
.panel.cta .circ{ width:76px; height:76px; }
.panel.cta .circ svg{ width:22px; height:22px; }
.panel.cta span{ font-size:15px; font-weight:400; }
.panel.cta .appicon{ width:64px; height:64px; border-radius:15px; display:block; }
.panel.cta .ctl{ gap:8px; }
.panel.cta .ctl svg{ width:13px; height:13px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.panel.cta:hover .ctl svg{ transform:translate(1.5px,-1.5px); }
.arcs{ position:absolute; pointer-events:none; }
.arcs circle{ fill:none; stroke:#fff; stroke-width:1; vector-effect:non-scaling-stroke; }

/* ── hero ── */
.hero{ padding-block:clamp(40px,6vw,72px) 0; }
.hero .h1{ max-width:16ch; }
.bento{
  margin-top:clamp(36px,4.5vw,56px);
  display:grid; grid-template-columns:1fr 1.95fr 1.2fr;
  gap:14px;
}
.bento .stack{ display:grid; gap:14px; grid-template-rows:1fr 1fr; }
.bento .tile{ min-height:0; }
@media (max-width:980px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento .stack{ grid-column:span 2; grid-template-rows:none; grid-template-columns:1fr 1fr; }
  .bento .tile{ min-height:150px; }
  .bento .panel.blue{ grid-column:span 2; }
  .bento .panel.cta{ grid-column:span 2; min-height:220px; }
}
@media (max-width:560px){
  .bento .stack{ grid-template-columns:1fr; }
}

/* ── sections ── */
section{ padding-block:clamp(88px,11vw,150px); }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(34px,4vw,52px); }
.grid-ex{ display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:14px; margin-top:clamp(34px,4vw,52px); }
.grid-ex .shot{ grid-row:span 2; border-radius:var(--rl); overflow:hidden; background:var(--surface); min-height:340px; position:relative; }
.grid-ex .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:900px){
  .grid3{ grid-template-columns:1fr 1fr; }
  .grid-ex{ grid-template-columns:1fr; grid-template-rows:none; }
  .grid-ex .shot{ grid-row:auto; aspect-ratio:4/3; min-height:0; }
}
@media (max-width:560px){ .grid3{ grid-template-columns:1fr; } }

/* ── méthode : membranes (section sombre) ── */
.map{ background:var(--bg); color:var(--ink); }
.map-grid{ display:grid; grid-template-columns:280px minmax(0,1fr); column-gap:24px; align-items:center; }
.map .intro{ position:relative; z-index:1; padding-bottom:15px; }
.map .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--grey); margin:0 0 25px; }
.map h2{ font-size:clamp(32px,3.4vw,43px); font-weight:400; line-height:1.13; letter-spacing:-1.65px; margin:0; }
.map .description{ margin:24px 0 0; font-size:14px; line-height:1.65; color:#a4a8b1; max-width:238px; }
.map .materials{ margin-top:56px; color:#868c98; font-size:11px; line-height:1.75; }
.map .materials::before{ content:""; width:24px; height:1px; background:#7c8599; display:block; margin-bottom:13px; }
.scene{ width:100%; aspect-ratio:1; position:relative; isolation:isolate; }
.scene > svg{ display:block; width:100%; height:100%; overflow:visible; }
.membrane-rim{ opacity:.78; }
.axis-line{ stroke:#bac4da; stroke-opacity:.48; stroke-width:1; }
.axis-dot{ fill:#c1c9da; }
.axis-label{ fill:#c5c8cf; font-size:19px; font-family:inherit; font-weight:400; letter-spacing:-.25px; }
.map-nodes{ position:absolute; inset:0; pointer-events:none; }
.mnode{ position:absolute; top:50.26%; transform:translate(-50%,-50%); display:grid; place-items:center; width:16.5%; height:7.3%; border:1px solid #525761; border-radius:999px; background:rgba(18,21,27,.92); font-size:clamp(10px,1.12vw,14px); letter-spacing:-.15px; color:#e0e3e9; }
.mnode:nth-child(1){ left:24%; } .mnode:nth-child(2){ left:40%; width:13.8%; } .mnode:nth-child(3){ left:62%; } .mnode:nth-child(4){ left:81%; }
.mnode.is-active{ background:#5477d4; border-color:#6c90ed; color:#f6f8ff; }
@media (min-width:1500px){ .map-grid{ grid-template-columns:310px minmax(0,1fr); } }
@media (max-width:800px){
  .map-grid{ grid-template-columns:1fr; row-gap:4px; }
  .map .intro{ padding-bottom:0; }
  .map .eyebrow{ margin-bottom:16px; }
  .map h2{ font-size:34px; letter-spacing:-1.2px; max-width:460px; }
  .map h2 br{ display:none; }
  .map .description{ max-width:400px; margin-top:12px; font-size:13px; }
  .map .materials{ display:none; }
  .scene{ max-width:620px; margin:14px auto 0; }
  .mnode{ font-size:clamp(10px,2.1vw,14px); }
}
@media (max-width:450px){
  .map h2{ font-size:30px; }
  .axis-label{ font-size:23px; }
  .mnode{ font-size:9px; border-width:.7px; }
  .mnode:nth-child(1), .mnode:nth-child(3), .mnode:nth-child(4){ width:17%; }
}

/* ── équipe ── */
.team{ margin-top:clamp(34px,4vw,52px); }
.team .lead{ min-height:0; padding:22px 24px; color:var(--grey); font-size:14px; line-height:1.55; max-width:none; }
.team .people{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.person{ background:var(--surface); border-radius:var(--r); padding:14px 14px 24px; display:flex; flex-direction:column; gap:16px; }
.person img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; filter:grayscale(1); }
.person .who{ padding-inline:10px; }
.person h3{ font-size:1.08rem; font-weight:500; letter-spacing:-.02em; }
.person .role{ font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:6px; }
.person p{ color:var(--grey); font-size:14px; margin-top:12px; line-height:1.6; }
@media (max-width:900px){ .team .people{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team .people{ grid-template-columns:1fr; } }

/* ── contact ── */
.contact .panel{ min-height:0; padding:clamp(30px,4vw,52px); gap:34px; }
.contact .big{ font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:400; max-width:16ch; }
.contact .row{ display:flex; flex-wrap:wrap; gap:26px 44px; position:relative; }
.contact .row div{ font-size:.95rem; line-height:1.55; }
.contact .row b{ display:block; font-weight:500; opacity:.72; font-size:.8rem; margin-bottom:4px; }
.contact .row address{ font-style:normal; }
.contact .row a{ font-weight:500; }

footer{ padding:24px 0 40px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--grey); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border-top:1px solid var(--hair); }