/* ============================================================
   ALTRION SYSTEMS — style.css
   Bricolage Grotesque (display) · Figtree (body) · Fira Code (mono)
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Palette */
  --ink:         #03050D;
  --ink2:        #060810;
  --surface:     #090D1A;
  --card:        #0B1120;
  --border:      rgba(59,142,253,.09);
  --border-hi:   rgba(59,142,253,.32);

  --blue:        #3B8EFD;
  --blue-dim:    #1C59D2;
  --blue-glow:   rgba(59,142,253,.28);
  --cyan:        #1FD5F5;
  --green:       #18E89A;
  --amber:       #F4A822;
  --red:         #FF3F4A;

  /* Text hierarchy */
  --t1: #EDF3FF;
  --t2: #A8BEDB;
  --t3: #5E7892;
  --t4: #253347;

  /* Fonts */
  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body:    'Figtree', sans-serif;
  --f-mono:    'Fira Code', monospace;

  /* Type scale — fluid, lisibilité optimisée */
  --ts-11: clamp(.72rem,  .7rem  + .1vw,  .82rem);
  --ts-13: clamp(.8rem,   .78rem + .15vw, .92rem);
  --ts-15: clamp(.9rem,   .88rem + .15vw, 1.02rem);
  --ts-17: clamp(1.03rem, .98rem + .28vw, 1.2rem);
  --ts-20: clamp(1.2rem,  1.1rem + .5vw,  1.5rem);
  --ts-28: clamp(1.5rem,  1.2rem + 1.2vw, 2.2rem);
  --ts-42: clamp(2.2rem,  1.5rem + 3vw,   3.6rem);
  --ts-76: clamp(3.4rem,  1.6rem + 7.5vw, 7rem);

  /* Easings */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-sharp: cubic-bezier(.76,0,.24,1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  font-family: var(--f-body);
  font-size: var(--ts-17);
  color: var(--t1);
  background: var(--ink);
  overflow-x: hidden;
  line-height: 1.68;
  cursor: none;
}

@media (pointer: coarse) {
  body { cursor: auto; }
}

img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4 {
  font-family: var(--f-display);
  text-wrap: balance;
  line-height: 1.07;
  letter-spacing: -.025em;
}
p, li { text-wrap: pretty; }
a { text-decoration: none; }
button {
  cursor: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--blue-dim); border-radius: 99px; }
::selection { background: rgba(59,142,253,.22); }

/* ── REDUCED MOTION — accessibilité + perf ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cur-dot {
  position: fixed;
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  will-change: left, top;
}
#cur-ring {
  position: fixed;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(59,142,253,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .4s var(--ease-out), height .4s var(--ease-out), border-color .3s;
  will-change: left, top;
}
body:has(a:hover) #cur-ring,
body:has(button:hover) #cur-ring { width: 54px; height: 54px; border-color: rgba(59,142,253,.85); }
body:has(a:hover) #cur-dot,
body:has(button:hover) #cur-dot  { width: 4px; height: 4px; }

@media (pointer: coarse) {
  #cur-dot, #cur-ring { display: none; }
}

/* ── SCROLL PROGRESS ───────────────────────────────────────── */
#progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 600;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  will-change: width;
}

/* ── BACKGROUND GRID ───────────────────────────────────────── */
#bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(59,142,253,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,142,253,.022) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 10%, transparent 80%);
}

/* ── AMBIENT GLOWS (GPU-friendly, limités au hero) ─────────── */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Pas de blur sur mobile pour les glows — trop coûteux */
@media (min-width: 769px) {
  .glow { filter: blur(140px); }
}
@media (max-width: 768px) {
  .glow { opacity: .5; }
}

/* ── TICKER BAND ───────────────────────────────────────────── */
.ticker-wrap {
  position: relative;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: .6rem 0;
  /* Marquer comme contenu indépendant du layout principal */
  contain: layout style;
}
.ticker-inner {
  display: flex;
  gap: 0;
  animation: ticker 30s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0 2rem;
  font-family: var(--f-mono);
  font-size: var(--ts-11);
  color: var(--t3);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ticker-item::after {
  content: '//';
  color: var(--blue);
  opacity: .45;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── HEADER ────────────────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem,4vw,3rem);
  height: 66px;
  background: rgba(3,5,13,.82);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--border);
  animation: hdr-in .9s var(--ease-out) both;
  will-change: box-shadow;
}
@keyframes hdr-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
header.scrolled { box-shadow: 0 4px 48px rgba(0,0,0,.7); }

/* Logo */
.logo { display: flex; align-items: center; gap: .7rem; cursor: none; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.logo-name {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--t1);
}
.logo-name em { color: var(--blue); font-style: normal; }

/* Nav */
nav { display: flex; align-items: center; gap: 2px; }
nav a {
  font-size: var(--ts-15);
  font-weight: 500;
  color: var(--t3);
  padding: .42rem .78rem;
  border-radius: .5rem;
  letter-spacing: .01em;
  transition: color .2s, background .2s;
  cursor: none;
}
nav a:hover { color: var(--t1); background: rgba(59,142,253,.07); }

.nav-right { display: flex; align-items: center; gap: .75rem; }

.pill-cta {
  font-size: var(--ts-13);
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  padding: .42rem 1.15rem;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  cursor: none;
  transition: box-shadow .25s, transform .2s;
}
.pill-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .3s;
}
.pill-cta:hover::before { opacity: 1; }
.pill-cta:hover { box-shadow: 0 0 22px var(--blue-glow); transform: translateY(-1px); }

.burger { display: none; padding: .45rem; border-radius: .5rem; color: var(--t3); cursor: pointer; }
.burger:hover { color: var(--blue); }

/* ── SECTIONS ──────────────────────────────────────────────── */
section {
  position: relative;
  padding: clamp(5rem,8vw,7rem) clamp(1rem,4vw,3rem);
  overflow: hidden;
}
.inner { max-width: 1120px; margin: 0 auto; }
.alt { background: var(--ink2); }
section + section { border-top: 1px solid var(--border); }

/* Below-fold sections bénéficient du rendu différé */
section:not(#hero) { content-visibility: auto; contain-intrinsic-size: 0 600px; }

/* Section tag */
.stag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: var(--ts-11);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.stag::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--blue);
  display: block;
}

/* Heading reveal */
.sh2 {
  font-size: var(--ts-42);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  margin-bottom: 1rem;
  overflow: hidden;
}
.sh2 .ln {
  display: block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
.sh2.vis .ln { transform: translateY(0); }
.sh2 .ln:nth-child(2) { transition-delay: .1s; }

.rule {
  width: 38px; height: 2.5px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius: 2px;
  margin: 1.2rem 0 2rem;
}
.sdesc {
  font-size: var(--ts-20);
  color: var(--t2);
  max-width: 52ch;
  line-height: 1.78;
}

/* ── HERO ──────────────────────────────────────────────────── */
#hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(66px + 4.5rem) clamp(1rem,4vw,3rem) 4rem;
  text-align: center;
  overflow: hidden;
}
#hero .glow:nth-child(1) {
  width: 900px; height: 900px;
  background: rgba(28,89,210,.16);
  top: -250px; left: -280px;
}
#hero .glow:nth-child(2) {
  width: 650px; height: 650px;
  background: rgba(31,213,245,.06);
  bottom: -120px; right: -220px;
}
#hero .glow:nth-child(3) {
  width: 450px; height: 450px;
  background: rgba(24,232,154,.05);
  top: 38%; right: 4%;
}

.hero-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--ts-11);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(59,142,253,.08);
  border: 1px solid rgba(59,142,253,.2);
  padding: .38rem 1rem;
  border-radius: 999px;
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fu .65s .25s var(--ease-out) both;
}
/* Pulse dot */
.bp {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(24,232,154,.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(24,232,154,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(24,232,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(24,232,154,0); }
}

.hero-h1 {
  position: relative;
  z-index: 2;
  font-size: var(--ts-76);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin-bottom: 1.8rem;
}

/* Per-word clip animation (géré via JS) */
.hw {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  animation: clip-in .7s var(--ease-out) both;
}
@keyframes clip-in {
  to { clip-path: inset(0 0 0% 0); }
}

/* Gradient animé — uniquement sur desktop pour économiser batterie */
.hgrad {
  background: linear-gradient(125deg, var(--blue) 0%, var(--cyan) 42%, var(--green) 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 220% 220%;
}
@media (min-width: 769px) {
  .hgrad { animation: gshift 7s ease-in-out infinite; }
}
@keyframes gshift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

.hero-sub {
  position: relative;
  z-index: 2;
  font-size: var(--ts-20);
  color: var(--t2);
  line-height: 1.82;
  max-width: 590px;
  margin: 0 auto 2.8rem;
  opacity: 0;
  animation: fu .7s .95s var(--ease-out) both;
}
@keyframes fu {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-btns {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fu .7s 1.15s var(--ease-out) both;
}

/* Boutons */
.btn-solid {
  font-size: var(--ts-17);
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  padding: .92rem 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  overflow: hidden;
  cursor: none;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.btn-solid::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.btn-solid:hover::after { opacity: 1; }
.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(59,142,253,.42), 0 0 0 1px rgba(59,142,253,.28);
}

.btn-outline {
  font-size: var(--ts-17);
  font-weight: 600;
  color: var(--t2);
  padding: .92rem 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: none;
  transition: border-color .25s, color .25s, transform .3s var(--ease-out);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }

/* Stats bar */
.stats-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3.5rem;
  margin-top: 5.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
  opacity: 0;
  animation: fu .7s 1.35s var(--ease-out) both;
}
.stat { text-align: center; }
.stn {
  font-family: var(--f-display);
  font-size: var(--ts-42);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--blue);
  display: block;
  line-height: 1;
}
.stl {
  font-size: var(--ts-11);
  color: var(--t3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .4rem;
}

/* ── SERVICE CARDS ─────────────────────────────────────────── */
.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px,100%), 1fr));
  gap: 1.2rem;
  margin-top: 4rem;
}

.sc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  cursor: none;
  /* contain évite les repaints en cascade */
  contain: layout style;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
/* Spotlight intérieur */
.sc::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--cr,59),var(--cg,142),var(--cb,253),.09) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.sc:hover::before { opacity: 1; }
.sc:hover { border-color: var(--border-hi); box-shadow: 0 22px 60px rgba(0,0,0,.35); }

.sc-dot {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sc-c, var(--blue));
  box-shadow: 0 0 10px var(--sc-c, var(--blue));
}
.sc-ico {
  width: 46px; height: 46px;
  border-radius: .75rem;
  background: rgba(59,142,253,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 1.2rem;
  transition: transform .35s var(--ease-out);
}
.sc:hover .sc-ico { transform: scale(1.1) rotate(-4deg); }
.sc-ico svg { width: 21px; height: 21px; }
.sc-title { font-size: var(--ts-20); font-weight: 800; margin-bottom: .55rem; }
.sc-desc  { font-size: var(--ts-15); color: var(--t2); line-height: 1.8; margin-bottom: 1.2rem; }
.sc-list  { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.sc-list li {
  font-size: var(--ts-13);
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sc-list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* Couleurs par service */
.sc[data-c="blue"]  { --sc-c:var(--blue);  --cr:59;  --cg:142; --cb:253; }
.sc[data-c="blue"]  .sc-ico { background: rgba(59,142,253,.1);  color: var(--blue); }
.sc[data-c="cyan"]  { --sc-c:var(--cyan);  --cr:31;  --cg:213; --cb:245; }
.sc[data-c="cyan"]  .sc-ico { background: rgba(31,213,245,.1);  color: var(--cyan); }
.sc[data-c="green"] { --sc-c:var(--green); --cr:24;  --cg:232; --cb:154; }
.sc[data-c="green"] .sc-ico { background: rgba(24,232,154,.1);  color: var(--green); }
.sc[data-c="amber"] { --sc-c:var(--amber); --cr:244; --cg:168; --cb:34;  }
.sc[data-c="amber"] .sc-ico { background: rgba(244,168,34,.1);  color: var(--amber); }
.sc[data-c="red"]   { --sc-c:var(--red);   --cr:255; --cg:63;  --cb:74;  }
.sc[data-c="red"]   .sc-ico { background: rgba(255,63,74,.1);   color: var(--red); }

/* ── REPAIR BANNER ─────────────────────────────────────────── */
.repair-banner {
  margin-top: 4rem;
  background: linear-gradient(115deg, rgba(244,168,34,.07) 0%, rgba(59,142,253,.05) 100%);
  border: 1px solid rgba(244,168,34,.22);
  border-radius: 1.6rem;
  padding: 2.5rem 3rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.repair-banner::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: rgba(244,168,34,.05);
  border-radius: 50%;
  filter: blur(60px);
}
.repair-ico {
  width: 74px; height: 74px;
  border-radius: 1.2rem;
  background: rgba(244,168,34,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  flex-shrink: 0;
}
.repair-ico svg { width: 34px; height: 34px; }
.repair-body { flex: 1; min-width: 200px; }
.repair-title {
  font-family: var(--f-display);
  font-size: var(--ts-28);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: .5rem;
}
.repair-title span { color: var(--amber); }
.repair-desc { font-size: var(--ts-17); color: var(--t2); line-height: 1.78; margin-bottom: 1.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font-size: var(--ts-13);
  font-weight: 500;
  padding: .22rem .62rem;
  border-radius: 999px;
  background: rgba(244,168,34,.08);
  color: var(--amber);
  border: 1px solid rgba(244,168,34,.18);
}
.repair-cta {
  font-size: var(--ts-15);
  font-weight: 700;
  background: var(--amber);
  color: #0f0800;
  padding: .88rem 2rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: none;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.repair-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(244,168,34,.38); }

/* ── PACKS SÉCURITÉ ────────────────────────────────────────── */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px,100%), 1fr));
  gap: 1.4rem;
  margin-top: 4rem;
}
.pack {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  cursor: none;
  contain: layout style;
  transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.pack:hover { border-color: var(--border-hi); box-shadow: 0 14px 44px rgba(0,0,0,.28); transform: translateY(-6px); }
.pack.featured {
  border-color: var(--blue);
  background: linear-gradient(155deg, rgba(28,89,210,.13) 0%, var(--card) 55%);
}
.pack.featured:hover { box-shadow: 0 16px 52px rgba(59,142,253,.22); }
.pack-badge {
  position: absolute;
  top: -1px; right: 1.4rem;
  font-family: var(--f-mono);
  font-size: var(--ts-11);
  font-weight: 500;
  letter-spacing: .1em;
  background: var(--blue);
  color: #fff;
  padding: .22rem .7rem;
  border-radius: 0 0 .5rem .5rem;
}
.pack-name  { font-family: var(--f-display); font-size: var(--ts-28); font-weight: 800; }
.pack-price { font-family: var(--f-display); font-size: var(--ts-28); font-weight: 800; color: var(--blue); }
.pack-price small { font-size: var(--ts-15); color: var(--t3); font-family: var(--f-body); font-weight: 400; }
.pack-desc { font-size: var(--ts-15); color: var(--t2); line-height: 1.72; }
.pack-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.pack-list li { font-size: var(--ts-15); color: var(--t2); display: flex; align-items: flex-start; gap: .7rem; }
.ok { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.no { color: var(--t4);    flex-shrink: 0; margin-top: 2px; }
.pbtn {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  font-size: var(--ts-15);
  font-weight: 700;
  cursor: none;
  transition: transform .3s var(--ease-out), box-shadow .3s, background .2s, border-color .2s;
}
.pbtn:hover { transform: translateY(-2px); }
.pbtn-o { border: 1px solid var(--border); color: var(--t1); }
.pbtn-o:hover { border-color: var(--blue); color: var(--blue); }
.pbtn-f { background: var(--blue); color: #fff; }
.pbtn-f:hover { background: #5BA3FF; box-shadow: 0 8px 24px var(--blue-glow); }

/* ── INTERVENTION STEPS ────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px,100%), 1fr));
  gap: 1.2rem;
  margin-top: 4rem;
  counter-reset: step;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  cursor: none;
  contain: layout style;
  counter-increment: step;
  transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--f-mono);
  font-size: var(--ts-11);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--blue);
  margin-bottom: .7rem;
}
.step::after {
  content: '';
  position: absolute;
  top: -28px; right: -28px;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(59,142,253,.03);
  border: 1px solid rgba(59,142,253,.07);
}
.step:hover { border-color: var(--border-hi); box-shadow: 0 8px 32px rgba(0,0,0,.22); transform: translateY(-4px); }
.step h3 { font-size: var(--ts-17); font-weight: 800; margin-bottom: .48rem; }
.step p  { font-size: var(--ts-15); color: var(--t2); line-height: 1.78; }

/* ── POURQUOI NOUS ─────────────────────────────────────────── */
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.wi { display: flex; gap: 1rem; align-items: flex-start; }
.wi-ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: rgba(59,142,253,.08);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transition: background .3s, transform .35s var(--ease-out);
}
.wi:hover .wi-ico { background: rgba(59,142,253,.16); transform: scale(1.1) rotate(-4deg); }
.wi-ico svg { width: 19px; height: 19px; }
.wi h3 { font-size: var(--ts-17); font-weight: 800; margin-bottom: .35rem; }
.wi p  { font-size: var(--ts-15); color: var(--t2); line-height: 1.74; max-width: 36ch; }

/* ── LOCALISATION ──────────────────────────────────────────── */
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 4rem; align-items: start; }
.linfo { display: flex; flex-direction: column; gap: 1.2rem; }
.lcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .3s, transform .35s var(--ease-out);
}
.lcard:hover { border-color: var(--border-hi); transform: translateX(6px); }
.lcard-ico {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: .7rem;
  background: rgba(59,142,253,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.lcard-ico svg { width: 19px; height: 19px; }
.lcard h4 { font-size: var(--ts-17); font-weight: 800; margin-bottom: .3rem; }
.lcard p, .lcard address { font-size: var(--ts-15); color: var(--t2); line-height: 1.72; font-style: normal; }
.lcard a { color: var(--blue); transition: opacity .2s; }
.lcard a:hover { opacity: .72; }
.lcard-sub { display: block; margin-top: .5rem; font-size: .82rem; }

.map-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  overflow: hidden;
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(59,142,253,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,142,253,.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
.map-content { position: relative; z-index: 1; text-align: center; padding: 3rem; }
.map-pin     { width: 72px; height: 72px; margin: 0 auto 1rem; color: var(--blue); }
.map-content h4 { font-size: var(--ts-20); font-weight: 800; margin-bottom: .45rem; }
.map-content p  { font-size: var(--ts-15); color: var(--t2); }
.map-btn {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: var(--ts-15);
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  padding: .68rem 1.5rem;
  border-radius: 999px;
  cursor: none;
  transition: transform .3s, box-shadow .3s;
}
.map-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--blue-glow); }

/* ── CONTACT ───────────────────────────────────────────────── */
#contact {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(28,89,210,.12) 0%, transparent 60%),
    var(--ink);
}
.cgrid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; margin-top: 4rem; align-items: start; }
.cinfo h3 { font-size: var(--ts-42); font-weight: 800; line-height: 1.16; margin-bottom: 1.25rem; letter-spacing: -.028em; }
.cinfo > p { font-size: var(--ts-17); color: var(--t2); line-height: 1.82; margin-bottom: 2rem; }
.citems { display: flex; flex-direction: column; gap: .9rem; }
.citem { display: flex; align-items: center; gap: .75rem; font-size: var(--ts-15); color: var(--t2); }
.citem-ico {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: .6rem;
  background: rgba(59,142,253,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.citem-ico svg { width: 16px; height: 16px; }

.cform-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 2.4rem;
}
.frow { display: flex; flex-direction: column; gap: .48rem; margin-bottom: 1.2rem; }
.frow label {
  font-size: var(--ts-11);
  font-weight: 600;
  color: var(--t3);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.frow input,
.frow select,
.frow textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .78rem 1rem;
  font: inherit;
  font-size: var(--ts-15);
  color: var(--t1);
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
  -webkit-appearance: none;
}
.frow input::placeholder,
.frow textarea::placeholder { color: var(--t4); }
.frow input:focus,
.frow select:focus,
.frow textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,142,253,.12);
}
.frow textarea { resize: vertical; min-height: 128px; }
.frow select { cursor: pointer; }
.frow select option { background: var(--card); }

.fsubmit {
  width: 100%;
  padding: .98rem;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--ts-17);
  border: none;
  cursor: none;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.fsubmit:hover { background: #5BA3FF; box-shadow: 0 8px 32px var(--blue-glow); transform: translateY(-2px); }
.fsuccess {
  display: none;
  text-align: center;
  padding: 3rem;
  color: var(--green);
  font-family: var(--f-display);
  font-size: var(--ts-28);
  font-weight: 800;
}
.fsuccess-icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 2.8rem clamp(1rem,4vw,3rem);
  background: var(--ink);
}
.foot {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.foot-logo { font-family: var(--f-display); font-weight: 800; font-size: var(--ts-17); color: var(--t1); }
.foot-logo em { color: var(--blue); font-style: normal; }
.foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-links a { font-size: var(--ts-15); color: var(--t4); cursor: none; transition: color .2s; }
.foot-links a:hover { color: var(--blue); }
.foot-copy { font-size: var(--ts-13); color: var(--t4); }

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.rev.vis { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  header { padding: 0 1.25rem; }

  nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 66px; left: 0; right: 0;
    background: rgba(3,5,13,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    gap: 2px;
  }
  nav.open { display: flex; }
  nav a { padding: .72rem 1rem; }

  .burger { display: flex; align-items: center; }
  .pill-cta { display: none; }

  .cgrid, .lgrid { grid-template-columns: 1fr; }
  .wgrid { grid-template-columns: 1fr; }
  .repair-banner { padding: 1.5rem; }

  body { cursor: auto; }

  /* Réduction backdrop-filter sur mobile */
  header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

@media (max-width: 480px) {
  section { padding: 4rem 1.25rem; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .btn-solid, .btn-outline { justify-content: center; }
}