/* ═══════════════════════════════════════════════════════
   2IST Construction — Design V1 (Noir/Blanc)
   DM Sans — police unique, propre et moderne
═══════════════════════════════════════════════════════ */

:root {
  --k:#0D0D0D; --k2:#1E1E1E; --w:#FAFAF8; --c:#F0EDE8; --c2:#E8E5E0;
  --g1:#2A2A2A; --g2:#484848; --g3:#787878; --g4:#BEBBB7; --g5:#E6E3DE; --g6:#F5F3EF;
  --blu:#1E6FFF; --blu2:#1554CC; --blu-lt:rgba(30,111,255,.1);
  --ff:'DM Sans',system-ui,sans-serif; --fs:'DM Sans',system-ui,sans-serif;
  --mx:1340px; --pd:clamp(24px,5.5vw,80px); --pdm:clamp(24px,4vw,56px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--fs); color:var(--k); background:var(--w); overflow-x:hidden; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
img { max-width:100%; display:block }
ul,ol { list-style:none }
input,select,textarea { font-family:inherit }

/* ── Layout ──────────────────────────────── */
.wrap { max-width:var(--mx); margin:0 auto; padding:0 var(--pd) }
.sec { padding:108px 0 }
.sec-lg { padding:148px 0 }
.sec-sm { padding:72px 0 }

/* ── Typography ──────────────────────────── */
.d1 { font-family:var(--ff); font-size:clamp(48px,7.5vw,108px); font-weight:700; line-height:.94; letter-spacing:-.025em }
.d2 { font-family:var(--ff); font-size:clamp(34px,5vw,72px); font-weight:700; line-height:.96; letter-spacing:-.02em }
.h1 { font-family:var(--ff); font-size:clamp(26px,3.2vw,48px); font-weight:600; line-height:1.1; letter-spacing:-.015em }
.h2 { font-family:var(--ff); font-size:clamp(20px,2.4vw,36px); font-weight:600; line-height:1.15; letter-spacing:-.01em }
.h3 { font-family:var(--ff); font-size:clamp(15px,1.7vw,24px); font-weight:500; line-height:1.28 }
.ey { font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blu) }
.body { font-size:15px; line-height:1.82; color:var(--g2) }

/* ── Scroll progress bar ─────────────────── */
#spb { position:fixed; top:0; left:0; right:0; height:2px; background:var(--blu); transform:scaleX(0); transform-origin:left; z-index:999; transition:transform .08s linear }

/* ── Scroll reveal ───────────────────────── */
[data-r] { opacity:0; transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1) }
[data-r=up] { transform:translateY(56px) }
[data-r=left] { transform:translateX(-56px) }
[data-r=right] { transform:translateX(56px) }
[data-r=fade] { transform:scale(.96) }
[data-r=down] { transform:translateY(-30px) }
[data-r].vis { opacity:1; transform:none }
[data-d="1"] { transition-delay:.1s }
[data-d="2"] { transition-delay:.2s }
[data-d="3"] { transition-delay:.3s }
[data-d="4"] { transition-delay:.4s }
[data-d="5"] { transition-delay:.5s }
[data-d="6"] { transition-delay:.6s }

/* ── Text line reveal ────────────────────── */
.trl { overflow:hidden; display:block }
.trl > span { display:block; transform:translateY(110%); transition:transform 1s cubic-bezier(.16,1,.3,1) }
.trl.vis > span { transform:translateY(0) }
.trl.d1 > span { transition-delay:.08s }
.trl.d2 > span { transition-delay:.18s }
.trl.d3 > span { transition-delay:.28s }
.trl.d4 > span { transition-delay:.38s }

/* ── Image curtain ───────────────────────── */
.cx { position:relative; overflow:hidden }
.cx::after { content:''; position:absolute; inset:0; background:var(--w); transform-origin:right; transform:scaleX(1); transition:transform 1.2s cubic-bezier(.77,0,.175,1); pointer-events:none }
.cx.vis::after { transform:scaleX(0) }
.cx-k::after { background:var(--k) }

/* ── Draw line ───────────────────────────── */
[data-r=line] { width:0; height:1.5px; background:var(--blu); transform:none; opacity:1; transition:width 1.2s cubic-bezier(.77,0,.175,1)!important }
[data-r=line].vis { width:100% }
[data-r=line-sm] { width:0; height:1.5px; background:var(--blu); transform:none; opacity:1; transition:width 1s cubic-bezier(.77,0,.175,1)!important }
[data-r=line-sm].vis { width:40px }

/* ── Marquee ─────────────────────────────── */
.mq-wrap { overflow:hidden; white-space:nowrap }
.mq-inner { display:inline-block; animation:mq 36s linear infinite }
@keyframes mq { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ── Parallax ────────────────────────────── */
.par-wrap { overflow:hidden; position:absolute; inset:-80px 0; will-change:transform }
.par-wrap img { width:100%; height:100%; object-fit:cover; display:block }

/* ── Buttons ─────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--fs); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:14px 28px; transition:all .28s; cursor:pointer; border:none; white-space:nowrap; position:relative; overflow:hidden }
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.08); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.77,0,.175,1) }
.btn:hover::before { transform:scaleX(1) }
.btn-k { background:var(--k); color:var(--w) }
.btn-k:hover { background:var(--k2) }
.btn-w { background:var(--w); color:var(--k) }
.btn-w:hover { background:var(--c) }
.btn-ol { background:transparent; border:1.5px solid rgba(255,255,255,.44); color:var(--w) }
.btn-ol:hover { border-color:var(--w); background:rgba(255,255,255,.08) }
.btn-ol-k { background:transparent; border:1.5px solid var(--k); color:var(--k) }
.btn-ol-k:hover { background:var(--k); color:var(--w) }
.btn-blu { background:var(--blu); color:#fff }
.btn-blu:hover { background:var(--blu2) }
.btn-lg { padding:17px 36px; font-size:13px }
.btn-sm { padding:9px 18px; font-size:11px }

/* ── Forms ───────────────────────────────── */
.fld { display:flex; flex-direction:column; gap:5px; margin-bottom:22px }
.fll { font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--g3) }
.finp { border:none; border-bottom:1.5px solid var(--g5); padding:11px 0; font-size:15px; outline:none; background:transparent; color:var(--k); transition:border-color .28s; width:100% }
.finp:focus { border-bottom-color:var(--blu) }
.ftxt { border:1.5px solid var(--g5); padding:12px 14px; font-size:14px; outline:none; background:transparent; resize:vertical; min-height:120px; width:100%; transition:border-color .28s }
.ftxt:focus { border-color:var(--k) }
.fsel { border:none; border-bottom:1.5px solid var(--g5); padding:11px 0; font-size:15px; outline:none; background:transparent; appearance:none; width:100%; cursor:pointer; transition:border-color .28s }
.fsel:focus { border-bottom-color:var(--k) }
.fr2 { display:grid; grid-template-columns:1fr 1fr; gap:22px }

/* ── Pills ───────────────────────────────── */
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
.pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor }
.p-on { background:var(--g6); color:var(--g1) }
.p-go { background:var(--c); color:var(--g1) }
.p-off { background:var(--g5); color:var(--g3) }
.p-bl { background:#E8EFFC; color:#1E50D4 }

/* ── Hover underline ─────────────────────── */
.hul { position:relative }
.hul::after { content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--k); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.77,0,.175,1) }
.hul:hover::after { transform:scaleX(1) }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
#nb { position:fixed; top:0; left:0; right:0; z-index:500; height:68px; display:flex; align-items:center; transition:background .45s,border-color .45s,box-shadow .45s; border-bottom:1px solid transparent }
#nb.solid { background:var(--k); border-bottom-color:rgba(255,255,255,.07) }
#nb.lt { background:var(--w); border-bottom-color:var(--g5); box-shadow:0 1px 0 var(--g5) }
#nb.lt .nbl { color:var(--g2) }
#nb.lt .nbl:hover, #nb.lt .nbl.on { color:var(--k) }
#nb.lt .nbl::after { background:var(--k) }
#nb.lt .nb-nm { color:var(--k) }
#nb.lt .nb-sub { color:var(--g3) }
#nb.lt .nb-login { color:var(--g3) }
#nb.lt .nb-login:hover { color:var(--k) }
#nb.lt .nb-mark { color:var(--k)!important }
.nb-in { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:var(--mx); margin:0 auto; padding:0 var(--pd) }
.nb-logo { display:flex; align-items:center; gap:12px; cursor:pointer; flex-shrink:0 }
.nb-mark { color:#fff; transition:color .45s; flex-shrink:0 }
.nb-nm { font-family:var(--ff); font-size:20px; font-weight:700; color:var(--w); line-height:1; letter-spacing:-.01em; transition:color .45s }
.nb-sub { font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.38); display:block; margin-top:2px; transition:color .45s }
.nb-links { display:flex; gap:0; align-items:center }
.nbl { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.65); letter-spacing:.02em; transition:color .28s; position:relative; padding:8px 18px; cursor:pointer }
.nbl::after { content:''; position:absolute; bottom:0; left:18px; right:18px; height:2px; background:var(--blu); transform:scaleX(0); transition:transform .4s cubic-bezier(.77,0,.175,1); transform-origin:left }
.nbl:hover, .nbl.on { color:var(--w) }
.nbl:hover::after, .nbl.on::after { transform:scaleX(1) }
.nb-drop { position:relative }
.nb-drop > .nbl::before { content:''; display:inline-block; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; margin-left:6px; vertical-align:middle; opacity:.6; transition:transform .28s }
.nb-drop:hover > .nbl::before { transform:rotate(180deg) }
.nb-dmenu { position:absolute; top:calc(100% + 14px); left:-4px; background:var(--w); min-width:220px; border-top:2px solid var(--blu); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .28s,transform .28s,visibility .28s; box-shadow:0 24px 64px rgba(0,0,0,.12); z-index:100 }
.nb-drop:hover .nb-dmenu { opacity:1; visibility:visible; transform:translateY(0) }
.nb-dmi { display:flex; align-items:center; gap:10px; padding:13px 20px; font-size:13.5px; color:var(--g2); border-bottom:1px solid var(--g5); transition:all .22s; cursor:pointer }
.nb-dmi:last-child { border-bottom:none }
.nb-dmi:hover { background:var(--c); color:var(--k); padding-left:26px }
.nb-dmi svg { flex-shrink:0; color:var(--g4); transition:color .22s }
.nb-dmi:hover svg { color:var(--k) }
.nb-r { display:flex; align-items:center; gap:14px }
.nb-login { display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.55); transition:color .28s; cursor:pointer }
.nb-login:hover { color:var(--w) }
/* Logo glitch */
.nb-logo:hover .nb-nm { animation:glitch .45s steps(2) 1 }
@keyframes glitch {
  0%,100% { clip-path:none; transform:none }
  25% { clip-path:inset(30% 0 40% 0); transform:skewX(-5deg) translateX(3px) }
  50% { clip-path:inset(60% 0 10% 0); transform:skewX(4deg) translateX(-2px) }
  75% { clip-path:inset(10% 0 70% 0); transform:skewX(-2deg) translateX(2px) }
}

/* ═══════════════════════════════════════════
   PAGE BANNER (inner pages)
═══════════════════════════════════════════ */
.ph { position:relative; padding:160px 0 88px; overflow:hidden }
.ph-img-wrap { position:absolute; inset:-80px 0; will-change:transform }
.ph-img { width:100%; height:100%; object-fit:cover; display:block }
.ph-ov { position:absolute; inset:0; background:rgba(0,0,0,.55) }
.ph-cnt { position:relative; z-index:1 }
.ph-bc { display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.3); margin-bottom:20px; letter-spacing:.04em }
.ph-bc a { transition:color .25s; cursor:pointer }
.ph-bc a:hover { color:rgba(255,255,255,.7) }
.ph-bc span { color:rgba(255,255,255,.2) }
.ph-tt { font-family:var(--ff); font-size:clamp(36px,5.2vw,68px); font-weight:700; color:var(--w); line-height:1; letter-spacing:-.02em }
.ph-tt em { color:rgba(255,255,255,.42); font-style:italic }
.ph-d { margin-top:16px; font-size:15px; color:rgba(255,255,255,.72); max-width:500px; line-height:1.8 }
.ph-line { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(255,255,255,.2),transparent) }

/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
.hs-wrap { position:relative; overflow:hidden; width:100%; height:100% }
.hs-slide { position:absolute; inset:0; opacity:0; z-index:0; transition:opacity 1.6s ease }
.hs-slide.act { opacity:1; z-index:1 }
.hs-slide img { width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 8s cubic-bezier(.4,0,.2,1) }
.hs-slide.act img { transform:scale(1) }
.hs-nav { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3 }
.hs-dot { width:24px; height:2px; background:rgba(255,255,255,.3); cursor:pointer; transition:all .4s }
.hs-dot.act { width:40px; background:var(--w) }
.hs-count { position:absolute; bottom:28px; right:32px; z-index:3; font-size:11px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.4) }
.hs-count span { color:var(--w) }

/* ═══════════════════════════════════════════
   PROJECT CARDS
═══════════════════════════════════════════ */
.pc { background:var(--w); overflow:hidden; transition:box-shadow .35s; cursor:pointer; position:relative; transform-style:preserve-3d; will-change:transform }
.pc:hover { box-shadow:0 28px 80px rgba(0,0,0,.13) }
.pc:hover .pc-img { transform:scale(1.05) }
.pc-iw { overflow:hidden; height:262px }
.pc-img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.4,0,.2,1) }
.pc-badge { position:absolute; top:14px; left:14px; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:5px 11px }
.pc-b-on { background:var(--k); color:var(--w) }
.pc-b-off { background:rgba(13,13,13,.72); color:var(--w) }
.pc-body { padding:22px 24px 28px }
.pc-cat { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g3); margin-bottom:8px }
.pc-t { font-family:var(--ff); font-size:18px; font-weight:600; margin-bottom:6px; line-height:1.22 }
.pc-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--g3); margin-bottom:18px }
.pc-specs { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--g5); padding-top:16px }
.pc-sv { font-family:var(--ff); font-size:21px; font-weight:600; line-height:1 }
.pc-sl { font-size:10px; color:var(--g4); margin-top:2px; letter-spacing:.04em }
.pc-lnk { display:flex; align-items:center; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--g5); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--k); transition:gap .3s }
.pc-lnk:hover { gap:14px }

/* ═══════════════════════════════════════════
   PROPERTY CARDS
═══════════════════════════════════════════ */
.prop { background:var(--w); overflow:hidden; transition:box-shadow .35s; cursor:pointer; transform-style:preserve-3d; will-change:transform }
.prop:hover { box-shadow:0 28px 72px rgba(0,0,0,.11) }
.prop:hover .prop-img { transform:scale(1.05) }
.prop-iw { position:relative; height:220px; overflow:hidden }
.prop-img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.4,0,.2,1) }
.prop-badge { position:absolute; top:12px; left:12px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px }
.pb-open { background:var(--k); color:var(--w) }
.pb-avail { background:rgba(13,13,13,.8); color:var(--w) }
.pb-soon { background:rgba(13,13,13,.55); color:rgba(255,255,255,.8) }
.pb-sold { background:#9B2020; color:var(--w) }
.prop-fav { position:absolute; top:12px; right:12px; width:30px; height:30px; background:var(--w); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--g3); transition:color .25s }
.prop-fav:hover { color:var(--k) }
.prop-body { padding:18px 20px 22px }
.prop-price { font-family:var(--ff); font-size:22px; font-weight:700; margin-bottom:4px }
.prop-price span { font-size:13px; font-weight:500; color:var(--g3) }
.prop-t { font-size:13.5px; font-weight:600; margin-bottom:5px }
.prop-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--g3); margin-bottom:14px }
.prop-specs { display:flex; gap:14px; border-top:1px solid var(--g5); padding-top:12px; flex-wrap:wrap }
.prop-sp { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--g3) }
.prop-sp b { color:var(--g1); font-weight:600 }
.prop-lnk { display:block; text-align:center; margin-top:14px; padding:9px; border:1.5px solid var(--k); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--k); transition:all .25s }
.prop-lnk:hover { background:var(--k); color:var(--w) }

/* ═══════════════════════════════════════════
   SERVICE ITEMS
═══════════════════════════════════════════ */
.sv-item { border-top:1.5px solid var(--g5); padding:34px 0; transition:border-color .35s; position:relative }
.sv-item::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--k); transition:width 1.1s cubic-bezier(.77,0,.175,1) }
.sv-item:hover { border-top-color:var(--k) }
.sv-item:hover::after { width:100% }
.sv-item:hover .sv-arr { transform:translateX(8px) }
.sv-n { font-family:var(--ff); font-size:12px; font-weight:600; color:var(--blu); margin-bottom:14px }
.sv-t { font-family:var(--ff); font-size:clamp(18px,2.2vw,28px); font-weight:600; margin-bottom:12px; line-height:1.18 }
.sv-d { font-size:14px; color:var(--g2); line-height:1.8; max-width:540px }
.sv-arr { display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-top:20px; color:var(--blu); transition:transform .35s; cursor:pointer }

/* ═══════════════════════════════════════════
   TEAM CARDS
═══════════════════════════════════════════ */
.team-card { overflow:hidden; cursor:pointer; position:relative; transition:box-shadow .5s,transform .45s cubic-bezier(.4,0,.2,1) }
.team-card:hover { box-shadow:0 32px 80px rgba(0,0,0,.2); transform:translateY(-6px) }
.team-card:hover .team-img { transform:scale(1.06) }
.team-img-w { height:360px; overflow:hidden }
.team-img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .8s cubic-bezier(.4,0,.2,1) }
.team-ov { position:absolute; inset:0; background:rgba(13,13,13,.82); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; opacity:0; transition:opacity .4s; z-index:2 }
.team-card:hover .team-ov { opacity:1 }
.team-body { padding:18px 0 0 }
.team-nm { font-family:var(--ff); font-size:20px; font-weight:600; margin-bottom:3px }
.team-role { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--g3) }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#footer { background:var(--k); padding:80px 0 32px }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:56px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.07) }
.ft-desc { font-size:13px; color:rgba(255,255,255,.32); line-height:1.8; max-width:250px; margin:16px 0 24px }
.ft-socs { display:flex; gap:8px }
.ft-soc { width:34px; height:34px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); transition:all .28s; cursor:pointer }
.ft-soc:hover { border-color:var(--w); color:var(--w) }
.ft-col-t { font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:20px }
.ft-lnks { display:flex; flex-direction:column; gap:11px }
.ft-lnk { font-size:13px; color:rgba(255,255,255,.4); transition:all .25s; cursor:pointer; display:inline-block }
.ft-lnk:hover { color:var(--w); padding-left:5px }
.ft-ci { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(255,255,255,.4); margin-bottom:11px }
.ft-ci svg { flex-shrink:0; margin-top:1px; color:rgba(255,255,255,.2) }
.ft-bot { display:flex; align-items:center; justify-content:space-between; padding-top:28px }
.ft-copy { font-size:11px; color:rgba(255,255,255,.18) }
.ft-bl { display:flex; gap:20px }
.ft-bl a { font-size:11px; color:rgba(255,255,255,.18); transition:color .25s; cursor:pointer }
.ft-bl a:hover { color:rgba(255,255,255,.5) }

/* ═══════════════════════════════════════════
   TIMELINE
═══════════════════════════════════════════ */
.tl { display:flex; flex-direction:column }
.tl-ph { display:flex; gap:15px; padding-bottom:22px }
.tl-ph:last-child { padding-bottom:0 }
.tl-line { display:flex; flex-direction:column; align-items:center; flex-shrink:0 }
.tl-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0 }
.tl-done { background:var(--k) }
.tl-curr { background:var(--k); box-shadow:0 0 0 4px rgba(13,13,13,.14); animation:tp 2s infinite }
.tl-pend { background:var(--g5); border:2px solid var(--g4) }
@keyframes tp { 0%,100% { opacity:1 } 50% { opacity:.4 } }
.tl-conn { flex:1; width:1px; margin-top:4px }
.tl-cn-d { background:var(--k) }
.tl-cn-p { background:var(--g5) }
.tl-ct { flex:1 }
.tl-phn { font-weight:600; font-size:14px; margin-bottom:3px }
.tl-phd { font-size:11px; color:var(--g3) }
.tl-phdesc { font-size:13px; color:var(--g3); margin-top:4px; line-height:1.6 }
.pb { height:3px; background:var(--g5); margin-top:8px; overflow:hidden }
.pf { height:100%; background:var(--blu) }

/* ═══════════════════════════════════════════
   TABLES
═══════════════════════════════════════════ */
.tbl { width:100%; border-collapse:collapse }
.tbl th { text-align:left; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--g3); padding:10px 14px; border-bottom:1.5px solid var(--g5); background:var(--c) }
.tbl td { padding:13px 14px; font-size:13.5px; border-bottom:1px solid var(--g5); vertical-align:middle }
.tbl tr:hover td { background:var(--c) }
.tbl tr:last-child td { border-bottom:none }

/* ═══════════════════════════════════════════
   FILTER TABS
═══════════════════════════════════════════ */
.ftabs { display:flex; border-bottom:1px solid var(--g5); margin-bottom:40px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.ftabs::-webkit-scrollbar { display:none }
.ftab { padding:10px 22px; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--g3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .25s; background:none }
.ftab.on { color:var(--k); border-bottom-color:var(--k); font-weight:600 }
.ftab:hover { color:var(--k) }

/* ═══════════════════════════════════════════
   SPLASH LOADER
═══════════════════════════════════════════ */
#splash { position:fixed; inset:0; background:var(--k); z-index:10000; display:flex; align-items:center; justify-content:center; flex-direction:column; transition:clip-path .9s cubic-bezier(.77,0,.175,1); clip-path:inset(0 0 0 0) }
#splash.hiding { clip-path:inset(0 0 100% 0); pointer-events:none }
.sp-path { stroke-dasharray:400; stroke-dashoffset:400; animation:sdraw 1.4s cubic-bezier(.4,0,.2,1) forwards }
@keyframes sdraw { to { stroke-dashoffset:0 } }
.sp-win { opacity:0; animation:sfade .4s ease forwards }
@keyframes sfade { to { opacity:1 } }
.sp-bar-w { width:120px; height:1px; background:rgba(255,255,255,.1); margin-top:32px; overflow:hidden }
.sp-bar { height:100%; background:rgba(255,255,255,.6); width:0; animation:sbar 2s .1s cubic-bezier(.4,0,.2,1) forwards }
@keyframes sbar { to { width:100% } }
.sp-lbl { font-family:var(--fs); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:20px; opacity:0; animation:sfade .6s .8s ease forwards }
.sp-sub { font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.18); margin-top:5px; opacity:0; animation:sfade .6s 1s ease forwards }

/* ═══════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════ */
@media(pointer:fine) {
  body, a, button, .btn, .pc, .prop, .team-card, .sv-item, .nb-logo, .nbl, .ft-soc { cursor:none!important }
}
#cur { position:fixed; width:8px; height:8px; background:var(--w); border-radius:50%; pointer-events:none; z-index:9998; top:0; left:0; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .25s,height .25s; will-change:transform }
#cur-ring { position:fixed; width:36px; height:36px; border:1px solid rgba(255,255,255,.3); border-radius:50%; pointer-events:none; z-index:9997; top:0; left:0; transform:translate(-50%,-50%); opacity:0; transition:width .35s,height .35s,border-color .35s,opacity .4s }
#cur.hov { width:14px; height:14px }
#cur-ring.vis { opacity:1 }
#cur-ring.hov { width:52px; height:52px; border-color:rgba(255,255,255,.15) }
#cur.dn { transform:translate(-50%,-50%) scale(.7) }

/* ── Misc ─────────────────────────────────── */
.bl { width:40px; height:2px; background:var(--blu) }
.bl-w { background:rgba(255,255,255,.5) }
.bl-bl { background:var(--blu) }
.div { height:1px; background:var(--g5) }
.stat-it { transition:background .3s }
.stat-it:hover { background:rgba(255,255,255,.04) }
@keyframes floatY { 0%,100% { transform:translateY(0) rotate(0deg) } 50% { transform:translateY(-9px) rotate(.2deg) } }
.fl { animation:floatY 6s ease-in-out infinite }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px }
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2px }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px }

/* ── Auth (login page) ───────────────────── */
.aw { min-height:100vh; display:grid; grid-template-columns:1fr 1fr }
.ab { position:relative; overflow:hidden; background:var(--k); display:flex; flex-direction:column; justify-content:space-between; padding:48px }
.ab-img { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.2 }
.ab-grid { position:absolute; inset:0; }
.ab-qt { font-family:var(--ff); font-size:clamp(22px,2.5vw,36px); font-weight:600; color:var(--w); line-height:1.3; margin-bottom:12px }
.ab-qt em { color:rgba(255,255,255,.38); font-style:italic }
.ab-qby { font-size:13px; color:rgba(255,255,255,.28) }
.af { display:flex; align-items:center; justify-content:center; padding:48px; background:var(--w) }
.afb { width:100%; max-width:370px }
.af-ttl { font-family:var(--ff); font-size:38px; font-weight:700; margin-bottom:6px; line-height:1 }
.af-sub { font-size:14px; color:var(--g3); margin-bottom:30px }
.af-div { display:flex; align-items:center; gap:12px; margin:22px 0 }
.af-div::before,.af-div::after { content:''; flex:1; height:1px; background:var(--g5) }
.af-div span { font-size:11px; color:var(--g4); letter-spacing:.06em }
.af-foot { text-align:center; margin-top:20px; font-size:13px; color:var(--g3) }
.af-foot a { color:var(--k); font-weight:600; cursor:pointer; border-bottom:1px solid currentColor }

/* ── Alerts ──────────────────────────────── */
.alert-success { background:#EAF4EE; color:#1A5C32; border-left:4px solid #2E8B57; padding:14px 18px; font-size:14px; margin-bottom:20px }
.alert-error { background:#FEE2E2; color:#991B1B; border-left:4px solid #F87171; padding:14px 18px; font-size:14px; margin-bottom:20px }
.alert-error ul { margin:0; padding-left:16px }

/* ═══════════════════════════════════════════
   RESPONSIVE LAYOUT UTILITIES
═══════════════════════════════════════════ */
.ct-grid    { display:grid; grid-template-columns:1fr 1fr }
.pj-layout  { display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start }
.pj-layout-w { display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:start }
.pj-gal     { display:grid; gap:2px; margin-bottom:48px }
.pj-gal-2   { grid-template-columns:1fr 1fr }
.pj-gal-1   { grid-template-columns:1fr }
.pj-specs-g { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:40px }

/* Hamburger */
.nb-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none }
.nb-burger span { display:block; width:22px; height:1.5px; background:rgba(255,255,255,.8); transition:all .3s }
#nb.lt .nb-burger span { background:var(--k) }
.nb-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.nb-burger.open span:nth-child(2) { opacity:0 }
.nb-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }
.nb-mob-menu {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--k); z-index:490; overflow-y:auto;
  padding:16px var(--pd) 32px; flex-direction:column;
}
.nb-mob-menu.open { display:flex }
.nb-mob-link {
  display:block; font-family:var(--ff); font-size:26px; font-weight:600;
  color:rgba(255,255,255,.55); padding:18px 0; border-bottom:1px solid rgba(255,255,255,.06);
  letter-spacing:-.015em; line-height:1;
}
.nb-mob-link:hover { color:var(--w) }
.nb-mob-cta { display:flex; flex-direction:column; gap:12px; margin-top:32px }
.nb-mob-cta .btn { width:100%; justify-content:center }

/* ─── 1100px — Tablette ─────────── */
@media (max-width:1100px) {
  .nbl { padding:8px 12px; font-size:12px }
  .ft-grid { grid-template-columns:1fr 1fr; gap:40px }
  .ft-grid > div:last-child { grid-column:1/-1 }
  .g3 { grid-template-columns:1fr 1fr }
  .g4 { grid-template-columns:1fr 1fr }
  .pj-layout { grid-template-columns:1fr 300px; gap:40px }
  .pj-layout-w { grid-template-columns:1fr 300px; gap:40px }
  .sec-lg { padding:108px 0 }
  .aw { grid-template-columns:1fr }
  .ab { display:none }
  .af { min-height:100vh }
}

/* ─── 768px — Mobile ─────────────── */
@media (max-width:768px) {
  :root { --pd:18px; --pdm:18px }
  .nb-links { display:none }
  .nb-r { display:none }
  .nb-burger { display:flex }

  .sec { padding:56px 0 }
  .sec-lg { padding:80px 0 }
  .sec-sm { padding:44px 0 }

  .g2 { grid-template-columns:1fr !important; gap:16px }
  .g3 { grid-template-columns:1fr !important }
  .g4 { grid-template-columns:1fr 1fr !important; gap:2px }
  .fr2 { grid-template-columns:1fr }

  .ft-grid { grid-template-columns:1fr; gap:28px; padding-bottom:36px }
  .ft-desc { max-width:100% }
  .ft-bot { flex-direction:column; gap:10px; text-align:center }

  .ct-grid { grid-template-columns:1fr }
  .pj-layout { grid-template-columns:1fr; gap:32px }
  .pj-layout-w { grid-template-columns:1fr; gap:32px }
  .pj-specs-g { grid-template-columns:1fr 1fr }
  .pj-gal-2 { grid-template-columns:1fr }

  .ph { padding:120px 0 56px }
  .ph-tt { font-size:clamp(32px,8vw,52px) }
  .ph-d { font-size:14px }

  .d1 { font-size:clamp(36px,9vw,64px) }
  .d2 { font-size:clamp(26px,7vw,44px) }
  .h1 { font-size:clamp(20px,5vw,32px) }
  .h2 { font-size:clamp(17px,4vw,26px) }

  .team-img-w { height:280px }
}

/* ─── 480px — Petit mobile ────────── */
@media (max-width:480px) {
  :root { --pd:14px }
  .g4 { grid-template-columns:1fr !important }
  .pj-specs-g { grid-template-columns:1fr }
  .btn-lg { padding:14px 22px; font-size:12px }
  .ph { padding:100px 0 44px }
  .sec { padding:44px 0 }
  .team-img-w { height:220px }
  .d1 { font-size:clamp(36px,10vw,52px) }
}

/* ═══════════════════════════════════════════
   GRILLES DE PAGE — remplacent inline styles
═══════════════════════════════════════════ */
.v1-hero        { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center }
.v1-hero-slider { position:absolute; inset:0; z-index:1 }
.v1-hero-ovl    { position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom,rgba(0,0,0,.68) 0%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.62) 100%) }
.v1-hero-cnt    { position:relative; z-index:3; text-align:center; padding:0 clamp(24px,6vw,80px); max-width:900px; width:100%; transform:translateY(-12%) }
.v1-stats       { display:grid; grid-template-columns:repeat(4,1fr) }
.v1-svc-layout  { display:grid; grid-template-columns:1fr 1.65fr; gap:88px; align-items:start }
.v1-g3          { display:grid; grid-template-columns:repeat(3,1fr); gap:2px }
.v1-g4          { display:grid; grid-template-columns:repeat(4,1fr); gap:2px }
.v1-g2-wide     { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.v1-g2-imgs     { display:grid; grid-template-columns:1fr 1fr; gap:2px }
.v1-g2-why      { display:grid; grid-template-columns:1fr 1fr }
.v1-g2-abt      { display:grid; grid-template-columns:1fr 2fr; min-height:520px }
.v1-feat-hd     { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px }
.v1-cta-btns    { display:flex; justify-content:center; gap:14px }
.v1-svc-item    { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:72px 0 }
.v1-svc-item.brd { border-bottom:1px solid var(--g5) }

/* ─── 1024px ────────────────────────────── */
@media (max-width:1024px) {
  .v1-svc-layout { grid-template-columns:1fr; gap:48px }
  .v1-g4         { grid-template-columns:1fr 1fr }
  .v1-g2-abt     { grid-template-columns:1fr 1fr; min-height:auto }
  .v1-svc-sticky { position:static !important }
}

/* ─── 768px ─────────────────────────────── */
@media (max-width:768px) {
  .v1-hero { min-height:100svh }
  .v1-hero-cnt { transform:translateY(0); padding:0 20px }
  .fl { display:none !important }
  .v1-stats      { grid-template-columns:1fr 1fr }
  .v1-svc-layout { gap:36px }
  .v1-g3         { grid-template-columns:1fr 1fr }
  .v1-g4         { grid-template-columns:1fr 1fr }
  .v1-g2-wide    { grid-template-columns:1fr; gap:36px }
  .v1-g2-imgs    { grid-template-columns:1fr }
  .v1-g2-why     { grid-template-columns:1fr; min-height:auto }
  .v1-g2-why > div:first-child { min-height:56vw }
  .v1-g2-abt     { grid-template-columns:1fr; min-height:auto }
  .v1-g2-abt > div:first-child { height:56vw }
  .v1-feat-hd    { flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:32px }
  .v1-cta-btns   { flex-direction:column; align-items:center }
  .v1-svc-item   { grid-template-columns:1fr; gap:28px; padding:44px 0 }
  .v1-svc-item:nth-child(even) > div:first-child { order:1 }
}

/* ─── 480px ─────────────────────────────── */
@media (max-width:480px) {
  .v1-g3         { grid-template-columns:1fr }
  .v1-g4         { grid-template-columns:1fr }
  .v1-feat-hd .btn { display:none }
  .v1-feat-hd + * + a.btn { display:block; margin-top:24px }
  .v1-svc-item img { max-height:280px !important }
  .ct-stats-grid { grid-template-columns:1fr !important }
}

/* ─── 360px — Très petit écran ──────────── */
@media (max-width:360px) {
  .nb-mob-link { font-size:18px }
}

/* ─── Filtres V1 mobile ──────────────────── */
@media (max-width:640px) {
  .ftabs { flex-wrap:nowrap; margin-bottom:28px; }
  .ftab  { white-space:nowrap; flex-shrink:0; padding:10px 14px; }
}