:root{
  --ink:#101828; --muted:#667085; --bg:#0b0f14; --card:#11161d; --line:#1f2937;
  --brand:#0b5fff; --brand-2:#67a8ff; --ok:#12b76a;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.25); --measure:72ch;
  /* Amplitudes de l’animation (garde l’anim complète) */
  --float-up: 30px;   /* monte à -30px */
  --float-down: 23px; /* descend à +23px */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#e5e7eb;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.sr{position:absolute;left:-9999px}

/* NAVBAR */
.nav{position:sticky;top:0;z-index:30;background:rgba(11,15,20,.7);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{ display:flex; align-items:center; height:62px }
.brand{ font-weight:700; letter-spacing:.2px; order:0 }
.nav__links{ order:1; margin-left:auto; display:flex; gap:20px }
.burger{display:none;cursor:pointer}
.burger span, .burger span:before, .burger span:after{display:block;background:#e5e7eb;height:2px;width:22px;border-radius:2px;position:relative}
.burger span:before, .burger span:after{content:"";position:absolute;left:0}
.burger span:before{top:-6px}.burger span:after{top:6px}
#menu-toggle{display:none}

/* NAV mobile : collapsible qui pousse le contenu (pas d'absolute) */
@media (max-width:780px){
  .burger{display:block}

  /* 1) Top-row flexible : marque à gauche, burger à droite + padding latéral */
  .nav__inner{
    height:auto;
    min-height:62px;
    display:flex;
    align-items:center;   /* centré verticalement sur la première ligne */
    flex-wrap:wrap;       /* permet aux liens de passer à la ligne suivante */
    padding-block:8px;
    /* gap gauche/droite avec fallback + notches iPhone */
    padding-inline: max(14px, env(safe-area-inset-left))
                     max(14px, env(safe-area-inset-right));
  }

  .brand{
    order:0;
    flex:1 1 auto;        /* prend l’espace dispo à gauche */
    margin-inline-start:2px; /* micro-espacement esthétique */
  }

  .burger{
    order:1;
    margin-left:auto;     /* pousse le burger totalement à droite */
    margin-inline-end:2px;/* micro-espacement esthétique */
    cursor:pointer;
  }

  /* 2) Le menu déroulant occupe la ligne suivante (100%) */
  .nav__links{
    order:2;
    display:grid;
    gap:6px;
    width:100%;

    /* effondré par défaut, mais avec le même gutter latéral */
    padding: 0
             max(14px, env(safe-area-inset-right))
             0
             max(14px, env(safe-area-inset-left));

    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease, padding .2s ease;
    background:rgba(11,15,20,.97);
    border-bottom:1px solid transparent; /* visible uniquement ouvert */
    justify-items:end;     /* aligne les liens à droite */
    text-align:right;      /* texte à droite */
  }

  #menu-toggle:checked ~ .burger + .nav__links{
    max-height:320px;        /* ajuste si tu ajoutes des liens */
    padding: 12px
             max(14px, env(safe-area-inset-right))
             12px
             max(14px, env(safe-area-inset-left));
    border-bottom-color:var(--line);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
  }

  .nav__links a{ margin:8px 0; }
}


/* HERO */
.hero{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center;min-height:auto;padding:36px 20px; padding-bottom:20px;}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;color:var(--muted);margin:0 0 6px}
.hero h1{font-size:2.25rem;line-height:1.2;margin:.2rem 0 .6rem}
.lead{color:#cbd5e1;max-width:var(--measure)}
.cta{display:flex;gap:12px;margin:16px 0 10px}
.btn{display:inline-block;padding:.72rem 1rem;border:1px solid var(--line);border-radius:12px;background:transparent;color:#e5e7eb;text-decoration:none}
.btn--primary{border-color:transparent;background:linear-gradient(135deg,var(--brand),#4a7dff)}
.btn:hover{text-decoration:none;opacity:.95}
.checks{padding-left:18px;margin:10px 0;color:#cbd5e1}
.checks li{margin:.2rem 0}

.hero__media{display:grid;justify-items:center}
/* réserve de place pour l’animation (évite tout overlap) */
@media (max-width:780px){
  .hero__media{ padding-bottom: calc(var(--float-down) + 24px); }
}

.mockup{width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.mockup__title{height:30px;background:#0f1520;border:1px solid #202a38;border-radius:10px;display:flex;align-items:center;padding:0 10px;margin-bottom:10px;color:#93a4b8;font-size:.9rem}
.mockup__rows .row{display:flex;align-items:center;gap:10px;margin:10px 0}
.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#00d084,#12b76a)}
.bar{flex:1;height:10px;border-radius:6px;background:linear-gradient(90deg,#203047,#2b3e59)}

.float-up{ 
  animation: float 5s ease-in-out infinite; 
  will-change: transform;
}

/* on conserve l’animation complète */
@keyframes float{
  0%   { transform: translateY(18px); }
  46%  { transform: translateY(calc(-1 * var(--float-up))); }
  54%  { transform: translateY(var(--float-down)); }
  100% { transform: translateY(18px); }
}

.muted{color:var(--muted)}

/* GRID & CARDS */
.grid{display:grid;gap:18px;margin:42px 0}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .4rem}

/* PRICING & CONTACT */
.pricing h2,.contact h2{margin:6px 0 12px}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 22px;box-shadow:var(--shadow);display:grid;gap:10px;position:relative}
.price-card ul{margin:0;padding-left:18px;color:#cbd5e1}
.price-card.featured{border-color:#355cff;box-shadow:0 12px 50px rgba(79,113,255,.24)}
.badge{position:absolute;top:10px;right:10px;background:#1b2440;color:#dbe4ff;border:1px solid #394b83;border-radius:999px;padding:.2rem .5rem;font-size:.75rem}

/* CONTACT */
.contact__box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}

/* FOOTER */
.footer{border-top:1px solid var(--line);margin-top:40px}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:70px}
.footer a{margin-left:12px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:.5s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* FEATURES title
   - Desktop : marge négative (style initial)
   - Mobile : marge normale (évite collision visuelle) */
.features h2{ text-align:center; margin:10px 0 14px; }
@media (min-width:781px){
  .features h2{ margin-top:-12px; }
}
.features .grid{ margin-top:10px; }

/* Ancre confortable pour #features sous navbar sticky */
#features{ scroll-margin-top:80px; }