:root{
  --text:#0b0f17;
  --muted:rgba(11,15,23,.62);
  --line:rgba(11,15,23,.10);

  --accent:#ec6432;
  --accent-soft:rgba(236,100,50,.12);

  --radius:22px;
  --radius-sm:14px;

  --shadow-soft:0 10px 30px rgba(11,15,23,.06);

  --fs-hero: clamp(2rem, 4.2vw, 3.5rem);
  --fs-h2: clamp(2rem, 3.2vw, 2.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Police “numérique premium” */
  --font-digital: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(11,15,23,.06), transparent 60%),
    radial-gradient(800px 520px at 88% 20%, rgba(11,15,23,.05), transparent 60%),
    radial-gradient(720px 420px at 50% 0%, var(--accent-soft), transparent 55%),
    #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.6;
  overflow-x:hidden;
}

.container{ width:min(1100px, calc(100% - 56px)); margin:0 auto; }
.container--wide{ width:min(1320px, calc(100% - 56px)); margin:0 auto; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* HERO */
.hero{ padding:78px 0 54px; }
.hero__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:34px;
  align-items:center;
}
.hero__media{ display:flex; justify-content:center; align-items:center; }
.hero__img{
  width:min(520px,100%);
  height:auto;
  display:block;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 18px 40px rgba(11,15,23,.14));
}
.hero__content{ display:grid; gap:14px; justify-items:start; }

/* Brand : uniquement logo2.png */
.hero__brand{
  display:inline-flex;
  align-items:center;
  user-select:none;
}
.brand__logo2{
  height: 250px;
  width: auto;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(11,15,23,.10));
}

/* Titre */
.hero__title{
  margin:0;
  line-height:1.05;
  letter-spacing:-1px;
  max-width: 28ch;
  display:grid;
  gap: 10px;
}

.hero__product{
  font-family: var(--font-digital);
  font-weight: 700;
  font-size: clamp(3.2rem, 6.2vw, 5.2rem);
  letter-spacing: -1.6px;
  line-height: 1;
  color: rgba(11,15,23,.92);
  text-transform: none;
  position: relative;
}

.hero__product::after{
  content:"";
  display:block;
  width: min(220px, 42%);
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(236,100,50,.95), rgba(236,100,50,0));
}

.hero__headline{
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: rgba(11,15,23,.78);
  letter-spacing: -0.2px;
  line-height: 1.55;
}

.hero__tagline{
  margin:0;
  font-size: var(--fs-body-lg);
  color: rgba(11,15,23,.72);
}
.hero__tagline::before{
  content:""; display:inline-block;
  width:10px; height:10px; border-radius:999px;
  margin-right:10px;
  background:rgba(236,100,50,.85);
  box-shadow:0 0 0 7px rgba(236,100,50,.10);
  vertical-align:middle;
}
.hero__cta{ margin-top:8px; }

/* Sections */
.section{ padding:56px 0; }
.section--soft{
  background:linear-gradient(180deg, rgba(246,247,251,1) 0%, rgba(255,255,255,1) 100%);
  border-top:1px solid rgba(11,15,23,.06);
  border-bottom:1px solid rgba(11,15,23,.06);
}
.section__title{
  margin:0 0 18px;
  font-size: var(--fs-h2);
  letter-spacing:-.6px;
  text-align:center;
}
.section__title--left{ text-align:left; margin-bottom:14px; }

/* Text */
.lead{
  margin:0;
  color:rgba(11,15,23,.72);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
}
.sublead{
  margin:10px 0 0;
  color:rgba(11,15,23,.62);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
}
.lead--center{ text-align:center; max-width:74ch; margin:0 auto; }
.blockhead{ max-width:980px; margin:0 auto 18px; }

/* Form */
.form{
  border:1px solid rgba(11,15,23,.10);
  border-radius:var(--radius);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow-soft);
  padding:22px;
  max-width:860px;
  margin:0 auto;
}
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field__label{ font-size: var(--fs-small); color:rgba(11,15,23,.78); font-weight:500; letter-spacing:.2px; }
.field__input{
  border:1px solid rgba(11,15,23,.14);
  border-radius:14px;
  padding:12px;
  font-size: var(--fs-body);
  outline:none;
  background:rgba(255,255,255,.92);
}
.field__input:focus{ border-color:rgba(11,15,23,.26); box-shadow:0 0 0 7px var(--accent-soft); }
.field__input--error{ border-color:rgba(180,30,30,.45); box-shadow:0 0 0 7px rgba(180,30,30,.06); }
.field__error{ color:rgba(180,30,30,.92); font-size: var(--fs-small); }
.field--actions{ grid-column:1/-1; margin-top:6px; }

/* Value bloc */
.value{
  padding:72px 0;
  background:linear-gradient(180deg, rgba(246,247,251,1) 0%, rgba(255,255,255,1) 100%);
  border-top:1px solid rgba(11,15,23,.06);
  border-bottom:1px solid rgba(11,15,23,.06);
}
.value__wrap{ max-width:1100px; margin:0 auto; }
.value__grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; position:relative; padding:34px 0; }
.value__grid::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:linear-gradient(180deg, transparent, rgba(11,15,23,.10), transparent);
  transform:translateX(-.5px);
}
.value__title{ margin:0 0 14px; font-size: 1.25rem; letter-spacing:-.2px; }
.value__title::after{
  content:""; display:block; width:54px; height:2px; margin-top:10px;
  background:linear-gradient(90deg, rgba(236,100,50,.85), rgba(236,100,50,0));
}
.value__list{
  margin:0;
  padding-left:18px;
  color:rgba(11,15,23,.72);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
}
.value__list li{ margin:8px 0; }
.value__list li::marker{ color:rgba(236,100,50,.85); }

/* Split + stats */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; max-width:1100px; margin:0 auto; }
.stats{
  border:1px solid rgba(11,15,23,.08);
  border-radius:var(--radius);
  background:rgba(255,255,255,.65);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
.stat{ padding:14px 10px; border-bottom:1px solid rgba(11,15,23,.08); }
.stat:last-child{ border-bottom:0; }
.stat__value{ font-size: 3rem; font-weight:760; letter-spacing:-1px; line-height:1; }
.stat__unit{ font-size: 1.25rem; font-weight:740; color:rgba(11,15,23,.78); margin-left:4px; }
.stat__label{ margin-top:8px; color:rgba(11,15,23,.66); font-size: var(--fs-body); line-height: 1.6; }
.stat--small .stat__hint{ color:rgba(11,15,23,.62); font-size: var(--fs-body); line-height: 1.6; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(11,15,23,.12);
  cursor:pointer;
  font-weight:740;
  font-size: var(--fs-body);
  letter-spacing:.2px;
  transition:transform .08s ease, opacity .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--text); color:#fff; border-color:rgba(11,15,23,.30);
  box-shadow:0 12px 30px rgba(11,15,23,.12);
}
.btn--primary:hover{
  opacity:.93;
  box-shadow:0 12px 30px rgba(11,15,23,.14), 0 0 0 7px rgba(236,100,50,.08);
}
.btn--full{ width:100%; }

/* Alerts */
.alert{
  border-radius:var(--radius-sm);
  border:1px solid rgba(11,15,23,.10);
  padding:12px 14px;
  margin:0 auto 14px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow-soft);
  max-width:860px;
  font-size: var(--fs-body);
}
.alert--success{ border-color:rgba(20,120,70,.20); background:rgba(20,120,70,.06); }

/* Écrans (sans cadre / non tronqués) */
.screens{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 22px auto 0;
}
.screen{
  display:grid;
  gap: 16px;
  align-content:start;
}
.screen__img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 20px 55px rgba(11,15,23,.14));
}
.screen__copy{ text-align: center; }
.screen__title{
  margin: 2px 0 10px;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
}
.screen__list{
  margin: 0 auto;
  padding-left: 18px;
  max-width: 46ch;
  color: rgba(11,15,23,.70);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  text-align: left;
}
.screen__list li{ margin: 7px 0; }
.screen__list li::marker{ color: rgba(236,100,50,.85); }

/* Footer */
.footer{ padding:26px 0 40px; }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  color:rgba(11,15,23,.52);
  font-size: var(--fs-small);
}
.footer__link{ color:rgba(11,15,23,.62); text-decoration:none; }
.footer__link:hover{
  color:rgba(11,15,23,.80);
  text-decoration:underline;
  text-decoration-color:rgba(236,100,50,.55);
  text-underline-offset:4px;
}

/* SAV */
.support-section{
  padding: 6rem 0;
  background: linear-gradient(135deg, #0b0f17 0%, #233145 100%);
  color: #fff;
}
.support-content{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}
.support-title{
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: -0.6px;
}
.support-description{
  font-size: var(--fs-body-lg);
  opacity: 0.9;
  max-width: 62ch;
  line-height: 1.8;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 600;
  font-size: var(--fs-body);
  transition: all .3s ease;
  white-space: nowrap;
}
.btn-outline:hover{
  background: #fff;
  color: #0b0f17;
}

/* Responsive */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__content{ justify-items:center; text-align:center; }

  .hero__title{ max-width: 40ch; }
  .hero__headline{ text-align:center; }

  .form__grid{ grid-template-columns:1fr; }
  .value__grid{ grid-template-columns:1fr; gap:26px; }
  .value__grid::after{ display:none; }
  .split{ grid-template-columns:1fr; }

  .container, .container--wide{ width:min(1320px, calc(100% - 40px)); }
  .hero{ padding-top:56px; }

  .screens{ grid-template-columns:1fr; }

  .support-content{
    flex-direction: column;
    text-align: center;
  }
  .support-description{ max-width: 70ch; }
}

@media (max-width:480px){
  :root{
    --fs-hero: 2rem;
    --fs-h2: 2rem;
  }
  .hero__product{ font-size: 3.0rem; }
}
/* FAQ (SEO + design) */
.faq{ max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item{
  border: 1px solid rgba(11,15,23,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
}
.faq__q{
  cursor: pointer;
  font-weight: 650;
  color: rgba(11,15,23,.88);
  list-style: none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content: "+";
  float: right;
  color: rgba(11,15,23,.55);
}
details[open] .faq__q::after{ content:"–"; }
.faq__a{
  margin-top: 10px;
  color: rgba(11,15,23,.70);
  line-height: 1.8;
}