/* ═══════════════════════════════════════════════════════════
   Orbitalweb — feuille de style
   Direction : « mission control, en plein jour »
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* couleur */
  --void:      #0B1020;
  --void-2:    #141B33;
  --void-3:    #1E2643;
  --paper:     #F2F2EE;
  --paper-2:   #EAEAE4;
  --card:      #FFFFFF;
  --line:      #DFDDD5;
  --line-dark: rgba(255,255,255,.13);
  --muted:     #6A6F7E;
  --muted-dark:#9AA1B6;
  --ignition:  #FF5A1F;
  --ignition-d:#E64A11;
  --plasma:    #6E56F8;

  /* type */
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "Martian Mono", ui-monospace, "SF Mono", monospace;

  /* mesure */
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(72px, 11vw, 148px);
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;

  /* mouvement */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--void);
  font-family:var(--body);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--ignition); color:#fff; }

:focus-visible{
  outline:2px solid var(--plasma);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--void); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ── 2. Primitives typographiques ──────────────────────── */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.03;
  letter-spacing:-.033em;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 20px;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--ignition); flex:none;
}
.eyebrow--badge{
  display:inline-flex;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 15px 7px 12px;
  color:var(--void);
  box-shadow:0 1px 2px rgba(11,16,32,.05);
  margin-bottom:26px;
}
.eyebrow--badge::before{ display:none; }

.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--ignition); flex:none;
  box-shadow:0 0 0 0 rgba(255,90,31,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,90,31,.5); }
  70%{ box-shadow:0 0 0 9px rgba(255,90,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,90,31,0); }
}

.head{ margin-bottom:clamp(38px,5vw,62px); max-width:820px; }
.head--center{ margin-inline:auto; text-align:center; }
.head--center .eyebrow{ justify-content:center; }
.head__sub{
  margin:20px 0 0; color:var(--muted); font-size:clamp(16px,1.2vw,18.5px); max-width:62ch;
}
.head--center .head__sub{ margin-inline:auto; }

/* ── 3. Boutons ────────────────────────────────────────── */
.btn{
  --btn-bg:var(--void); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  padding:13px 22px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:11px; font-weight:500; letter-spacing:.075em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:transform .3s var(--ease), background-color .25s var(--ease), box-shadow .3s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn__arrow{ width:13px; height:13px; flex:none; transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(2px,-2px); }

.btn--ignite{ --btn-bg:var(--ignition); box-shadow:0 6px 18px -8px rgba(255,90,31,.7); }
.btn--ignite:hover{ --btn-bg:var(--ignition-d); box-shadow:0 12px 26px -10px rgba(255,90,31,.85); }

.btn--dark{ --btn-bg:var(--void); }
.btn--dark:hover{ --btn-bg:var(--void-3); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--void); --btn-bd:var(--line);
}
.btn--ghost:hover{ --btn-bg:var(--card); --btn-bd:var(--void); }

.btn--lg{ padding:16px 27px; font-size:11.5px; }
.btn--full{ width:100%; }

/* ── 4. Défilement continu (témoignages) ───────────────── */
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── 5. Navigation ─────────────────────────────────────── */
.nav{
  position:sticky; top:12px; z-index:50;
  padding-inline:var(--gut);
  margin-top:12px;
  margin-bottom:-70px;
}
.nav__pill{
  position:relative;
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 9px 9px 20px;
  box-shadow:0 1px 2px rgba(11,16,32,.04), 0 14px 34px -22px rgba(11,16,32,.34);
  transition:box-shadow .35s var(--ease), background-color .35s var(--ease);
  overflow:hidden;
}
.nav.is-stuck .nav__pill{
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 2px rgba(11,16,32,.05), 0 18px 44px -20px rgba(11,16,32,.42);
}
.nav__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
}
.nav__progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--ignition),var(--plasma));
  transition:width .12s linear;
}

.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; flex:none;
}
.brand__mark{ width:26px; height:26px; color:var(--void); display:block; }
.brand__mark svg{ width:100%; height:100%; }
.brand__word{
  font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:-.035em;
}
.brand__word em{ font-style:normal; font-weight:500; color:var(--muted); }

.nav__links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav__links a{
  text-decoration:none; padding:8px 13px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:var(--void);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.nav__links a:hover{ background:var(--paper-2); }
.nav__links a.is-active{ color:var(--ignition); }

.nav__end{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav__links + .nav__end{ margin-left:0; }

.lang{
  display:flex; background:var(--paper-2); border-radius:999px; padding:3px;
}
.lang__btn{
  border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em;
  padding:6px 9px; border-radius:999px; color:var(--muted);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.lang__btn.is-on{ background:var(--card); color:var(--void); box-shadow:0 1px 2px rgba(11,16,32,.12); }

.burger{
  display:none; border:1px solid var(--line); background:var(--card);
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:16px; height:1.6px; background:var(--void); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* menu mobile */
.menu{
  position:fixed; inset:0; z-index:45;
  background:var(--paper);
  padding:120px var(--gut) 40px;
  overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__inner{ display:flex; flex-direction:column; gap:2px; max-width:520px; margin-inline:auto; }
.menu__inner a{
  display:flex; align-items:baseline; gap:16px;
  text-decoration:none; padding:16px 4px;
  border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.03em;
}
.menu__inner a em{
  font-family:var(--mono); font-style:normal; font-size:10px; color:var(--ignition);
  letter-spacing:.1em;
}
.menu__cta{
  justify-content:center; margin-top:26px; border-bottom:0 !important;
  font-family:var(--mono) !important; font-size:12px !important; padding:17px !important;
}

/* ── 6. Hero ───────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(104px,13vw,164px) var(--gut) clamp(20px,3vw,40px);
}

/* Les orbites restent, mais en fond : une trace fine, pas un décor. */
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.orbit{
  position:absolute; left:50%; top:min(52%,330px);
  width:min(1240px,116vw); aspect-ratio:2.5/1;
  border:1px solid #D9D7CD; border-radius:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  opacity:0; animation:orbitIn 1.6s var(--ease) .2s forwards;
}
.orbit--in{
  width:min(860px,86vw); aspect-ratio:2.25/1;
  border-style:dashed; border-color:#DCDAD0;
  transform:translate(-50%,-50%) rotate(12deg);
  animation-delay:.4s;
}
@keyframes orbitIn{ to{ opacity:1; } }

.marker{
  position:absolute; left:0; top:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--ignition);
  box-shadow:0 0 0 5px rgba(255,90,31,.16);
  opacity:0; animation:orbitIn .8s var(--ease) 1s forwards;
  will-change:transform;
}

.hero__inner{
  position:relative; z-index:1;
  max-width:var(--wrap); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.hero__h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(38px,7vw,84px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:0; max-width:15ch;
  text-wrap:balance;
}
.hero__h1 span{ display:block; }
.hero__h1b{ position:relative; display:inline-block !important; }
.hero__h1b span{
  display:inline !important;
  background:linear-gradient(180deg,
    transparent 63%, rgba(255,90,31,.24) 63%,
    rgba(255,90,31,.24) 90%, transparent 90%);
}

.hero__sub{
  margin:24px 0 0; max-width:54ch;
  color:var(--muted);
  font-size:clamp(16px,1.25vw,18.5px);
  text-wrap:pretty;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }

/* Une ligne de garanties, séparée par des points : lisible d'un coup d'œil. */
.proofs{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 18px;
  list-style:none; margin:26px 0 0; padding:0;
  color:var(--muted); font-size:13.5px;
}
.proofs li{ display:inline-flex; align-items:center; gap:18px; }
.proofs li + li::before{
  content:""; width:3px; height:3px; border-radius:50%; background:#C4C2B8; flex:none;
}

/* Le visuel produit : ce qu'on vend, montré tout de suite. */
.shot{
  margin:clamp(40px,5.5vw,68px) 0 0;
  width:100%; max-width:1080px;
  animation:shotIn 1s var(--ease) .35s backwards;
}
.shot img{ width:100%; height:auto; }
@keyframes shotIn{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
}

/* ── 8. Sections ───────────────────────────────────────── */
.section{ padding-block:var(--sec); }
.section--paper2{ background:var(--paper-2); }
.section--dark{
  background:var(--void); color:#fff;
}
.section--dark .eyebrow{ color:var(--muted-dark); }
.section--dark .head__sub{ color:var(--muted-dark); }

/* ── 9. Cartes services ────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.card{
  position:relative; overflow:hidden;
  grid-column:span 1;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:#CFCDC4;
  box-shadow:0 24px 50px -30px rgba(11,16,32,.42);
}
.card--lg{ grid-column:span 2; grid-row:span 2; }
.card--wide{ grid-column:span 3; }
.card__cols{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(20px,4vw,64px); align-items:center;
}

.card__top{ display:flex; align-items:center; justify-content:space-between; }
.card__tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ignition);
  border:1px solid rgba(255,90,31,.3); background:rgba(255,90,31,.07);
  padding:5px 10px; border-radius:999px;
}
.card__idx{
  font-family:var(--mono); font-size:10px; color:#C7C5BC; letter-spacing:.08em;
}
.card__h{
  font-family:var(--display); font-weight:700;
  font-size:clamp(21px,2.1vw,29px); letter-spacing:-.032em; line-height:1.1;
  margin:26px 0 0;
}
.card--lg .card__h{ font-size:clamp(25px,2.9vw,38px); }
.card__p{ margin:12px 0 0; color:var(--muted); font-size:15.5px; max-width:52ch; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:20px 0 0; padding:0; }
.chips li{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--muted);
}
.chips--lg li{ font-size:10.5px; padding:9px 15px; background:var(--paper); }

/* illustrations de carte */
.card__art{ margin-top:auto; padding-top:26px; }

/* Sur la grande carte, la maquette occupe toute la hauteur restante. */
.card--lg .card__art{ flex:1; display:flex; }
.card--lg .mock{ flex:1; display:flex; flex-direction:column; }
.card--lg .mock__body{ flex:1; }

.mock{
  border:1px solid var(--line); border-radius:14px 14px 0 0;
  background:var(--paper);
  overflow:hidden;
  margin-bottom:-1px;
  transition:transform .5s var(--ease);
}
.card--lg:hover .mock{ transform:translateY(-5px); }
.mock__bar{ display:flex; gap:5px; padding:11px 13px; border-bottom:1px solid var(--line); background:var(--card); }
.mock__bar i{ width:7px; height:7px; border-radius:50%; background:#D6D4CB; }
.mock__bar i:first-child{ background:var(--ignition); opacity:.6; }
.mock__body{ display:flex; min-height:150px; }
.mock__side{ width:56px; border-right:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:9px; }
.mock__side u{ display:block; height:5px; border-radius:3px; background:#DDDBD2; }
.mock__side u:first-child{ background:var(--ignition); opacity:.55; }
.mock__main{ flex:1; padding:14px; display:flex; flex-direction:column; gap:14px; }
.mock__kpis{ display:flex; gap:8px; }
.mock__kpis b{ flex:1; height:28px; border-radius:7px; background:var(--card); border:1px solid var(--line); }
.mock__chart{
  flex:1 1 auto; display:flex; align-items:flex-end; gap:6px;
  min-height:70px; max-height:158px;
}
.mock__rows{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly;
  border-top:1px solid var(--line); padding-top:10px; min-height:0;
}
.mock__rows p{
  margin:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:5px 0;
}
.mock__rows u{ display:block; height:6px; border-radius:3px; background:#DDDBD2; width:var(--w); }
.mock__rows p:first-child u:last-child{ background:#FFC5A8; }
.mock__chart s{
  flex:1; height:var(--h); border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--void),var(--void-3));
  text-decoration:none;
  transform-origin:bottom; animation:grow .9s var(--ease) backwards;
}
.mock__chart s:nth-child(4){ background:linear-gradient(180deg,var(--ignition),#FF8A54); }
.mock__chart s:nth-child(1){ animation-delay:.05s } .mock__chart s:nth-child(2){ animation-delay:.1s }
.mock__chart s:nth-child(3){ animation-delay:.15s } .mock__chart s:nth-child(4){ animation-delay:.2s }
.mock__chart s:nth-child(5){ animation-delay:.25s } .mock__chart s:nth-child(6){ animation-delay:.3s }
.mock__chart s:nth-child(7){ animation-delay:.35s }
@keyframes grow{ from{ transform:scaleY(0); } }

.card__art--mobile{ position:relative; z-index:0; height:150px; display:flex; justify-content:center; }
.phone{
  position:absolute; bottom:-26px;
  width:104px; height:180px;
  border:1px solid var(--line); border-radius:16px 16px 0 0;
  background:var(--card);
  padding:16px 12px 0;
  transition:transform .5s var(--ease);
}
.phone__notch{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:30px; height:4px; border-radius:3px; background:var(--paper-2);
}
.phone__screen{ display:flex; flex-direction:column; gap:7px; padding-top:4px; }
.phone__screen u{ display:block; height:6px; border-radius:3px; background:#E2E0D7; }
.phone__screen u.w{ width:62%; }
.phone__screen b{ display:block; height:26px; border-radius:7px; background:var(--ignition); margin-top:6px; opacity:.85; }
.phone--back{
  transform:rotate(-9deg) translateX(-52px) translateY(12px);
  background:var(--paper); z-index:-1;
}
.card:hover .phone{ transform:translateY(-6px); }
.card:hover .phone--back{ transform:rotate(-13deg) translateX(-60px) translateY(6px); }

.card__art--board{ padding-top:30px; }
.card__art--board img{
  width:100%; height:auto; border-radius:14px;
  transition:transform .5s var(--ease);
}
.card:hover .card__art--board img{ transform:translateY(-4px); }

.card__art--flow{ margin-top:auto; padding-top:26px; }
.flow{ display:flex; align-items:center; gap:7px; }
.flow span{
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  border:1px solid var(--line); border-radius:8px; padding:8px 9px;
  background:var(--paper); white-space:nowrap;
}
.flow i{
  flex:1; height:1px; background:var(--line); position:relative; min-width:14px;
}
.flow i::after{
  content:""; position:absolute; top:-2px; left:0;
  width:5px; height:5px; border-radius:50%; background:var(--ignition);
  animation:travel 2.6s var(--ease) infinite;
}
.flow i:last-of-type::after{ animation-delay:1.3s; }
@keyframes travel{ 0%{ left:0; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:100%; opacity:0 } }

/* ── 10. Méthode (plan de vol) ─────────────────────────── */
.phases{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--line-dark);
}
.phase{
  padding:30px 22px 34px 0;
  border-right:1px solid var(--line-dark);
  position:relative;
  display:flex; flex-direction:column;
}
.phase:last-child{ border-right:0; }
.phase::before{
  content:""; position:absolute; top:-4px; left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--muted-dark);
}
.phase--orbit::before{ background:var(--ignition); box-shadow:0 0 0 4px rgba(255,90,31,.2); }

.phase__meta{ display:flex; flex-direction:column; gap:3px; margin-bottom:16px; }
.phase__no{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; color:var(--ignition);
}
.phase__when{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--muted-dark);
}
.phase__h{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,1.9vw,25px);
  letter-spacing:-.03em; margin:0 0 10px;
}
.phase__p{ margin:0 0 18px; font-size:14.5px; color:var(--muted-dark); }
.phase__out{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:9.5px; line-height:1.7; letter-spacing:.03em;
  color:var(--muted-dark);
}
.phase__out b{ color:#fff; font-weight:500; display:block; }

/* télémétrie */
.telemetry{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:var(--r);
  overflow:hidden;
  margin-top:clamp(48px,6vw,80px);
}
.tele{
  background:var(--void); padding:clamp(22px,2.6vw,34px);
  display:flex; flex-direction:column; gap:5px;
}
.tele__n{
  font-family:var(--display); font-weight:700; font-size:clamp(34px,4.6vw,54px);
  letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.tele span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-dark);
}

/* ── 11. Réalisations ──────────────────────────────────── */
.works{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px); }
.work{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -32px rgba(11,16,32,.45); }
.work__art{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--g1);
}
.work__art img{
  width:100%; height:auto; display:block;
  transition:transform .8s var(--ease);
}
.work:hover .work__art img{ transform:scale(1.035); }
.work__art--a{ --g1:#0B1020; }
.work__art--b{ --g1:#FF5A1F; }
.work__art--c{ --g1:#6E56F8; }
.work__art--d{ --g1:#1E2643; }
.work__info{ padding:clamp(22px,2.4vw,30px); }
.work__info h3{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,1.9vw,25px);
  letter-spacing:-.03em; margin:0 0 10px;
}
.work__info p{ margin:0; color:var(--muted); font-size:15px; }
.work__tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:18px 0 0; padding:0; }
.work__tags li{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--muted);
}

/* ── 12. Tarifs ────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); align-items:start; }
.plan{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);
  display:flex; flex-direction:column;
}
.plan--star{
  background:var(--void); color:#fff; border-color:var(--void);
  box-shadow:0 30px 60px -34px rgba(11,16,32,.6);
}
.plan__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--ignition); color:#fff;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 13px; border-radius:999px; white-space:nowrap;
}
.plan__h{
  font-family:var(--display); font-weight:700; font-size:clamp(22px,2.2vw,29px);
  letter-spacing:-.032em; margin:0;
}
.plan__d{ margin:10px 0 0; font-size:15px; color:var(--muted); min-height:3em; }
.plan--star .plan__d{ color:var(--muted-dark); }
.plan__price{
  margin:24px 0; padding-bottom:24px; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.plan--star .plan__price{ border-color:var(--line-dark); }
.plan__price span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.plan--star .plan__price span{ color:var(--muted-dark); }
.plan__price b{
  font-family:var(--display); font-weight:700; font-size:clamp(32px,3.6vw,44px);
  letter-spacing:-.04em; line-height:1;
}
.plan__list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.plan__list li{
  position:relative; padding-left:24px; font-size:14.5px; color:var(--muted);
}
.plan--star .plan__list li{ color:#D9DCE6; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:11px; height:6px;
  border-left:1.7px solid var(--ignition); border-bottom:1.7px solid var(--ignition);
  transform:rotate(-45deg);
}
.plans__note{
  text-align:center; margin:38px auto 0; max-width:60ch;
  font-family:var(--mono); font-size:10px; line-height:1.9; letter-spacing:.03em; color:var(--muted);
}

/* ── 13. Témoignages ───────────────────────────────────── */
.quotes{
  margin-top:clamp(38px,5vw,58px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.quotes__track{
  display:flex; gap:16px; width:max-content;
  animation:slide 62s linear infinite;
}
.quotes:hover .quotes__track{ animation-play-state:paused; }
.quote{
  width:clamp(280px,32vw,400px);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,32px);
  margin:0;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
.quote blockquote{
  margin:0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(16px,1.5vw,19px); line-height:1.42; letter-spacing:-.018em;
  text-wrap:pretty;
}
.quote figcaption{ display:flex; flex-direction:column; gap:2px; }
.quote figcaption b{ font-size:14px; font-weight:600; }
.quote figcaption span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; color:var(--muted); text-transform:uppercase;
}

/* ── 14. FAQ ───────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:600;
  font-size:clamp(17px,1.6vw,21px); letter-spacing:-.026em; line-height:1.3;
  transition:color .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--ignition); }
.qa summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1.8px solid var(--void); border-bottom:1.8px solid var(--void);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .35s var(--ease), border-color .25s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg) translateY(-2px); border-color:var(--ignition); }
.qa__a{ padding:0 8% 26px 0; }
.qa__a p{ margin:0; color:var(--muted); font-size:15.5px; }
.qa[open] .qa__a{ animation:fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-6px); } }

/* ── 15. Contact ───────────────────────────────────────── */
.section--contact{ border-radius:var(--r-xl) var(--r-xl) 0 0; }
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:start; }
.contact__lead{ margin:22px 0 0; color:var(--muted-dark); font-size:clamp(15.5px,1.2vw,17.5px); max-width:52ch; }
.contact__facts{ list-style:none; margin:38px 0 0; padding:0; display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; }
.contact__facts li{
  background:var(--void); padding:16px 20px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.contact__facts span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-dark);
}
.contact__facts b{ font-weight:500; font-size:15px; text-align:right; }
.contact__facts a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); }
.contact__facts a:hover{ border-color:var(--ignition); color:var(--ignition); }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  background:var(--void-2); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); padding:clamp(24px,2.6vw,34px);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dark);
}
.field input,.field select,.field textarea{
  background:var(--void); border:1px solid var(--line-dark);
  border-radius:var(--r-sm); padding:13px 15px;
  color:#fff; font-size:15px; font-family:var(--body);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,.field textarea::placeholder{ color:#5C6480; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ignition); outline:none; background:#080D1A;
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239AA1B6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:11px;
  padding-right:38px;
}
.field.is-bad input,.field.is-bad textarea{ border-color:#FF6B5A; }

.form__foot{ margin-top:6px; }
.form__legal{
  margin:14px 0 0; font-family:var(--mono); font-size:9.5px; line-height:1.8;
  letter-spacing:.03em; color:var(--muted-dark); text-align:center;
}
.form__status{
  margin:12px 0 0; font-size:14px; text-align:center; min-height:1.2em;
}
.form__status.is-ok{ color:#5BE0A0; }
.form__status.is-bad{ color:#FF8A7A; }

/* ── 16. Pied de page ──────────────────────────────────── */
.foot{
  background:var(--void); color:#fff;
  padding-block:clamp(48px,6vw,74px) 30px;
  border-top:1px solid var(--line-dark);
}
.foot__grid{
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(38px,5vw,56px);
  border-bottom:1px solid var(--line-dark);
}
.brand--foot .brand__mark{ color:#fff; }
.brand--foot .brand__word em{ color:var(--muted-dark); }
.foot__tag{ margin:18px 0 0; color:var(--muted-dark); font-size:15px; max-width:42ch; }
.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__col h3{
  margin:0 0 5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted-dark); font-weight:500;
}
.foot__col a{ text-decoration:none; font-size:15px; color:#E4E6ED; width:fit-content;
  transition:color .22s var(--ease); }
.foot__col a:hover{ color:var(--ignition); }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-top:26px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; color:var(--muted-dark);
}
.foot__bar p{ margin:0; }
.foot__legal{ display:flex; gap:20px; }
.foot__legal a{ text-decoration:none; }
.foot__legal a:hover{ color:#fff; }

/* ── 17. Révélation au défilement ──────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ── 18. Responsive ────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .phases{ grid-template-columns:repeat(2,1fr); border-top:0; }
  .phase{
    border-right:0; border-top:1px solid var(--line-dark);
    padding:28px 24px 32px 0;
  }
  .phase::before{ top:-4px; }
  .telemetry{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card--lg{ grid-column:span 2; grid-row:auto; }
  .card--wide{ grid-column:span 2; }
  .card__cols{ grid-template-columns:1fr; gap:22px; }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .nav__cta{ display:none; }
  .plans{ grid-template-columns:1fr; }
  .plan--star{ order:-1; }
  .plan__d{ min-height:0; }
  .works{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .card--lg,.card--wide{ grid-column:span 1; }
  .phases{ grid-template-columns:1fr; }
  .phase{ padding:24px 0 28px; }
  .form{ grid-template-columns:1fr; }
  .contact__facts li{ flex-direction:column; align-items:flex-start; gap:4px; }
  .contact__facts b{ text-align:left; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
  .hero__actions{ width:100%; flex-direction:column; margin-top:28px; }
  .hero__actions .btn{ width:100%; }
  .btn--lg{ padding:15px 22px; font-size:10.5px; letter-spacing:.06em; }
  .eyebrow--badge{
    font-size:9.5px; letter-spacing:.09em; padding:8px 14px 8px 11px;
    text-align:center; line-height:1.6;
  }
  /* Empilées, les garanties n'ont plus besoin de séparateurs. */
  .proofs{ flex-direction:column; gap:5px; margin-top:22px; font-size:13px; }
  .proofs li{ gap:0; }
  .proofs li + li::before{ display:none; }
  /* Les orbites n'apportent rien sur un écran étroit : on les retire. */
  .hero__bg{ display:none; }
}

@media (max-width:520px){
  .telemetry{ grid-template-columns:1fr; }
  .quote{ width:min(84vw,340px); }
  .menu__inner a{ font-size:22px; }
}

/* ── 19. Mouvement réduit ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .orbit,.marker,.shot{ opacity:1; }
}