:root{
  --bg: #fbfaf7;          /* ivoire */
  --panel:#ffffff;
  --text:#121418;         /* charbon */
  --muted:#5c6470;
  --muted2:#7a8395;

  --stroke: rgba(18,20,24,.10);
  --stroke2: rgba(18,20,24,.06);

  --shadow: 0 18px 60px rgba(18,20,24,.10);
  --shadow2: 0 10px 30px rgba(18,20,24,.08);

  --radius: 22px;
  --radius2: 16px;
  --max: 1140px;

  /* accent */
  --a:#0f2d5a;   /* bleu profond */
  --b:#1e40af;   /* bleu plus vif */
  --c:#0b1220;   /* charbon */

  --grad: linear-gradient(
      to right,
      #0f2d5a 0%,
      #1e40af 45%,
      #93c5fd 75%,
      #e0f2ff 100%
    );
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 450px at 15% 10%, rgba(200,163,90,.12), transparent 55%),
    radial-gradient(900px 450px at 80% 20%, rgba(15,61,46,.08), transparent 55%),
    linear-gradient(180deg, #fff, var(--bg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding: 26px 18px 110px;}
.row{display:flex; align-items:center; gap:12px;}
.spacer{flex:1}

/* ===== Top sticky bar ===== */
.sticky{
  position: sticky;
  top: 14px;
  z-index: 50;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 10px 12px;
}
.brand{display:flex; align-items:center; gap:10px; min-width: 210px;}
.brand img{
  width: 36px; height: 36px; border-radius: 14px; object-fit: cover;
  box-shadow: 0 10px 24px rgba(200,163,90,.18);
  border: 1px solid rgba(200,163,90,.18);
}
.brand .name{
  font-weight: 900;
  letter-spacing:-.3px;
  font-size: 18px;
}
.brand .tag{font-size: 12px; color: var(--muted); margin-top: -1px;}

nav{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; position:relative;}
nav a{
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  border: 1px solid transparent;
}
nav a:hover{
  color: var(--text);
  border-color: var(--stroke2);
  background: rgba(18,20,24,.02);
}

/* pill nav */
.nav-pill{
  position:absolute;
  left:0;
  top:50%;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15,45,90,.14), rgba(30,64,175,.10));
  border: 1px solid rgba(15,45,90,.18);
  box-shadow: 0 10px 22px rgba(18,20,24,.08);
  transition: transform 420ms cubic-bezier(.22,1,.36,1), width 420ms cubic-bezier(.22,1,.36,1), opacity 200ms ease;
  z-index:0;
  opacity:0;
  width:0;
  transform: translate(0,-50%);
  pointer-events:none;
}
nav a{position:relative; z-index:1;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select:none;
  white-space: nowrap;
}
.btn:hover{
  box-shadow: 0 14px 34px rgba(18,20,24,.10);
  border-color: rgba(15,45,90,.22);
}
.btn:active{transform: translateY(1px);}
.btn.primary{
  border: none;
  background: var(--grad);
  color: white;
  box-shadow: 0 16px 40px rgba(15,61,46,.18);
}
.btn.primary:hover{filter: brightness(1.04)}
.btn.ghost{
  background: rgba(18,20,24,.02);
  border-color: var(--stroke2);
}

/* ===== Hero ===== */
.hero{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  padding: 26px 0 8px;
  align-items: stretch;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }

/* panels */
.panel{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.82);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
}
.panel::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 260px at 18% 8%, rgba(200,163,90,.12), transparent 60%),
    radial-gradient(700px 260px at 85% 22%, rgba(15,61,46,.08), transparent 60%);
  pointer-events:none;
}
.panel > *{position:relative}
.pad{padding: 20px;}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(200,163,90,.22);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  width: fit-content;
}
.dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(200,163,90,.15);
}

/* Titre principal (version app, moins massif) */
h1{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 52px;
  line-height: 1.03;
  letter-spacing: -1.2px;
  margin: 14px 0 12px;
}
@media (max-width: 540px){ h1{font-size: 38px;} }

.lead{
  margin:0;
  color: var(--muted);
  font-size: 18px;
  max-width: 64ch;
}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px;}
.micro{
  margin-top: 12px;
  color: var(--muted2);
  font-size: 13px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.micro span{display:inline-flex; align-items:center; gap:8px;}
.check{
  background: rgba(15,45,90,.08);
  border: 1px solid rgba(15,45,90,.18);
  color: rgba(15,45,90,1);
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 980px){ .grid3{grid-template-columns:1fr;} }

.card{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.86);
  border-radius: var(--radius2);
  padding: 14px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(18,20,24,.10);
  border-color: rgba(200,163,90,.22);
}
.card b{display:block; margin-bottom: 6px;}
.card p{margin:0; color: var(--muted);}

section{margin-top: 44px;}
.head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap:12px;
  margin-bottom: 12px;
}
h2{
  margin:0;
  font-size: 22px;
  letter-spacing: -.4px;
}
.sub{margin: 4px 0 0; color: var(--muted); font-size: 14px;}

/* ===== Carousel ===== */
.carousel{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.86);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  width:100%;
  max-width: 780px;
  margin: 0 auto;
}
.carouselTop{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px 0 12px;
}
.carouselTitle{font-weight: 900; letter-spacing: -.3px; font-size: 14px;}
.carouselHint{color: var(--muted2); font-size: 12px;}
.viewport{
  position: relative;
  overflow:hidden;
  border-radius: 18px;
  margin: 12px;
  border: 1px solid var(--stroke2);
  background: #fff;
}
.track{
  display:flex;
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.slide{min-width: 100%; position: relative;}
.slide img{width:100%; height:auto; display:block; object-fit: cover;}
.slideCaption{
  position:absolute;
  left: 14px; bottom: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--stroke2);
  box-shadow: 0 10px 24px rgba(18,20,24,.10);
  max-width: min(380px, 75%);
}
.slideCaption b{display:block; font-size: 13px;}
.slideCaption span{display:block; font-size: 12px; color: var(--muted);}

.controls{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 0 12px 12px 12px;
}
.dots{display:flex; gap:8px; align-items:center; justify-content:center; flex:1;}
.dotBtn{
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(18,20,24,.18);
  background: rgba(18,20,24,.10);
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, width .2s ease;
}
.dotBtn[aria-current="true"]{
  background: var(--grad);
  border-color: rgba(200,163,90,.35);
  width: 22px;
}
.navBtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: #fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: box-shadow .2s ease, transform .08s ease;
}
.navBtn:hover{box-shadow: 0 10px 22px rgba(18,20,24,.10)}
.navBtn:active{transform: translateY(1px)}
.navBtn svg{width: 18px; height: 18px;}

/* ===== Pricing ===== */
.pricing{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 980px){ .pricing{grid-template-columns:1fr;} }

.priceRow{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.priceValue{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  font-weight: 900;
  letter-spacing:-1.2px;
}
.priceSmall{display:block; margin-top:-6px; color: var(--muted2); font-weight: 800; font-size: 13px;}
.badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(200,163,90,.12);
  border: 1px solid rgba(200,163,90,.22);
  color: #6b4d14;
  font-weight: 900;
  font-size: 12px;
}
ul{margin: 12px 0 0; padding-left: 18px; color: var(--muted);}
li{margin: 8px 0}

/* Inputs */
input, textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: #fff;
  color: var(--text);
  outline:none;
}
textarea{min-height:110px; resize: vertical;}
input:focus, textarea:focus{
  border-color: rgba(200,163,90,.35);
  box-shadow: 0 0 0 4px rgba(200,163,90,.12);
}

/* FAQ */
details{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.86);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--shadow2);
}
summary{cursor:pointer; font-weight: 900;}
details p{margin: 8px 0 0; color: var(--muted);}

/* Footer */
.footer{
  margin-top: 42px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top: 1px solid var(--stroke2);
  padding-top: 18px;
  color: var(--muted2);
  font-size: 13px;
}
.links{display:flex; gap:12px; flex-wrap:wrap;}
.links a{color: var(--muted2)}
.links a:hover{color: var(--text)}

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.reveal.show{ opacity: 1; transform: translateY(0); }

/* Mobile menu */
.mobileMenuBtn{ display:none; }
.menuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(18,20,24,.32);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 999;
}
.menuDrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 88vw);
  background: rgba(255,255,255,.96);
  border-left: 1px solid var(--stroke2);
  box-shadow: 0 30px 80px rgba(18,20,24,.18);
  transform: translateX(102%);
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
  z-index: 1000;
  display:flex;
  flex-direction: column;
}
.menuHeader{
  display:flex; align-items:center; justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--stroke2);
}
.menuBody{ padding: 12px 14px 18px 14px; display:grid; gap: 10px; }
.menuBody a.btn{ width: 100%; justify-content: flex-start; }
.menuFooter{
  margin-top:auto;
  padding: 14px;
  border-top: 1px solid var(--stroke2);
  display:grid;
  gap: 10px;
}
body.menu-open .menuOverlay{ opacity:1; pointer-events:auto; }
body.menu-open .menuDrawer{ transform: translateX(0); }

@media (max-width: 560px){
  nav{display:none;}
  .brand{min-width:auto;}
  .mobileMenuBtn{ display:inline-flex; }
}

/* HERO compact */
.heroCompact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 20px;
}
@media (max-width: 980px){ .heroCompact{grid-template-columns:1fr;} }
.heroLeft{min-height: 100%;}
.heroRight{display:flex; align-items: stretch;}
.grid3.mini .card p{margin:0; font-size:13px; color: var(--muted2);}

/* HERO: cards de droite moins hautes */
.heroCompact .heroRight{ align-items: flex-start; }
.heroCompact .grid3.mini{
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
.heroCompact .grid3.mini .card{
  min-height: 92px;
  display: grid;
  align-content: start;
  padding: 14px;
}

/* ===== Feature tiles ===== */
.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .featureGrid{grid-template-columns:1fr;} }

.tile{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow2);
  display:grid;
  gap: 6px;
  min-height: 116px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.tile:hover{transform: translateY(-2px); box-shadow: 0 16px 42px rgba(15,23,42,.12);}

.tile .ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(99,91,255,.14), rgba(6,182,212,.10));
  border: 1px solid rgba(99,91,255,.22);
  color: rgba(99,91,255,1);
  font-weight: 900;
  font-size: 18px;
}
.tile b{font-weight: 900;}
.tile span{color: var(--muted); font-size: 13px;}

/* ===== Steps ===== */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .steps{grid-template-columns:1fr;} }

.stepCard{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.75);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow2);
  display:grid;
  gap: 8px;
  min-height: 120px;
}
.stepN{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--a), var(--c));
  color: white;
  font-weight: 900;
}
.stepCard p{
  margin: 0;
  line-height: 1.35;
  color: var(--muted);
  font-size: 13px;
}

/* Pricing mini grid */
.pricingOne{display:grid; grid-template-columns: 1fr;}
.miniGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 600px){ .miniGrid{grid-template-columns:1fr;} }
.miniItem{
  border: 1px solid var(--stroke2);
  background: rgba(15,23,42,.02);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--muted);
}

/* form clean */
.formGrid{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  max-width: 520px;
}
.hint{color: var(--muted2); font-size: 13px;}

/* FAQ grid */
.faqGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 980px){ .faqGrid{grid-template-columns:1fr;} }

/* ===== Pricing layout V2 ===== */
.priceLayout{display:grid; grid-template-columns:1fr; }
.priceCard2{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.82);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.priceTop2{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--stroke2);
}
.priceTitle2{margin:10px 0 4px; font-size:22px;}
.priceBox2{
  text-align:right;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(99,91,255,.18);
  background: linear-gradient(135deg, rgba(99,91,255,.10), rgba(6,182,212,.08));
}
.priceValue2{font-size: 46px; font-weight: 950; letter-spacing:-1.2px;}
.priceSmall2{color: var(--muted2); font-weight: 800; font-size: 13px; margin-top:-6px;}

.priceCols{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){ .priceCols{grid-template-columns:1fr;} }

.featList{display:grid; gap:10px; align-content:start;}
.feat{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(15,23,42,.02);
  font-weight: 800;
  color: var(--muted);
}
.miniNote{
  margin-top: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(99,91,255,.22);
  background: rgba(99,91,255,.05);
  color: var(--muted);
  font-size: 13px;
}

.formCard{
  border-radius: 18px;
  border: 1px solid var(--stroke2);
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow2);
}
.formTitle{font-weight: 950; margin-bottom: 8px;}

/* ===== Origin V2 ===== */
.originCard{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow2);
}
.originCard ul{ margin: 10px 0; padding-left: 18px; color: var(--muted); }
.originCard li{ margin: 6px 0; }

.originResult{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.18);
  font-size: 14px;
}
.originV2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){ .originV2{ grid-template-columns: 1fr; } }

.originStack{ display:grid; gap: 10px; }

.storyCard{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow2);
}
.storyCard b{display:block; margin-top: 6px;}
.storyCard p{margin:6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35;}
.storyTag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99,91,255,.18);
  background: rgba(99,91,255,.08);
  color: rgba(99,91,255,1);
  font-weight: 900;
  font-size: 12px;
}
.storyCard.highlight{
  border-color: rgba(34,197,94,.18);
  background: rgba(34,197,94,.06);
}

.kpiRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.kpi{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 12px;
  text-align:center;
  box-shadow: var(--shadow2);
}
.kpiN{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.3px;
}
.kpiT{
  color: var(--muted2);
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}

/* =========================================================
   FEATURES SWIPE (mobile) — cartes même taille + scroll-snap
   ========================================================= */
.featureSwipe{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

/* Sur desktop: on laisse la grille normale (featureGrid 3 colonnes) */
@media (min-width: 821px){
  .featureSwipe{
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

/* Sur mobile: rail horizontal + cartes fixes (même taille) */
@media (max-width: 820px){
  /* Le wrapper gère le scroll */
  .featureSwipe{
    scrollbar-width: none;
  }
  .featureSwipe::-webkit-scrollbar{
    display: none;
  }

  /* IMPORTANT: on override le @media (max-width:980px) qui mettait 1fr */
  .featureSwipe .featureGrid{
    grid-template-columns: none;      /* neutralise l’ancien */
    grid-auto-flow: column;
    grid-auto-columns: 260px;         /* largeur identique */
    gap: 14px;
    padding: 0 2px;
  }

  .featureSwipe .tile{
    height: 160px;                    /* hauteur identique */
    scroll-snap-align: start;
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  /* Limite le texte pour éviter que certaines cartes grandissent */
  .featureSwipe .tile span{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =========================================================
   FEATURES V3 — Liste + panneau (sans JS)
   ========================================================= */

.featTabs{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items:start;
}


/* Les tabs (colonne de gauche) */
.featTab{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

.featTab:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(15,23,42,.10);
  border-color: rgba(15,45,90,.18);
}

.featIco{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(99,91,255,.14), rgba(6,182,212,.10));
  border: 1px solid rgba(99,91,255,.22);
  font-size: 18px;
}

.featT{
  font-weight: 950;
  letter-spacing: -.2px;
}

/* Panneau de droite */
.featPanel{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 220px;
}

/* Tous les panneaux cachés par défaut */
.featPane{ display:none; }

/* Affichage conditionnel selon le radio checked */
#feat1:checked ~ .featPanel #featPanel1,
#feat2:checked ~ .featPanel #featPanel2,
#feat3:checked ~ .featPanel #featPanel3,
#feat4:checked ~ .featPanel #featPanel4,
#feat5:checked ~ .featPanel #featPanel5{
  display:block;
}

.featPaneHead{
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 10px;
}
.featPaneTitle{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.3px;
}
.featPaneSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.featBullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.featBullets li{
  margin: 8px 0;
}

/* Style "actif" du tab sélectionné */
#feat1:checked + label[for="feat1"],
#feat2:checked + label[for="feat2"],
#feat3:checked + label[for="feat3"],
#feat4:checked + label[for="feat4"],
#feat5:checked + label[for="feat5"]{
  border-color: rgba(15,45,90,.22);
  background: linear-gradient(135deg, rgba(15,45,90,.08), rgba(30,64,175,.06));
}

/* Responsive: mobile => tabs horizontaux swipeables */
@media (max-width: 900px){
  .featTabs{
    grid-template-columns: 1fr;
  }

  /* Les labels deviennent une rangée horizontale scrollable */
  .featTab{
    min-width: 220px;
    flex: 0 0 auto;
  }

  .featTabs{
    gap: 10px;
  }

  /* Astuce : on met les tabs dans une rangée */
  .featTabs{
    display:flex;
    flex-direction: column;
  }

  /* Tabs rail */
  .featTabs{
    position: relative;
  }

  /* On cible tous les labels dans un "rail" */
  .featTabs{
    --tab-gap: 10px;
  }

  /* Crée un rail avec scroll horizontal via un wrapper virtuel */
  .featTabs{
    overflow: visible;
  }

  /* On transforme le “bloc de tabs” en rail horizontal :
     (comme on ne peut pas wrapper facilement sans toucher au HTML,
      on utilise un hack simple : on force les labels à s’afficher inline-flex
      et on permet le scroll horizontal sur la section via un conteneur) */
  .featTabs{
    align-items: stretch;
  }

  /* En pratique : on met les labels dans une rangée scrollable
     => On applique le scroll sur le parent et on autorise l’overflow-x */
  .featTabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .featTabs::-webkit-scrollbar{ display:none; }

  /* Puis on replace le panneau en dessous (large) */
  .featPanel{
    margin-top: 10px;
    min-height: 0;
  }
}

/* =========================================================
   FEATURES – Liste + panneau (version clean, sans JS)
   ========================================================= */

.featTabs{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
  align-items:start;
}

.featRadio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.featRail{
  display:grid;
  gap: 10px;
}

.featTab{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.featTab:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
}

.featIco{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(99,91,255,.14), rgba(6,182,212,.10));
  border: 1px solid rgba(99,91,255,.22);
  font-size: 18px;
}
.featT{
  font-weight: 900;
  letter-spacing: -.2px;
}

/* Tab actif (labels sont dans .featRail) */
#feat1:checked ~ .featRail label[for="feat1"],
#feat2:checked ~ .featRail label[for="feat2"],
#feat3:checked ~ .featRail label[for="feat3"],
#feat4:checked ~ .featRail label[for="feat4"],
#feat5:checked ~ .featRail label[for="feat5"]{
  position: relative;
  border-color: rgba(56,130,246,.35);
  background: linear-gradient(
    135deg,
    rgba(219,234,254,.95),
    rgba(239,246,255,.95)
  );
}

.featPanel{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.featPane{ display:none; }

#feat1:checked ~ .featPanel #featPanel1,
#feat2:checked ~ .featPanel #featPanel2,
#feat3:checked ~ .featPanel #featPanel3,
#feat4:checked ~ .featPanel #featPanel4,
#feat5:checked ~ .featPanel #featPanel5{
  display:block;
}

.featPane h3{
  margin:0;
  font-size: 18px;
  letter-spacing: -.3px;
}
.featSub{
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.featPane ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
}
.featPane li{ margin: 8px 0; }

@media (max-width: 900px){
  .featTabs{ grid-template-columns: 1fr; }

  .featRail{
    display:flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .featRail::-webkit-scrollbar{ display:none; }

  .featTab{
    min-width: 220px;
    flex: 0 0 auto;
  }

  .featPanel{ margin-top: 10px; }
}

/* =========================================================
   HOW IT WORKS — Avant → Action → Résultat
   ========================================================= */

.howSwipe{
  overflow: visible;
}

.howGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.howCard{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.80);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 14px;
  display:flex;
  flex-direction: column;
  min-height: 280px;
}

.howTop{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 10px;
}

.howN{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--a), var(--c));
  color: white;
  font-weight: 950;
}

.howTitle b{
  display:block;
  font-weight: 950;
  letter-spacing: -.2px;
}
.howTitle span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
}

.howBody{
  display:grid;
  gap: 10px;
}

.howLine{
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  padding: 10px 12px;
  background: rgba(15,23,42,.02);
}

.howTag{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.2px;
  margin-bottom: 6px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.65);
}

.howLine p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Couleurs par type */
.howBefore{
  background: rgba(15,23,42,.02);
}

.howDo{
  background: linear-gradient(135deg, rgba(219,234,254,.70), rgba(239,246,255,.70));
  border-color: rgba(56,130,246,.25);
}

.howResult{
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.18);
}

/* Footer */
.howFooter{
  margin-top: 12px;
}
.howFooterBox{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}
.howFooterBox b{
  color: var(--text);
}

/* Responsive: mobile swipe rail */
@media (max-width: 980px){
  .howSwipe{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .howSwipe::-webkit-scrollbar{ display:none; }

  .howGrid{
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 82%);
    grid-template-columns: none;
    gap: 12px;
    padding: 0 2px;
  }

  .howCard{
    scroll-snap-align: start;
    min-height: 300px;
  }
}