/* ============================================================
   TECHSOLUX — landing.css
   Sections de la page d'accueil.
   ============================================================ */

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
#hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;
}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(7,8,11,.72) 0%, transparent 13%),
    radial-gradient(68% 64% at 20% 86%, rgba(7,8,11,.9), transparent 60%),
    linear-gradient(to top, var(--bg) 0%, rgba(7,8,11,.18) 38%, transparent 56%),
    linear-gradient(to bottom, rgba(7,8,11,.62), transparent 22%);
}
.hero__status{ display:inline-flex; align-items:center; gap:9px; }
.hero__status .dot{ width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 10px #3ddc84; animation:pulse 1.8s var(--ease) infinite; }
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vh,90px); }
.hero__meta{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:18px; margin-bottom:clamp(28px,5vh,56px);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase;
}
.hero__title{ font-size:clamp(52px,11.5vw,196px); font-weight:600; line-height:.84; letter-spacing:-.04em; text-transform:uppercase; }
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{ display:inline-block; }
.hero__title .blue{ color:var(--blue); }
.hero__sub{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
  margin-top:clamp(28px,4vh,48px);
}
.hero__sub p{ max-width:40ch; font-size:clamp(16px,1.5vw,20px); line-height:1.5; color:var(--ink-2); margin:0; }
.hero__scroll{ display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.hero__scroll .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pulse 1.8s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; transform:scale(1);} 50%{ opacity:1; transform:scale(1.5);} }

/* ---------- SIDE INDEX (dex) ---------- */
.dex{ position:fixed; right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:18px; }
.dex a{ display:flex; align-items:center; gap:10px; flex-direction:row-reverse; }
.dex a i{ width:7px; height:7px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; transition:.3s var(--ease); }
.dex a .dex__n{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--ink-3);
  opacity:0; transform:translateX(6px); transition:.3s var(--ease); }
.dex a:hover .dex__n{ opacity:1; transform:translateX(0); color:var(--ink-2); }
.dex a:hover i{ border-color:var(--ink); }
.dex a.is-active i{ background:var(--blue); border-color:var(--blue); box-shadow:0 0 10px var(--blue-glow); }
.dex a.is-active .dex__n{ opacity:1; transform:translateX(0); color:var(--blue-2); }
@media (max-width:1100px){ .dex{ display:none; } }

/* ---------- MANIFESTO ---------- */
.manifesto{ position:relative; }
.manifesto__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.manifesto__text{ font-size:clamp(28px,4.2vw,64px); line-height:1.12; font-weight:400; letter-spacing:-.02em; max-width:22ch; }
.manifesto__text .serif{ color:var(--blue-2); }
.manifesto__text em{ font-style:normal; color:var(--ink-3); }
.manifesto__foot{ display:flex; gap:40px; flex-wrap:wrap; margin-top:clamp(40px,5vw,64px); align-items:center; }

/* ---------- SERVICES ---------- */
.services__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.svc{
  position:relative; padding:clamp(28px,3vw,48px); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  min-height:clamp(240px,26vw,360px); display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:background .4s var(--ease);
}
.svc:hover{ background:var(--bg-1); }
.svc__num{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.1em; }
.svc__num b{ color:var(--blue); font-weight:500; }
.svc h3{ font-size:clamp(24px,2.3vw,34px); font-weight:400; line-height:1.02; letter-spacing:0; margin-top:auto; text-transform:uppercase; }
.svc p{ font-size:15px; line-height:1.5; color:var(--ink-2); margin:14px 0 0; max-width:34ch; }
.svc__line{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blue); transition:width .5s var(--ease); }
.svc:hover .svc__line{ width:100%; }
@media (max-width:900px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services__grid{ grid-template-columns:1fr; } }

/* ---------- MARQUEE ---------- */
.marquee{ border-block:1px solid var(--line); padding-block:clamp(28px,3vw,44px); overflow:hidden; }
.marquee__track{ display:flex; gap:0; width:max-content; animation:scroll-x 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:clamp(28px,3vw,56px); padding-inline:clamp(28px,3vw,56px); }
.marquee__item span{ font-family:var(--font-display); font-size:clamp(30px,4.2vw,68px); font-weight:400; letter-spacing:0; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.marquee__item .star{ color:var(--blue); font-family:var(--font-mono); font-size:clamp(20px,2.2vw,34px); }
.marquee__item.dim span{ color:transparent; -webkit-text-stroke:1px var(--ink-3); }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ---------- WORK GRID ---------- */
.work__filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 20px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); color:var(--ink-2);
  cursor:pointer; transition:.3s var(--ease); border-radius:999px;
}
.filter:hover{ color:var(--ink); border-color:var(--ink); }
.filter.is-active{ background:#fff; border-color:#fff; color:#06070B; }
.filter b{ opacity:.6; font-weight:500; margin-left:4px; }

.work__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,28px); }
.work__grid.is-rows{ grid-template-columns:1fr; }
@media (max-width:760px){ .work__grid{ grid-template-columns:1fr; } }

.card{ position:relative; display:block; border:1px solid var(--line); background:var(--bg-1); overflow:hidden; transition:.45s var(--ease); border-radius:14px; }
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none; z-index:5;
}
.card:hover{ border-color:transparent; transform:translateY(-4px); }
.card:hover::after{ opacity:1; }
.card__media{ position:relative; aspect-ratio:16/10; }
.is-rows .card{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; }
.is-rows .card__media{ aspect-ratio:auto; min-height:300px; }
.card__media .ph{ position:absolute; inset:0; }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__num{ position:absolute; top:16px; left:16px; z-index:3; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); letter-spacing:.1em; }
.card__type{ position:absolute; top:16px; right:16px; z-index:3; }
.card__body{ padding:clamp(20px,2vw,32px); display:flex; flex-direction:column; gap:10px; }
.is-rows .card__body{ justify-content:center; gap:16px; }
.card__title{ font-family:var(--font-display); font-size:clamp(24px,2.6vw,38px); font-weight:400; letter-spacing:0; text-transform:uppercase; line-height:1; display:flex; align-items:center; gap:14px; }
.card__title .arr{ font-family:var(--font-mono); color:var(--blue); transition:transform .35s var(--ease); font-size:.7em; }
.card:hover .card__title .arr{ transform:translate(6px,-6px); }
.card__sector{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase; }
.card__sum{ font-size:15px; line-height:1.5; color:var(--ink-2); margin:0; max-width:48ch; }
.is-rows .card__sum{ display:block; }
.card:not(.is-rows-card) .card__sum{ display:none; }
.work__grid.is-rows .card .card__sum{ display:block; }
.card.is-hidden{ display:none; }

/* ---------- STUDIO ---------- */
.studio__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:center; }
.studio__photo{ position:relative; aspect-ratio:4/5; }
.studio__photo .ph{ position:absolute; inset:0; }
.studio__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.studio__photo .badge{ position:absolute; bottom:-1px; left:-1px; background:var(--blue); color:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:10px 16px; }
.studio__body h2{ margin-bottom:28px; }
/* one line on desktop; keep the deliberate two-line break on mobile */
@media (min-width:841px){ .studio__body h2 br{ display:none; } }
.studio__body p{ font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--ink-2); max-width:52ch; margin:0 0 20px; }
.studio__body p strong{ color:var(--ink); font-weight:500; }
.studio__facts{ display:flex; gap:36px; flex-wrap:wrap; margin-top:36px; border-top:1px solid var(--line); padding-top:28px; }
.studio__fact .mono{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:6px; }
.studio__fact b{ font-size:clamp(18px,1.6vw,22px); font-weight:500; }
@media (max-width:840px){ .studio__grid{ grid-template-columns:1fr; } .studio__photo{ max-width:420px; } }

/* ---------- PROCESS ---------- */
.process__list{ border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:120px 1fr 1.2fr; gap:32px; align-items:start;
  padding-block:clamp(28px,3.5vw,52px); border-bottom:1px solid var(--line); transition:background .4s var(--ease);
  position:relative;
}
.step:hover{ background:var(--bg-1); }
.step__num{ font-family:var(--font-mono); font-size:14px; color:var(--blue); letter-spacing:.08em; }
.step h3{ font-size:clamp(26px,2.8vw,42px); font-weight:400; letter-spacing:0; text-transform:uppercase; line-height:1; }
.step p{ font-size:16px; line-height:1.55; color:var(--ink-2); margin:0; max-width:48ch; }
@media (max-width:760px){ .step{ grid-template-columns:1fr; gap:14px; } }

/* ---------- STATS ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.stat{ padding:clamp(28px,3vw,52px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(48px,7vw,104px); font-weight:400; line-height:.9; letter-spacing:0; }
.stat b .u{ color:var(--blue); }
.stat .mono{ display:block; font-size:12px; color:var(--ink-2); letter-spacing:.08em; text-transform:uppercase; margin-top:16px; }
@media (max-width:860px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CONTACT ---------- */
.contact{ position:relative; }
.contact__head{ font-family:var(--font-display); font-size:clamp(44px,8.5vw,150px); font-weight:400; line-height:.86; letter-spacing:0; text-transform:uppercase; }
.contact__head .blue{ color:var(--blue); }
.contact__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(36px,6vw,90px); margin-top:clamp(48px,6vw,80px); align-items:start; }
.contact__lead{ font-size:clamp(18px,1.8vw,24px); line-height:1.5; color:var(--ink-2); max-width:40ch; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; align-items:center; }
.contact__cta .mono{ flex-basis:100%; margin-top:2px; }
.contact__channels{ display:grid; gap:0; border-top:1px solid var(--line); }
.channel{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:20px; border-bottom:1px solid var(--line); transition:.3s var(--ease); }
.channel:hover{ padding-inline:8px; background:var(--bg-1); }
.channel .mono{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; }
.channel b{ font-size:clamp(16px,1.5vw,19px); font-weight:500; }
.channel .arr{ font-family:var(--font-mono); color:var(--blue); }
@media (max-width:840px){ .contact__grid{ grid-template-columns:1fr; } }