/* =========================================================
   NightBox — site vitrine B2B
   Palette échantillonnée sur le logo officiel.
   ========================================================= */

:root{
  --ink:        #14111F;
  --ink-2:      #46425A;
  --muted:      #7B7791;
  --line:       #ECE9F4;
  --line-2:     #E1DCEE;

  --bg:         #FFFFFF;
  --surface:    #F8F7FC;
  --surface-2:  #F2F0F9;

  --violet:     #6C2BFA;
  --violet-2:   #8B5CFF;
  --violet-ink: #3A0F9E;
  --violet-soft:#F1EAFE;

  --night:      #14111F;
  --night-2:    #1D1830;

  --shadow-sm:  0 1px 2px rgba(20,17,31,.05), 0 4px 14px -6px rgba(20,17,31,.10);
  --shadow-md:  0 2px 6px rgba(20,17,31,.05), 0 18px 40px -18px rgba(58,15,158,.20);
  --shadow-lg:  0 30px 80px -30px rgba(58,15,158,.38);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --pad: clamp(20px, 5vw, 40px);
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }

.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------- Typographie ---------- */

.h1{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(2.15rem, 5.4vw, 3.7rem);
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0 0 .55em;
  text-wrap:balance;
}

.h2{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(1.65rem, 3.6vw, 2.5rem);
  line-height:1.14;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
.h2--light{ color:#fff; }

.lead{
  font-size:clamp(1.06rem, 1.9vw, 1.25rem);
  color:var(--ink-2);
  max-width:34ch;
}
.lead strong{ color:var(--ink); font-weight:600; }

.eyebrow{
  display:inline-block;
  font-size:.755rem;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--violet-ink);
  background:var(--violet-soft);
  border-radius:100px;
  padding:.42em 1em;
  margin:0 0 1.15em;
}
.eyebrow--center{ margin-bottom:1em; }

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto clamp(34px, 5vw, 54px);
}
.section-sub{
  color:var(--muted);
  margin-top:.7em;
  font-size:1.03rem;
}

/* ---------- Boutons ---------- */

.btn{
  --btn-bg:var(--violet);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.005em;
  padding:.85em 1.5em;
  border:0;
  border-radius:100px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .22s ease, background .18s ease, color .18s ease;
}
.btn--sm{ padding:.62em 1.15em; font-size:.93rem; }
.btn--lg{ padding:1.02em 1.9em; font-size:1.06rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{
  background:var(--violet);
  color:#fff;
  box-shadow:0 1px 2px rgba(58,15,158,.24), 0 12px 26px -10px rgba(108,43,250,.55);
}
.btn--primary:hover{
  background:#5A1FE8;
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(58,15,158,.24), 0 18px 34px -12px rgba(108,43,250,.62);
}

.btn--ghost{
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-2), var(--shadow-sm);
}
.btn--ghost:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--violet-2), var(--shadow-sm);
  color:var(--violet-ink);
}

.btn--white{
  background:#fff;
  color:var(--violet-ink);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45);
}
.btn--white:hover{ transform:translateY(-2px); background:#fff; }

.btn__arrow{ width:1em; height:1em; transition:transform .2s ease; }
.btn--ghost:hover .btn__arrow{ transform:translateX(3px); }

.btn:active{ transform:translateY(0); }

/* ---------- Marque ---------- */

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  color:var(--violet);
}
.brand__mark{ width:30px; height:22px; flex:none; }
.brand__word{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.32rem;
  letter-spacing:-.02em;
}
.brand__night{ color:var(--ink); }
.brand__box{ color:var(--violet); }

/* ---------- Nav ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.9);
}
.nav__inner{
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:72px;
}
.nav__links{
  display:flex;
  gap:1.9rem;
  margin-left:auto;
  font-size:.95rem;
  font-weight:450;
  color:var(--ink-2);
}
.nav__links a{ position:relative; padding:.2em 0; }
.nav__links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-3px;
  height:1.5px; background:var(--violet);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* Les enfants de grille ont min-width:auto : un média large peut alors
   élargir toute la page. On neutralise partout. */
.hero__inner > *,
.sim__panel > *,
.managed__inner > *,
.cta__inner > *,
.steps__list > *,
.cards > *,
.form__row > *{ min-width:0; }

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding-top:clamp(48px, 7vw, 88px);
  padding-bottom:clamp(40px, 6vw, 72px);
  overflow:hidden;
}
.hero__glow{
  position:absolute;
  inset:-30% -10% auto -10%;
  height:130%;
  background:
    radial-gradient(46% 40% at 74% 26%, rgba(139,92,255,.20), transparent 68%),
    radial-gradient(40% 34% at 20% 8%,  rgba(108,43,250,.10), transparent 70%),
    linear-gradient(180deg, #FBFAFE 0%, #FFFFFF 62%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:clamp(24px, 4vw, 56px);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

.trustline{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.4rem;
  margin-top:1.9rem;
  font-size:.92rem;
  font-weight:500;
  color:var(--ink-2);
}
.trustline li{ display:inline-flex; align-items:center; gap:.5em; }
.dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 0 3px rgba(108,43,250,.14);
  flex:none;
}
.trustline--light{ color:rgba(255,255,255,.8); margin-top:1.5rem; }
.trustline--light .dot{ background:#C4A6FF; box-shadow:0 0 0 3px rgba(196,166,255,.20); }

.hero__visual{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
  min-width:0;
}
.hero__cloud{
  width:118%;
  max-width:none;
  animation:float 9s ease-in-out infinite;
  /* Le logo est un PNG détouré : ce masque fait disparaître tout résidu
     rectangulaire du détourage et fond le nuage dans le dégradé du hero. */
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 62%, transparent 96%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 62%, transparent 96%);
}
@keyframes float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-13px) }
}

/* ---------- Bénéfices ---------- */

.benefits{ padding:clamp(26px, 4vw, 40px) 0 clamp(52px, 7vw, 84px); }

.cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px, 1.6vw, 20px);
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(20px, 2.2vw, 26px);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#DCD2FA;
  box-shadow:var(--shadow-md);
}
.card__icon{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:12px;
  background:var(--violet-soft);
  color:var(--violet);
  margin-bottom:1rem;
}
.card__icon svg{ width:22px; height:22px; }
.card__title{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.13rem;
  letter-spacing:-.012em;
  margin:0 0 .35em;
}
.card__text{ font-size:.94rem; color:var(--muted); line-height:1.5; }

/* ---------- Simulateur ---------- */

.sim{
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(139,92,255,.10), transparent 70%),
    var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(56px, 8vw, 96px) 0;
}

.sim__panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

.sim__controls{ padding:clamp(24px, 3.4vw, 42px); }

.field + .field{ margin-top:2.1rem; }
.field__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
}
.field__head label{
  font-size:.95rem;
  font-weight:500;
  color:var(--ink-2);
}
.field__value{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.7rem;
  line-height:1;
  color:var(--violet);
  font-variant-numeric:tabular-nums;
}
.field__scale{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:var(--muted);
  margin-top:.5rem;
}

/* range */
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:26px;
  background:transparent;
  cursor:grab;
  display:block;
}
input[type=range]:active{ cursor:grabbing; }
input[type=range]::-webkit-slider-runnable-track{
  height:8px;
  border-radius:100px;
  background:linear-gradient(90deg, var(--violet) var(--fill,25%), var(--surface-2) var(--fill,25%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px; height:26px;
  margin-top:-9px;
  border-radius:50%;
  background:#fff;
  border:2.5px solid var(--violet);
  box-shadow:0 2px 8px rgba(58,15,158,.30);
  transition:transform .15s ease;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.08); }
input[type=range]::-moz-range-track{
  height:8px; border-radius:100px; background:var(--surface-2);
}
input[type=range]::-moz-range-progress{
  height:8px; border-radius:100px; background:var(--violet);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:2.5px solid var(--violet);
  box-shadow:0 2px 8px rgba(58,15,158,.30);
}
input[type=range]:focus-visible{ outline:none; }
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 5px rgba(108,43,250,.22);
}

.presets{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:2rem;
}
.preset{
  background:#fff;
  border:1.5px solid var(--line-2);
  border-radius:100px;
  padding:.5em 1.05em;
  font-size:.88rem;
  font-weight:500;
  color:var(--ink-2);
  cursor:pointer;
  transition:all .18s ease;
}
.preset:hover{ border-color:var(--violet-2); color:var(--violet-ink); }
.preset.is-active{
  background:var(--violet-soft);
  border-color:var(--violet-2);
  color:var(--violet-ink);
  font-weight:600;
}

.breakdown{
  margin:2.1rem 0 0;
  padding-top:1.35rem;
  border-top:1px solid var(--line);
  display:grid;
  gap:.6rem;
}
.breakdown > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.breakdown dt{ font-size:.92rem; color:var(--muted); }
.breakdown dd{
  margin:0;
  font-weight:600;
  font-size:.98rem;
  font-variant-numeric:tabular-nums;
}
.breakdown dd.is-hl{ color:var(--violet); font-weight:700; }

/* résultat */
.sim__result{
  position:relative;
  padding:clamp(28px, 3.6vw, 44px);
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(139,92,255,.55), transparent 60%),
    linear-gradient(160deg, #3A0F9E 0%, #1D1830 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.sim__result-label{
  font-size:.94rem;
  font-weight:500;
  color:rgba(255,255,255,.72);
  letter-spacing:.01em;
}
.sim__big{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(3.5rem, 8.5vw, 5.4rem);
  line-height:1;
  letter-spacing:-.035em;
  margin:.28em 0 0;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px rgba(196,166,255,.45);
}
.sim__cur{ font-size:.5em; letter-spacing:0; }
.sim__period{
  font-size:.95rem;
  color:rgba(255,255,255,.6);
  margin-top:.5em;
}
.sim__tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin-top:1.9rem;
}
.tile{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);
  padding:.9rem .6rem;
}
.tile__val{
  display:block;
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.4rem;
  font-variant-numeric:tabular-nums;
}
.tile__lab{
  display:block;
  font-size:.8rem;
  color:rgba(255,255,255,.6);
  margin-top:.15em;
}
.sim__recap{
  font-size:.9rem;
  color:rgba(255,255,255,.72);
  margin-top:1.5rem;
  margin-bottom:1.5rem;
}
.sim__result .btn{ margin-top:auto; }

.disclaimer{
  max-width:760px;
  margin:clamp(22px,3vw,32px) auto 0;
  text-align:center;
  font-size:.82rem;
  line-height:1.55;
  color:var(--muted);
}

/* ---------- Étapes ---------- */

.steps{ padding:clamp(56px, 8vw, 96px) 0; }
.steps__list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2.4vw, 30px);
  counter-reset:s;
}
.step{
  position:relative;
  padding-top:1.2rem;
}
.step::before{
  content:'';
  position:absolute;
  top:.4rem; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--violet), rgba(108,43,250,.12));
  border-radius:2px;
}
.step__num{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--violet);
  color:#fff;
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  margin:1rem 0 1.1rem;
  box-shadow:0 8px 20px -8px rgba(108,43,250,.7);
}
.step__title{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:-.014em;
  margin:0 0 .4em;
}
.step__text{ color:var(--muted); font-size:.96rem; }

/* ---------- Ce qu'on gère ---------- */

.managed{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(52px, 7.5vw, 90px) 0;
}
.managed__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}
.checks{
  display:grid;
  gap:.1rem;
}
.checks li{
  display:flex;
  align-items:flex-start;
  gap:.85em;
  padding:.72rem 0;
  font-size:1rem;
  font-weight:450;
  border-bottom:1px solid var(--line-2);
}
.checks li:last-child{ border-bottom:0; }
.checks li::before{
  content:'';
  flex:none;
  width:20px; height:20px;
  margin-top:.18em;
  border-radius:50%;
  background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- CTA ---------- */

.cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg, #2A0B78 0%, #14111F 78%);
  color:#fff;
  padding:clamp(56px, 8vw, 100px) 0;
}
.cta__glow{
  position:absolute;
  inset:auto -20% -60% -20%;
  height:120%;
  background:radial-gradient(45% 50% at 30% 20%, rgba(139,92,255,.42), transparent 70%);
  pointer-events:none;
}
.cta__inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px, 5vw, 64px);
  align-items:center;
}
.cta__sub{
  color:rgba(255,255,255,.74);
  margin-top:1em;
  font-size:1.05rem;
  max-width:34ch;
}

/* ---------- Formulaire ---------- */

.form{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:clamp(22px, 2.8vw, 34px);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
}
.form__field{ margin:0 0 .85rem; display:block; }
.form__field label{
  display:block;
  font-size:.83rem;
  font-weight:500;
  color:rgba(255,255,255,.72);
  margin-bottom:.42em;
}
.opt{ color:rgba(255,255,255,.45); font-weight:400; }
.form__field input{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:.82em 1em;
  color:#fff;
  font-size:1rem;
  transition:border-color .18s ease, background .18s ease;
}
.form__field input::placeholder{ color:rgba(255,255,255,.34); }
.form__field input:hover{ border-color:rgba(255,255,255,.28); }
.form__field input:focus{
  outline:none;
  border-color:#B294FF;
  background:rgba(255,255,255,.11);
  box-shadow:0 0 0 4px rgba(139,92,255,.18);
}
.form__field input.is-error{ border-color:#FF8A9B; }
.form .btn{ margin-top:.6rem; }
.form__note{
  min-height:1.2em;
  margin-top:.9rem;
  font-size:.86rem;
  text-align:center;
  color:rgba(255,255,255,.62);
}
.form__note.is-ok{ color:#B6F5D0; }
.form__note.is-err{ color:#FFA9B6; }

/* ---------- Footer ---------- */

.foot{
  background:var(--night);
  color:rgba(255,255,255,.62);
  padding:clamp(34px, 4vw, 48px) 0;
}
.foot__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem 2rem;
}
.brand--foot .brand__night{ color:#fff; }
.brand--foot .brand__box{ color:#A87CFF; }
.brand--foot{ color:#A87CFF; }
.foot__legal{
  flex:1 1 340px;
  font-size:.78rem;
  line-height:1.5;
  display:flex;
  align-items:center;
  gap:.7em;
}
.age{
  flex:none;
  display:grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  font-size:.72rem;
  font-weight:700;
  color:#fff;
}
.foot__meta{ font-size:.78rem; margin-left:auto; }

/* ---------- Animations d'apparition ---------- */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--slow{ transition-delay:.12s; }
.cards .reveal:nth-child(2){ transition-delay:.07s; }
.cards .reveal:nth-child(3){ transition-delay:.14s; }
.cards .reveal:nth-child(4){ transition-delay:.21s; }
.steps__list .reveal:nth-child(2){ transition-delay:.09s; }
.steps__list .reveal:nth-child(3){ transition-delay:.18s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px){
  .cards{ grid-template-columns:1fr 1fr; }
  .nav__links{ display:none; }
}

@media (max-width: 900px){
  .hero{ padding-top:28px; }
  .hero__inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero__copy{ order:2; }
  .hero__visual{ order:1; margin-bottom:.5rem; }
  .hero__cloud{ width:100%; max-width:100%; }
  .lead{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .trustline{ justify-content:center; }

  .sim__panel{ grid-template-columns:1fr; }
  .sim__result{ order:-1; }

  .steps__list{ grid-template-columns:1fr; gap:1.2rem; }
  .step{ display:grid; grid-template-columns:auto 1fr; gap:0 1.1rem; padding-top:0; }
  .step::before{ display:none; }
  .step__num{ grid-row:span 2; margin:.15rem 0 0; }
  .step__title{ align-self:center; }

  .managed__inner{ grid-template-columns:1fr; }
  .cta__inner{ grid-template-columns:1fr; }
  .cta__sub{ margin-inline:auto; }
  .cta__copy{ text-align:center; }
  .trustline--light{ justify-content:center; }
}

.nav__cta .short{ display:none; }

@media (max-width: 560px){
  body{ font-size:16px; }
  .nav__cta .long{ display:none; }
  .nav__cta .short{ display:inline; }
  .brand__word{ font-size:1.18rem; }
  .brand__mark{ width:26px; height:19px; }
  .eyebrow{ font-size:.68rem; letter-spacing:.07em; }
  .cards{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .hero__actions .btn{ width:100%; }
  .sim__panel{ border-radius:var(--r-lg); }
  .foot__inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .foot__meta{ margin-left:0; }
  .field__value{ font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   ANIMATIONS LIÉES AU DÉFILEMENT
   ========================================================= */

/* ---------- Barre de progression de lecture ---------- */
.progress{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:60;
  pointer-events:none;
  background:transparent;
}
.progress span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--violet), var(--violet-2));
  box-shadow:0 0 12px rgba(139,92,255,.7);
  transition:width .12s linear;
}

/* ---------- Hero : léger parallaxe ---------- */
.hero__visual{
  will-change:transform;
  transition:transform .15s linear;
}

/* ---------- Cartes bénéfices : l'icône arrive après la carte ---------- */
.card__icon{
  transform:scale(.7) rotate(-8deg);
  opacity:0;
  transition:transform .5s cubic-bezier(.2,1.3,.4,1) .12s, opacity .4s ease .12s;
}
.card.is-in .card__icon{ transform:none; opacity:1; }

/* ---------- Étapes : progression au défilement ---------- */
.steps__list{ position:relative; }

/* la piste grise remplace le dégradé statique */
.step::before{
  background:var(--line-2);
}
/* le remplissage violet qui se déploie quand l'étape est atteinte */
.step::after{
  content:'';
  position:absolute;
  top:.4rem; left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--violet), var(--violet-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.step.is-active::after{ transform:scaleX(1); }

/* le numéro s'allume */
.step__num{
  background:#fff;
  color:var(--muted);
  box-shadow:inset 0 0 0 2px var(--line-2);
  transition:background .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,1.3,.4,1);
}
.step.is-active .step__num{
  background:var(--violet);
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--violet), 0 8px 20px -8px rgba(108,43,250,.7);
  transform:scale(1.06);
}
/* pulsation unique à l'activation */
.step.is-active .step__num::after{
  content:'';
  position:absolute;
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid var(--violet);
  animation:ping .9s ease-out 1 forwards;
}
.step__num{ position:relative; }
@keyframes ping{
  from{ transform:scale(1);   opacity:.55 }
  to  { transform:scale(2.1); opacity:0   }
}

/* le texte de l'étape se réveille aussi */
.step__title, .step__text{
  transition:color .45s ease, opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  opacity:.45;
  transform:translateY(6px);
}
.step.is-active .step__title,
.step.is-active .step__text{ opacity:1; transform:none; }

/* ---------- Liste « ce qu'on gère » : cochage en cascade ---------- */
.checks li{
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.checks.is-in li{ opacity:1; transform:none; }
.checks.is-in li:nth-child(1){ transition-delay:.05s }
.checks.is-in li:nth-child(2){ transition-delay:.13s }
.checks.is-in li:nth-child(3){ transition-delay:.21s }
.checks.is-in li:nth-child(4){ transition-delay:.29s }
.checks.is-in li:nth-child(5){ transition-delay:.37s }
.checks.is-in li:nth-child(6){ transition-delay:.45s }
.checks li::before{
  transform:scale(.4);
  transition:transform .45s cubic-bezier(.2,1.5,.4,1);
}
.checks.is-in li::before{ transform:none; }

/* ---------- Panneau du simulateur : arrivée ---------- */
.sim__panel{
  transform:translateY(24px) scale(.985);
  opacity:0;
  transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.sim__panel.is-in{ transform:none; opacity:1; }

/* le grand chiffre respire quand il change */
.sim__big{ transition:text-shadow .3s ease; }
.sim__big.is-bump{ animation:bump .32s ease-out; }
@keyframes bump{
  0%  { transform:scale(1) }
  40% { transform:scale(1.035) }
  100%{ transform:scale(1) }
}

/* ---------- Formulaire : champs en cascade ---------- */
.form.is-in .form__field{ animation:fieldIn .55s cubic-bezier(.22,.61,.36,1) backwards; }
.form.is-in .form__row:nth-child(1) .form__field:nth-child(1){ animation-delay:.06s }
.form.is-in .form__row:nth-child(1) .form__field:nth-child(2){ animation-delay:.12s }
.form.is-in .form__row:nth-child(2) .form__field:nth-child(1){ animation-delay:.18s }
.form.is-in .form__row:nth-child(2) .form__field:nth-child(2){ animation-delay:.24s }
@keyframes fieldIn{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}

/* ---------- Mobile : la piste des étapes devient verticale ---------- */
@media (max-width: 900px){
  .step::after{ display:none; }
  .steps__list::before{
    content:'';
    position:absolute;
    left:19px; top:8px; bottom:8px;
    width:2px;
    background:var(--line-2);
    border-radius:2px;
  }
  .steps__list::after{
    content:'';
    position:absolute;
    left:19px; top:8px;
    width:2px;
    height:var(--steps-progress, 0%);
    background:linear-gradient(180deg, var(--violet), var(--violet-2));
    border-radius:2px;
    transition:height .6s cubic-bezier(.22,.61,.36,1);
  }
  .step{ position:relative; z-index:1; }
  .step__num{ background:#fff; }
}

/* ---------- Respect de la préférence système ---------- */
@media (prefers-reduced-motion: reduce){
  .card__icon, .checks li, .checks li::before,
  .step__title, .step__text, .sim__panel{
    opacity:1 !important;
    transform:none !important;
  }
  .step::after{ transform:scaleX(1) !important; }
  .step__num{ background:var(--violet); color:#fff; }
  .step.is-active .step__num::after{ animation:none; }
  .progress span{ transition:none; }
  .hero__visual{ transition:none; }
}

/* =========================================================
   HERO : la machine au premier plan, le logo nuage en halo
   ========================================================= */

.hero__visual{
  align-items:center;
  min-height:clamp(340px, 44vw, 600px);
}

/* halo : le nuage du logo, flouté, derrière la machine */
.hero__cloudbg{
  position:absolute;
  top:8%;
  left:50%;
  width:125%;
  max-width:none;
  transform:translateX(-50%);
  opacity:.42;
  /* flou fort : le nuage doit se lire comme une lueur, jamais comme
     un deuxième logo derrière la machine. */
  filter:blur(22px) saturate(130%);
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 50%, #000 58%, transparent 94%);
          mask-image:radial-gradient(ellipse 60% 56% at 50% 50%, #000 58%, transparent 94%);
  pointer-events:none;
  animation:float 11s ease-in-out infinite reverse;
}

/* la machine */
.hero__machine{
  position:relative;
  z-index:1;
  width:auto;
  height:clamp(330px, 42vw, 580px);
  max-width:100%;
  filter:drop-shadow(0 34px 46px rgba(58,15,158,.30));
  animation:float 9s ease-in-out infinite;
}

@media (max-width: 900px){
  .hero__visual{ min-height:0; }
  .hero__machine{ height:min(46vh, 330px); }
  .hero__cloudbg{ width:150%; opacity:.4; top:14%; }
}

@media (max-width: 560px){
  .hero__machine{ height:min(42vh, 290px); }
}

/* =========================================================
   LOGO : le vrai visuel de marque dans la nav et le footer
   ---------------------------------------------------------
   Le mot « Night » est un néon blanc : il disparaîtrait sur
   un fond clair. Le logo est donc posé sur une tuile nuit,
   comme une enseigne allumée. Le PNG étant détouré, ce fond
   apparaît directement à travers ses zones transparentes.
   ========================================================= */

.brand{ gap:0; }

.brand__logo{
  display:block;
  height:42px;
  width:auto;
  border-radius:11px;
  background:linear-gradient(150deg, #2C2350 0%, #14111F 78%);
  box-shadow:
    0 1px 2px rgba(20,17,31,.20),
    0 8px 22px -10px rgba(108,43,250,.60),
    inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .2s ease, box-shadow .25s ease;
}
.brand:hover .brand__logo{
  transform:translateY(-1px);
  box-shadow:
    0 1px 2px rgba(20,17,31,.20),
    0 12px 26px -10px rgba(108,43,250,.75),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

/* dans le footer, le fond est déjà nuit : la tuile s'effface */
.brand--foot .brand__logo{
  height:38px;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.brand--foot:hover .brand__logo{ transform:none; box-shadow:none; }

@media (max-width: 560px){
  .brand__logo{ height:36px; }
  .brand--foot .brand__logo{ height:34px; }
}

/* la tuile encadre le logo : une marge sombre autour du nuage,
   sinon la texture touche les bords et l'ensemble paraît terne */
.brand__tile{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:13px;
  background:linear-gradient(150deg, #2E2554 0%, #14111F 82%);
  box-shadow:
    0 1px 2px rgba(20,17,31,.22),
    0 9px 24px -11px rgba(108,43,250,.65),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .2s ease, box-shadow .25s ease;
}
.brand:hover .brand__tile{
  transform:translateY(-1px);
  box-shadow:
    0 1px 2px rgba(20,17,31,.22),
    0 13px 28px -11px rgba(108,43,250,.80),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand__tile .brand__logo{
  height:34px;
  border-radius:0;
  background:none;
  box-shadow:none;
  filter:saturate(1.14) contrast(1.05);
}
.brand:hover .brand__tile .brand__logo{ transform:none; }

@media (max-width: 560px){
  .brand__tile{ padding:4px 9px; border-radius:11px; }
  .brand__tile .brand__logo{ height:28px; }
}

/* Le recadrage garde une marge de nuage autour du texte : on l'estompe
   pour que la texture se fonde dans la tuile au lieu de s'y couper net. */
.brand__tile{ padding:3px 6px; }
.brand__tile .brand__logo{
  height:38px;
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 50%, #000 62%, transparent 100%);
          mask-image:radial-gradient(ellipse 74% 66% at 50% 50%, #000 62%, transparent 100%);
}
@media (max-width: 560px){
  .brand__tile .brand__logo{ height:31px; }
}

/* taille finale du logo */
.brand__tile .brand__logo{ height:46px; }
.brand--foot .brand__logo{ height:44px; }
@media (max-width: 560px){
  .brand__tile .brand__logo{ height:36px; }
  .brand--foot .brand__logo{ height:36px; }
}

/* le footer est déjà sombre : pas de tuile, mais le même estompage
   des bords, sinon le recadrage se voit comme un rectangle */
.brand--foot .brand__logo{
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 50%, #000 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 74% 66% at 50% 50%, #000 58%, transparent 100%);
  filter:saturate(1.14) contrast(1.05);
}
.brand--foot .brand__logo{
  -webkit-mask-image:radial-gradient(ellipse 66% 56% at 50% 50%, #000 44%, transparent 100%);
          mask-image:radial-gradient(ellipse 66% 56% at 50% 50%, #000 44%, transparent 100%);
}

/* =========================================================
   LOGO, version fond clair
   ---------------------------------------------------------
   Plus de tuile sombre : le logo est fondu dans le blanc de la
   barre de menu. Les tons réels du nuage sont conservés — c'est
   eux qui font ressortir le néon blanc de « Night » ; sans eux
   le mot disparaîtrait. Les bords du recadrage s'effacent en
   dégradé, donc aucun rectangle visible.
   ========================================================= */

.brand__tile{
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.brand:hover .brand__tile{
  transform:none;
  box-shadow:none;
}
.brand__tile .brand__logo{
  height:54px;
  /* l'estompage est déjà dans le PNG : pas de masque CSS ici */
  -webkit-mask-image:none;
          mask-image:none;
  filter:saturate(1.06) contrast(1.04);
  transition:transform .2s ease;
}
.brand:hover .brand__tile .brand__logo{ transform:translateY(-1px) scale(1.02); }

.brand--foot .brand__logo{
  height:50px;
  -webkit-mask-image:none;
          mask-image:none;
}

@media (max-width: 560px){
  .brand__tile .brand__logo{ height:44px; }
  .brand--foot .brand__logo{ height:44px; }
}

/* =========================================================
   LOGO : le nuage entier
   ---------------------------------------------------------
   Le nuage complet a un ratio de 1,8 : pour que « Nightbox »
   reste lisible, le logo doit être haut. La barre s'agrandit
   donc en haut de page, puis se compacte au défilement.
   ========================================================= */

.nav__inner{ min-height:104px; transition:min-height .3s ease; }
.nav.is-stuck .nav__inner{ min-height:74px; }

.brand__tile .brand__logo{
  height:94px;
  transition:height .3s ease, transform .2s ease;
}
.nav.is-stuck .brand__tile .brand__logo{ height:64px; }
.brand:hover .brand__tile .brand__logo{ transform:translateY(-1px) scale(1.02); }

.brand--foot .brand__logo{ height:82px; }

@media (max-width: 900px){
  .nav__inner{ min-height:88px; }
  .nav.is-stuck .nav__inner{ min-height:66px; }
  .brand__tile .brand__logo{ height:78px; }
  .nav.is-stuck .brand__tile .brand__logo{ height:56px; }
}

@media (max-width: 560px){
  .nav__inner{ min-height:76px; }
  .nav.is-stuck .nav__inner{ min-height:60px; }
  .brand__tile .brand__logo{ height:66px; }
  .nav.is-stuck .brand__tile .brand__logo{ height:50px; }
  .brand--foot .brand__logo{ height:66px; }
}

/* léger renfort de contraste + halo violet : sans ça le nuage
   « flotte » sur le blanc et « Night » manque de présence */
.brand__tile .brand__logo{
  filter:contrast(1.10) saturate(1.14)
         drop-shadow(0 3px 12px rgba(108,43,250,.22));
}
.brand--foot .brand__logo{
  filter:contrast(1.06) saturate(1.12);
}

/* =========================================================
   RÈGLE DES 40 % : la mention doit être lue avant les chiffres
   ========================================================= */

.rule{
  display:inline-block;
  margin-top:1.15em;
  padding:.8em 1.35em;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  font-size:.97rem;
  line-height:1.5;
  color:var(--ink-2);
  max-width:56ch;
}
.rule strong{ color:var(--violet-ink); font-weight:600; }

/* =========================================================
   RÉASSURANCE OPÉRATIONNELLE
   Réponses courtes aux questions qu'un gérant se pose :
   place, installation, réassort, panne, suivi, paiement.
   ========================================================= */

.facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.6vw, 18px);
}
.fact{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px, 2vw, 24px);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fact:hover{
  transform:translateY(-3px);
  border-color:#DCD2FA;
  box-shadow:var(--shadow-md);
}
.fact__icon{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  background:var(--violet-soft);
  color:var(--violet);
  margin-bottom:.9rem;
}
.fact__icon svg{ width:20px; height:20px; }
.fact__title{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:700;
  font-size:1.04rem;
  letter-spacing:-.01em;
  margin:0 0 .3em;
}
.fact__text{
  font-size:.91rem;
  line-height:1.5;
  color:var(--muted);
}

/* la mention conformité occupe toute la largeur : c'est une
   réponse à une objection, pas un avantage de plus */
.fact--wide{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:1.1rem;
  background:linear-gradient(100deg, var(--violet-soft), #fff 60%);
  border-color:#DCD2FA;
}
.fact--wide .fact__icon{ margin-bottom:0; flex:none; }
.fact--wide .fact__title{ margin-bottom:.15em; }

/* les enfants de grille ne doivent pas élargir la page */
.facts > *{ min-width:0; }

/* apparition en cascade */
.facts .reveal:nth-child(2){ transition-delay:.06s }
.facts .reveal:nth-child(3){ transition-delay:.12s }
.facts .reveal:nth-child(4){ transition-delay:.18s }
.facts .reveal:nth-child(5){ transition-delay:.24s }
.facts .reveal:nth-child(6){ transition-delay:.30s }
.facts .reveal:nth-child(7){ transition-delay:.36s }

@media (max-width: 1000px){
  .facts{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .facts{ grid-template-columns:1fr; }
  /* sur mobile la bande conformité redevient une carte normale :
     en flex row le titre se retrouvait comprimé sur quatre lignes */
  .fact--wide{ display:block; }
  .fact--wide .fact__icon{ margin-bottom:.9rem; }
  .fact--wide .fact__title{ margin-bottom:.3em; }
  .rule{ font-size:.92rem; padding:.75em 1.1em; }
}

/* =========================================================
   Formulaire : pot de miel, mention légale, lien de gestion
   ========================================================= */

/* Le pot de miel doit être invisible pour l'humain mais bien
   présent dans le DOM. On ne met pas display:none : certains
   robots ignorent les champs masqués de cette façon. */
.hp{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.form__legal{
  margin-top:.9rem;
  font-size:.74rem;
  line-height:1.5;
  color:rgba(255,255,255,.45);
  text-align:center;
}

/* Discret, mais accessible au clavier et lisible au survol. */
.foot__admin{
  margin-left:.9em;
  font-size:.74rem;
  color:rgba(255,255,255,.22);
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.foot__admin:hover,
.foot__admin:focus-visible{
  color:rgba(255,255,255,.65);
  border-bottom-color:rgba(255,255,255,.3);
}