/* =============================================
   Milala – Kit Sensoriel (CSS externe)
   Version : 2025-11-03
   Contenu extrait de la page fournie par Thomas
   ============================================= */

/* === Règles globales & utilitaires (depuis <style> du <head>) === */
.bar-sticky.js-sticky {
  display: none;
}
.bar-sticky.is-visible { /* visible quand on ajoute cette classe */
  display: flex;
}

.lp-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
}
.badge {
  display: inline-block;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #26357a;
  font-weight: 600;
}
.k-hero {
  padding: 36px 0;
}
.k-hero .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
}
.k-hero h1 {
  margin: .25rem 0;
}
.sub {
  color: #555;
  max-width: 56ch;
}
.k-hero img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}


.k-notes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: #3c4a3e;
  font-size: .95rem;
  margin-top: 10px;
}
.bar-sticky {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-weight: 800;
}
.k-section {
  padding: 28px 0;
}
.k-section.alt {
  background: #faf9fb;
}
.two {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.three {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  border: 1px solid #eee;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
}
.k-list {
  margin: 0;
  padding-left: 1.1rem;
}
.k-list li {
  margin: .4rem 0;
}
.proof {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.quote {
  border: 1px solid #eee;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  font-size: .98rem;
}
.bundle {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.bundle .card h3 {
  margin: .25rem 0;
}
details.faq {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
details.faq + details.faq {
  margin-top: 10px;
}
summary {
  cursor: pointer;
  font-weight: 700;
}
.k-meta {
  font-size: .9rem;
  color: #666;
}

/* ==== Image "kit" simple & propre ==== */
.kit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 640px;
  padding: 1rem 0;
}
.kit-image {
  width: 60%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  background-color: #fafafa;
}
.kit-frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
}
.hero-kit .badge {
  background: #E8F0FE;
  color: #1A73E8;
  font-size: 14px;
  padding: 6px 10px;
  display: inline-block;
  border-radius: 4px;
  margin-bottom: 10px;
  font-weight: 500;
}
.hero-kit .subtext {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: .5em;
}
.hero-kit .story-intro {
  color: #777;
  font-style: italic;
  margin-bottom: 1.5em;
}
.hero-kit .cta-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1em;
}
.hero-kit .guarantees {
  list-style: none;
  padding: 0;
  color: #555;
  font-size: .95rem;
}

@media (max-width: 900px) {
  .kit-wrap {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .k-hero .grid {
    grid-template-columns: 1fr;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .three {
    grid-template-columns: 1fr;
  }
  .proof {
    grid-template-columns: 1fr;
  }
  .bundle {
    grid-template-columns: 1fr;
  }
  .bar-sticky {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* === SECTION #memoire-amour === */
#memoire-amour {
  --violet: #5145CD;
  --violet-10: #f4f2ff;
  --ink: #0f1223;
  --sub: #555a6b;
  --line: #e8e6f8;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: #0f1223;
  padding: 0;
}
#memoire-amour .wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  line-height: 1.9;
}
#memoire-amour h2 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 850;
  letter-spacing: -.02em;
  margin-bottom: 1.3rem;
  color: var(--ink);
}
#memoire-amour p {
  font-size: 1.13rem;
  color: var(--sub);
  margin-bottom: 1.5rem;
  max-width: 80ch;
}
#memoire-amour .band {
  background: linear-gradient(180deg, #ffffff, var(--violet-10));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#memoire-amour figure {
  margin: 3rem 0;
  text-align: center;
}
#memoire-amour figure img {
  width: 35%;
  max-width: 400px;
  height: auto;
  display: inline-block;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  object-fit: contain;
  background: #faf9ff;
  border: 1px solid var(--line);
}
#memoire-amour figcaption {
  font-size: .95rem;
  color: #666;
  font-style: italic;
  margin-top: .8rem;
}
#memoire-amour .accent {
  color: var(--violet);
  font-weight: 700;
}
#memoire-amour .cta {
  display: inline-block;
  background: var(--violet);
  color: #fff;
  padding: 1rem 1.8rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 750;
  margin-top: 1rem;
  box-shadow: 0 8px 25px rgba(81, 69, 205, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
#memoire-amour .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(81, 69, 205, .25);
}
#memoire-amour .cta-note {
  color: #777;
  font-size: .95rem;
  margin-left: .8rem;
}

@media (max-width: 900px) {
  #memoire-amour figure img {
    width: 85%;
    max-width: 95%;
    border-radius: 12px;
  }
  #memoire-amour p {
    font-size: 1.05rem;
  }
}

/* === SECTION #pourquoi-milala === */
#pourquoi-milala {
  --violet: #5145CD;
  --violet-2: #7C3AED;
  --ink: #0f1223;
  --sub: #565a6c;
  --line: #ececf6;
  --soft: #f8f7ff;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: var(--ink);
  padding: 5rem 1.25rem;
  line-height: 1.75;
}
#pourquoi-milala .pm-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: start;
}

#pourquoi-milala h2 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 .8rem;
}
#pourquoi-milala .pm-gradient {
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#pourquoi-milala .pm-lead {
  color: var(--sub);
  font-size: 1.08rem;
  margin: .15rem 0 1rem;
}
#pourquoi-milala .pm-punch {
  font-weight: 850;
  color: #1b1b2d;
  margin: 1rem 0 .7rem;
}
#pourquoi-milala h3 {
  margin: 1.2rem 0 .4rem;
  font-size: 1.05rem;
  font-weight: 900;
}
#pourquoi-milala ul.pm-keys {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
}
#pourquoi-milala ul.pm-keys li {
  position: relative;
  padding-left: 1.12rem;
  margin: .42rem 0;
  font-weight: 600;
  color: #212336;
}
#pourquoi-milala ul.pm-keys li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: .08rem;
  color: var(--violet);
  font-weight: 900;
}
#pourquoi-milala blockquote {
  margin: 1rem 0 0;
  background: #f9f8ff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  color: var(--sub);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}
#pourquoi-milala blockquote .who {
  display: block;
  margin-top: .5rem;
  font-weight: 800;
  color: #1f2032;
  font-style: normal;
}
#pourquoi-milala .pm-aside {
  display: grid;
  gap: 1rem;
  align-content: start;
}
#pourquoi-milala .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
}
#pourquoi-milala .card.soft {
  background: var(--soft);
}
#pourquoi-milala .card h3 {
  margin: 0 0 .55rem;
  font-size: .96rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #2b2e47;
}
#pourquoi-milala .trust-bar {
  display: grid;
  gap: .8rem;
  grid-template-columns: 1fr;
}
#pourquoi-milala .chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
}
#pourquoi-milala .chip strong {
  display: block;
  font-size: .93rem;
  color: #2b2e47;
}
#pourquoi-milala .chip span {
  display: block;
  color: #6b6f85;
  font-size: .93rem;
  margin-top: .25rem;
}
#pourquoi-milala .pm-div {
  height: 2px;
  background: linear-gradient(90deg, #cfd5ff, transparent);
  margin: 1.2rem 0 0;
  border-radius: 2px;
}

@media (min-width: 1024px) {
  #pourquoi-milala .pm-aside {
    position: sticky;
    top: 88px;
  }
}
@media (max-width: 900px) {
  #pourquoi-milala {
    padding: 4.2rem 1.1rem;
  }
  #pourquoi-milala .pm-container {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  #pourquoi-milala .pm-lead {
    font-size: 1.04rem;
  }
  #pourquoi-milala blockquote {
    border-left-width: 3px;
  }
}

/* === SECTION #stats-milala === */
#stats-milala {
  --violet: #5145CD;
  --violet2: #7C3AED;
  --ink: #0f1223;
  --sub: #636683;
  --line: #e9e9f5;
  --size: 156px;
  --stroke: 10;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, #ffffff 0%, #f7f6ff 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3.8rem 1.5rem;
  text-align: center;
  overflow: hidden;
}
#stats-milala .wrap {
  max-width: 1100px;
  margin: 0 auto;
}
#stats-milala h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  margin: 0 0 2.2rem;
  background: linear-gradient(90deg, var(--violet), var(--violet2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#stats-milala .grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  justify-items: center;
  align-items: center;
}
#stats-milala .gauge-card {
  display: grid;
  place-items: center;
  text-align: center;
  gap: .6rem;
}
#stats-milala .gsvg {
  width: var(--size);
  height: var(--size);
  display: block;
}
#stats-milala .center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--violet);
  text-shadow: 0 0 10px rgba(124, 58, 237, .25);
  pointer-events: none;
}
#stats-milala .gwrap {
  position: relative;
  display: inline-block;
}
#stats-milala .track {
  fill: none;
  stroke: #ecebff;
  opacity: .9;
}
#stats-milala .progress {
  fill: none;
  stroke: url(#grad-violet);
  stroke-linecap: round;
  filter: url(#halo);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
#stats-milala .label {
  color: var(--sub);
  font-size: .96rem;
  font-style: italic;
  line-height: 1.3;
}
#stats-milala .badge {
  display: inline-block;
  margin-top: 1.2rem;
  background: #f7f7ff;
  border: 1px dashed #d9d9f3;
  color: #61637a;
  border-radius: 12px;
  padding: .55rem .8rem;
  font-size: .9rem;
}

@media (max-width: 900px) {
  #stats-milala {
    --size: 132px;
    --stroke: 10;
  }
  #stats-milala .grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}
@media (max-width: 720px) {
  #stats-milala {
    --size: 110px;
    --stroke: 9;
  }
  #stats-milala .grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
}
@media (max-width: 480px) {
  #stats-milala {
    --size: 96px;
    --stroke: 9;
  }
  #stats-milala .grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
@keyframes haloPulse {
  0% { filter: url(#halo) drop-shadow(0 0 0 rgba(81, 69, 205, 0)); }
  100% { filter: url(#halo) drop-shadow(0 0 8px rgba(81, 69, 205, .25)); }
}
#stats-milala .animating .progress {
  animation: haloPulse .9s ease-in-out infinite alternate;
}

/* === SECTION #temoignages-milala === */
#temoignages-milala {
  --violet: #5145CD;
  --ink: #0f1223;
  --sub: #52546a;
  --line: #ececf6;
  --bg-soft: linear-gradient(180deg, #f8f7ff 0%, #ffffff 60%);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-soft);
  color: var(--ink);
  padding: 5rem 1.5rem;
}
#temoignages-milala .tm-container {
  max-width: 1100px;
  margin: 0 auto;
}

#temoignages-milala h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  font-weight: 850;
}
#temoignages-milala .tm-lead {
  color: var(--sub);
  max-width: 70ch;
  margin: .25rem 0 2rem;
  font-size: 1.05rem;
}
#temoignages-milala .tm-hero {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
  margin-bottom: 3rem;
}
#temoignages-milala .tm-hero:before {
  content: "“";
  position: absolute;
  left: 16px;
  top: -18px;
  font-size: 6rem;
  line-height: 1;
  color: var(--violet);
  opacity: .12;
  font-weight: 900;
}
#temoignages-milala .tm-hero p {
  margin: 0;
  font-size: 1.15rem;
}
#temoignages-milala .tm-hero .who {
  margin-top: .6rem;
  color: var(--sub);
  font-weight: 700;
  font-size: .95rem;
}
#temoignages-milala .tm-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 980px) {
  #temoignages-milala .tm-grid {
    grid-template-columns: 1fr;
  }
}
.tm-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}
.tm-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}
.tm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: #5145CD;
  box-shadow: inset 0 0 0 2px #ffffff;
  font-size: 1rem;
}
.tm-meta {
  line-height: 1.2;
}
.tm-name {
  font-weight: 800;
}
.tm-role {
  font-size: .9rem;
  color: #52546a;
}
.tm-quote {
  color: #1b1b2d;
  font-size: 1rem;
  line-height: 1.7;
  margin: .25rem 0 0;
}
.tm-emotion {
  margin-top: .8rem;
  font-size: .9rem;
  font-weight: 700;
  color: #5145CD;
}
#temoignages-milala .tm-accent {
  height: 2px;
  background: linear-gradient(90deg, #5145CD, transparent);
  margin: 3rem 0 0;
}

/* === SECTION #dans-le-kit === */
#dans-le-kit {
  --violet: #5145CD;
  --lavande: #F5F3FF;
  --line: #ECECF6;
  --ink: #0F1223;
  --sub: #5B5C70;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #fff 0%, #f9f8ff 100%);
  color: var(--ink);
  padding: 5rem 1.5rem;
}
#dans-le-kit .container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 950px) {
  #dans-le-kit .container {
    grid-template-columns: 1fr;
  }
}
#dans-le-kit .kit-image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}
#dans-le-kit .kit-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}
#dans-le-kit h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
#dans-le-kit .lead {
  font-size: 1.1rem;
  color: var(--sub);
  margin-bottom: 1.8rem;
  line-height: 1.7;
}
#dans-le-kit ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
#dans-le-kit li {
  margin: .6rem 0;
  padding-left: 1.4rem;
  position: relative;
  font-weight: 500;
  color: var(--ink);
}
#dans-le-kit li::before {
  content: "•";
  color: var(--violet);
  position: absolute;
  left: 0;
  top: .25rem;
  font-size: 1.4rem;
  line-height: 1;
}
#dans-le-kit .encart {
  background: var(--lavande);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  font-style: italic;
  font-size: 1rem;
}
#dans-le-kit .encart strong {
  color: var(--violet);
  font-weight: 700;
}
#dans-le-kit .cta {
  display: inline-block;
  margin-top: 2rem;
  background: var(--violet);
  color: #fff;
  padding: 1rem 1.6rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(81, 69, 205, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
#dans-le-kit .cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(81, 69, 205, 0.25);
}

/* === SECTION #kit-mensuel === */
#kit-mensuel {
  --violet: #5145CD;
  --lavande: #F5F3FF;
  --ink: #0F1223;
  --sub: #565A6C;
  background: #fff;
  color: var(--ink);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  padding: 5rem 1.5rem;
}
#kit-mensuel .container {
  max-width: 1100px;
  margin: 0 auto;
}
#kit-mensuel h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  text-align: center;
}
#kit-mensuel .subtitle {
  text-align: center;
  color: var(--sub);
  font-size: 1.1rem;
  margin-bottom: 3rem;
}
.km-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.km-card {
  background: var(--lavande);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.km-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(81, 69, 205, 0.12);
}
.km-card .icon {
  font-size: 2rem;
  color: var(--violet);
  margin-bottom: 1rem;
}
.km-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: .8rem;
  color: var(--ink);
}
.km-card p {
  font-size: 1rem;
  color: var(--sub);
  line-height: 1.6;
}


/* === SECTION #abonnement === */
/* === ABONNEMENT — style comme la capture === */
#abonnement.abo{
  --violet:#6C5CE7;
  --violet2:#7E6FF2;
  --ink:#0f1223;
  --sub:#5f6272;
  --line:#ececf6;
  --soft:#fafaff;
  --radius:16px;

  font-family: "Inter", system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#fafaff 100%);
  padding:5rem 1.5rem;
}

/* Titre + badge */
#abonnement .wrap{max-width:1100px;margin:0 auto}
#abonnement h2{margin:0 0 .4rem;font-weight:900;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.02em}
#abonnement .eyebrow{
  display:inline-block;padding:.45rem .8rem;border-radius:999px;
  background:#EEF0FF;border:1px solid #E5E7FF;color:#3633A3;
  font-weight:800;font-size:.85rem;letter-spacing:.02em
}
#abonnement .lead{color:var(--sub);max-width:70ch;margin:1rem 0 2rem;font-size:1.05rem}

/* GRID */
#abonnement .grid{display:grid;gap:1.6rem;grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:980px){#abonnement .grid{grid-template-columns:1fr}}

/* CARD (base) */
#abonnement .card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:1.6rem;box-shadow:0 2px 10px rgba(0,0,0,.03);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;
}
#abonnement .card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.06);
  border-color:#e2e1fb;
}

/* HEADER de carte */
#abonnement .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.6rem}
#abonnement h3{margin:0;font-weight:850;font-size:1.15rem;letter-spacing:-.01em}
#abonnement .badge{
  background:var(--violet);color:#fff;border-radius:10px;
  padding:.28rem .6rem;font-weight:800;font-size:.72rem;
  box-shadow:0 2px 10px rgba(108,92,231,.25)
}
#abonnement .tagline{color:var(--sub);font-size:.95rem;margin:0 0 .4rem}
#abonnement .price{color:#1b1b2d;font-weight:900;font-size:1.4rem;margin:.25rem 0 .15rem}
#abonnement .meta{color:#6a6c84;font-size:.92rem;margin:0 0 .6rem}
#abonnement ul{margin:.7rem 0 0;padding-left:1.1rem}
#abonnement li{margin:.35rem 0}

/* ACTIONS (aligne les boutons à la même hauteur) */
#abonnement .actions{margin-top:auto}

/* BOUTONS unifiés */
#abonnement .btn{
  display:block;width:100%;text-align:center;
  padding:1rem 1.2rem;border-radius:14px;
  font-weight:800;font-size:1rem;line-height:1;border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  user-select:none;
  cursor:pointer;
}
#abonnement .btn--primary{
  background:linear-gradient(90deg,var(--violet),var(--violet2));
  color:#fff;box-shadow:0 6px 22px rgba(108,92,231,.20)
}
#abonnement .btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(108,92,231,.25);
  filter:brightness(1.06)
}
#abonnement .btn--ghost{
  background:#fff;color:var(--violet);border:1px solid #D9D6FF
}
#abonnement .btn--ghost:hover{
  background:#F6F5FF;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(108,92,231,.12)
}

/* CARTE mise en avant (centrale) — comme sur la capture */
#abonnement .card.reco{
  border:2px solid var(--violet);
  box-shadow:0 14px 42px rgba(108,92,231,.18);
  transform:translateY(-2px)
}
#abonnement .card.reco:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 48px rgba(108,92,231,.20)
}

/* Barre verte (bénéfices) */
#abonnement .benefits{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  margin:1.5rem 0 0;color:#2f5132;
  background:#e9faee;border:1px solid #d7f0de;border-radius:12px;
  padding:.8rem 1rem;font-size:.95rem
}
#abonnement .note{margin:1rem 0 0;color:#6a6c84;font-size:.92rem;text-align:center}

/* Stretched link (optionnel si tu veux toute la carte cliquable) */
#abonnement .stretched-link{
  position:absolute;inset:0;border-radius:20px;z-index:1;text-indent:-9999px
}
#abonnement .actions .btn{position:relative;z-index:2}


/* === SECTION #faq-milala === */
#faq-milala {
  --violet: #5145CD;
  --violet-2: #6E63E6;
  --ink: #0f1223;
  --sub: #54556b;
  --line: #ececf6;
  --bg-soft: linear-gradient(180deg, #f8f7ff 0%, #ffffff 60%);
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-soft);
  color: var(--ink);
  padding: 5rem 1.5rem;
}
#faq-milala .faq-container {
  max-width: 1100px;
  margin: 0 auto;
}

#faq-milala h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -.02em;
  margin: .1rem 0 .6rem;
  font-weight: 850;
}
#faq-milala .lead {
  color: var(--sub);
  font-size: 1.05rem;
  margin: 0 0 2rem;
  max-width: 70ch;
}
#faq-milala .faq-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 960px) {
  #faq-milala .faq-grid {
    grid-template-columns: 1fr;
  }
}
#faq-milala details.faq-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
#faq-milala details.faq-card[open] {
  box-shadow: 0 16px 42px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
#faq-milala summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.2rem 1.1rem 1.1rem;
  font-weight: 800;
  color: var(--ink);
  user-select: none;
  outline: none;
}
#faq-milala summary::-webkit-details-marker {
  display: none;
}
#faq-milala .badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--violet-2));
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  box-shadow: 0 6px 16px rgba(81, 69, 205, .25);
}
#faq-milala summary .chev {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--violet);
  transition: transform .25s ease, background .25s ease;
  background: #F3F2FF;
}
#faq-milala details[open] summary .chev {
  transform: rotate(180deg);
  background: #ECEBFF;
}
#faq-milala .content {
  padding: 0 1.2rem 1.2rem 1.2rem;
  color: var(--sub);
  line-height: 1.7;
  border-top: 1px dashed var(--line);
  animation: faq-reveal .28s ease;
}
#faq-milala .content p {
  margin: .9rem 0 0;
}
#faq-milala .content .hint {
  font-size: .92rem;
  color: #6a6c84;
  margin-top: .4rem;
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#faq-milala .faq-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
#faq-milala .btn {
  background: #5145CD;
  color: #fff;
  padding: 1rem 1.4rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(81, 69, 205, .18);
}
#faq-milala .meta {
  color: #6a6c84;
  font-size: .95rem;
}

/* === SECTION #cta-final === */

.cta-final .wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  gap: 2rem;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 900px) {
  .cta-final .wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.cta-final h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
  background: linear-gradient(90deg, var(--violet), var(--violet2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-final .sub {
  font-size: 1.15rem;
  color: var(--sub);
  margin: 0 0 1.8rem;
}
.cta-final .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 900px) {
  .cta-final .cta-row {
    justify-content: center;
  }
}
.cta-final .cta {
  display: inline-block;
  text-decoration: none;
  font-weight: 850;
  border-radius: 14px;
  padding: .95rem 1.4rem;
  font-size: 1.05rem;
  transition: all .25s ease;
}






.cta-final .meta {
  margin-top: 1rem;
  color: #6b6f85;
  font-size: .92rem;
}
.cta-final img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  transition: transform .4s ease;
}
.cta-final img:hover {
  transform: scale(1.02);
}

/* === SECTION .om (Notre origine) === */
.om {
  --ink: #0f1223;
  --sub: #60637a;
  --line: #e9e9f2;
  --soft: #f8f7ff;
  --violet: #5145CD;
  --violet2: #7C3AED;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: var(--ink);
  padding: 5rem 1.5rem;
}
.om .wrap {
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.85;
}
.eyebrow {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background:#EFEFFF;color:var(--violet);
  border:1px solid #E3E2FD;
}
.om h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: .2rem 0 1rem;
  line-height: 1.15;
}
.om .grad {
  background: linear-gradient(90deg, var(--violet), var(--violet2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.om p {
  color: #202232;
  font-size: 1.05rem;
  margin: 0 0 1rem;
}
.om .lead {
  color: var(--sub);
  font-size: 1.12rem;
  margin-bottom: 1.25rem;
}
.om .science {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
}
.om .science .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 12px;
  margin-top: .35rem;
  background: linear-gradient(90deg, var(--violet), var(--violet2));
  box-shadow: 0 0 0 3px #efeefe inset;
}
.om .moment-pivot {
  margin: 2.8rem 0;
  padding: 1.8rem 2rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #f9f8ff 0%, #ffffff 100%);
  border: 1px solid #ecebfa;
  box-shadow: 0 10px 28px rgba(81, 69, 205, 0.07);
  text-align: center;
  line-height: 1.7;
  transition: all .25s ease;
}
.om .moment-pivot:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(81, 69, 205, 0.12);
}
.om .moment-pivot p {
  margin: .6rem 0;
}
.om .sep {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d8ddff, transparent);
  margin: 2rem 0 1.2rem;
}
.om .cta-wrap {
  text-align: center;
  margin-top: 2.2rem;
}




.meta-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: #5a5a5a;
  margin-top: 12px;
  text-align: center;
}

.meta-info span {
  white-space: nowrap;
}



@media (max-width: 720px) {
  .om {
    padding: 4rem 1.1rem;
  }
  .om p {
    font-size: 1.02rem;
  }
}
   /* CTA */
 
    .cta {
     --ink:#0f1223; --sub:#60637a; --line:#e9e9f2; --soft:#f8f7ff;
      --violet:#5145CD; --violet2:#7C3AED;
      font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
      background:#fff; color:var(--ink);
      padding:5rem 1.5rem;
      display:inline-block;
      text-decoration:none;
      font-weight:800;
      padding:1rem 1.6rem;
      border-radius:12px;
      color:#fff;
      background:linear-gradient(90deg,var(--violet),var(--violet2));
      box-shadow:0 14px 32px rgba(81,69,205,.22);
      transition:transform .18s, box-shadow .18s, filter .18s;
    }
    .cta:hover {
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(81,69,205,.26);
      filter:saturate(1.06);
    }
     .cta-sub {
      font-size:.92rem;
      color:#6b6f85;
      margin-top:.6rem;
    }

.cta-secondary {
  background: transparent;
  color: #5145CD;
  border: 2px solid rgba(81, 69, 205, 0.4); /* même épaisseur que .cta-ghost */
  border-radius: 8px;
  padding: 12px 28px; /* même paddings horizontaux que le principal */
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  transition: all 0.25s ease;
  cursor: pointer;
}

.cta-secondary:hover {
  background: rgba(81, 69, 205, 0.05);
  border-color: rgba(81, 69, 205, 0.7);
  color: #3d35a2;
}

.cta-secondary:active {
  background: rgba(81, 69, 205, 0.1);
}

/* =============================
   CROSS LINK = 100% cliquable
============================= */
.crosslink{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;

  max-width: 980px;
  margin: 1rem auto 4.5rem;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  text-align: center;

  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, rgba(81,69,205,.35), rgba(34,197,94,.35)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(16, 18, 35, .06);

  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1rem;
  color: #34364a;
  text-decoration: none;   /* <-- important */

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.crosslink__icon{
  font-size: 1.15rem;
  transform: translateY(1px);
  opacity: .9;
}

.crosslink__text{
  font-weight: 600;
  color: #2e3042;
}

/* le "bouton interne" devient juste un style visuel */
.crosslink__link{
  font-weight: 800;
  color: #5145CD;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(81,69,205,.08);
  transition: background .18s ease, transform .18s ease;
}

/* hover global */
.crosslink:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(16, 18, 35, .10);
}

/* hover du mini-badge interne */
.crosslink:hover .crosslink__link{
  background: rgba(81,69,205,.14);
  transform: translateX(2px);
}

/* Variante PRO */
.crosslink--pro .crosslink__link{
  color:#0EA5A4;
  background: rgba(14,165,164,.10);
}
.crosslink--pro:hover .crosslink__link{
  background: rgba(14,165,164,.16);
}

/* Variante FAMILY si besoin */
.crosslink--family .crosslink__link{
  color:#5145CD;
  background: rgba(81,69,205,.08);
}

/* =========================================================
   THEME PRO FINAL — à coller en DERNIER dans le CSS
   Objectif : tout Pro, rien violet, CTA unis, aside light
========================================================= */

body.theme-pro{

  /* Palette Pro */
  --pro-1:#0EA5A4;         /* teal */
  --pro-2:#22C55E;         /* green */
  --pro-ink:#0f1223;
  --pro-sub:#4a4a62;

  --pro-soft:#eafff7;
  --pro-soft-2:#f3fffb;

  /* Remapping global au cas où */
  --violet: var(--pro-1);
  --violet2: var(--pro-2);
  --violet-2: var(--pro-2);
  --purple: var(--pro-1);
  --primary: var(--pro-1);
  --accent: var(--pro-1);
  --brand: var(--pro-1);

  /* boutons unis */

  --btn-pro: #21BDB3;        /* menthe/teal clair */
  --btn-pro-hover: #18A79E;  /* un poil plus soutenu au hover */

}








/* =========================================================
   2) CTA & boutons : PAS de dégradé, fond uni
========================================================= */
.theme-pro .cta,
.theme-pro .btn--primary,
.theme-pro .cta.primary,
.theme-pro .cta-button,
.theme-pro #memoire-amour .cta,
.theme-pro #dans-le-kit .cta,
.theme-pro #faq-milala .btn,
.theme-pro #cta-final .cta{
  background: var(--btn-pro) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 18px rgba(14,165,164,.22) !important;
  filter:none !important;
}
.theme-pro .cta:hover,
.theme-pro .btn--primary:hover,
.theme-pro #memoire-amour .cta:hover,
.theme-pro #dans-le-kit .cta:hover,
.theme-pro #faq-milala .btn:hover{
  background: var(--btn-pro-hover) !important;
  transform: translateY(-1px);
  box-shadow:0 12px 26px rgba(14,165,164,.28) !important;
}

/* secondaires */
.theme-pro .cta-secondary,
.theme-pro .btn--ghost,
.theme-pro .cta-button--secondary{
  background:#fff !important;
  color: var(--pro-1) !important;
  border:1px solid rgba(14,165,164,.35) !important;
  box-shadow:0 6px 16px rgba(14,165,164,.10) !important;
}
.theme-pro .cta-secondary:hover,
.theme-pro .btn--ghost:hover{
  background: var(--pro-soft-2) !important;
  border-color: rgba(14,165,164,.55) !important;
}


/* =========================================================
   3) Remplacement des variables violettes SECTION par SECTION
   (on écrase ce que tu déclares dans #id {...})
========================================================= */

/* memoie-amour */
.theme-pro #memoire-amour{
  --violet: var(--pro-1);
  --violet-10: var(--pro-soft-2);
  --line: #e8f6f2;
}
.theme-pro #memoire-amour .band{
  background: linear-gradient(180deg,#fff, var(--pro-soft-2)) !important;
}
.theme-pro #memoire-amour .accent{ color:var(--pro-1) !important; }

/* pourquoi-milala */
.theme-pro #pourquoi-milala{
  --violet: var(--pro-1);
  --violet-2: var(--pro-2);
  --soft: var(--pro-soft-2);
  --line:#e8f6f2;
}
.theme-pro #pourquoi-milala .pm-gradient{
  background: linear-gradient(90deg,var(--pro-1),var(--pro-2)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.theme-pro #pourquoi-milala ul.pm-keys li::before{
  color: var(--pro-1) !important;
}
.theme-pro #pourquoi-milala blockquote{
  background:#f6fffc !important;
  border-left-color: var(--pro-1) !important;
}

/* stats-milala */
.theme-pro #stats-milala{
  --violet: var(--pro-1);
  --violet2: var(--pro-2);
  background: linear-gradient(180deg,#fff, var(--pro-soft-2)) !important;
}
.theme-pro #stats-milala h2{
  background: linear-gradient(90deg,var(--pro-1),var(--pro-2)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.theme-pro #stats-milala .center{
  color: var(--pro-1) !important;
  text-shadow: 0 0 10px rgba(14,165,164,.25) !important;
}
.theme-pro #stats-milala .track{ stroke:#dff5ef !important; }

/* temoignages */
.theme-pro #temoignages-milala{
  --violet: var(--pro-1);
  --bg-soft: linear-gradient(180deg,var(--pro-soft-2) 0%, #fff 60%);
}
.theme-pro #temoignages-milala .tm-hero:before{
  color: var(--pro-1) !important;
}
.theme-pro .tm-avatar{
  background: var(--pro-1) !important; /* pas de violet */
}
.theme-pro .tm-emotion{
  color: var(--pro-1) !important;
}
.theme-pro #temoignages-milala .tm-accent{
  background: linear-gradient(90deg,var(--pro-1),transparent) !important;
}

/* dans-le-kit */
.theme-pro #dans-le-kit{
  --violet: var(--pro-1);
  --lavande: var(--pro-soft-2);
  --line:#e8f6f2;
  background: linear-gradient(180deg,#fff, var(--pro-soft-2)) !important;
}
.theme-pro #dans-le-kit li::before{ color:var(--pro-1) !important; }
.theme-pro #dans-le-kit .encart strong{ color:var(--pro-1) !important; }

/* kit-mensuel */
.theme-pro #kit-mensuel{
  --violet: var(--pro-1);
  --lavande: var(--pro-soft-2);
}
.theme-pro .km-card{ background:#fff !important; }
.theme-pro .km-card .icon{ color:var(--pro-1) !important; }
.theme-pro .km-card:hover{
  box-shadow:0 16px 38px rgba(14,165,164,.12) !important;
}

/* abonnement */
.theme-pro #abonnement.abo{
  --violet: var(--pro-1);
  --violet2: var(--pro-2);
  background: linear-gradient(180deg,#fff,var(--pro-soft-2)) !important;
}
.theme-pro #abonnement .eyebrow{
  background: var(--pro-soft) !important;
  color: var(--pro-1) !important;
  border-color:#dff5ef !important;
}
.theme-pro #abonnement .btn--primary{
  background: var(--btn-pro) !important; /* uni */
}
.theme-pro #abonnement .btn--ghost{
  color: var(--pro-1) !important;
  border-color: rgba(14,165,164,.35) !important;
}
.theme-pro #abonnement .card.reco{
  border-color: var(--pro-1) !important;
  box-shadow:0 14px 42px rgba(14,165,164,.18) !important;
}
.theme-pro #abonnement .benefits{
  background:#e9faee !important;
  border-color:#d7f0de !important;
}

/* faq */
.theme-pro #faq-milala{
  --violet: var(--pro-1);
  --violet-2: var(--pro-2);
  --bg-soft: linear-gradient(180deg,var(--pro-soft-2) 0%,#fff 60%);
}
.theme-pro #faq-milala .badge{
  background: var(--btn-pro) !important; /* uni */
}
.theme-pro #faq-milala summary .chev{
  color: var(--pro-1) !important;
  background: var(--pro-soft) !important;
}
.theme-pro #faq-milala details[open] summary .chev{
  background:#dff5ef !important;
}

/* cta-final */
.theme-pro .cta-final h2{
  background: linear-gradient(90deg,var(--pro-1),var(--pro-2)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}


/* =========================================================
   4) Aside droite "Pensé pour le terrain" + chips allégés
========================================================= */
.theme-pro #pourquoi-milala .card.soft{
  background:#fff !important;
  border:1px solid rgba(15,18,35,.08) !important;
  box-shadow:0 6px 18px rgba(15,18,35,.06) !important;
}
.theme-pro #pourquoi-milala .card.soft p{
  color:#44475b !important;
  font-weight:500;
}
.theme-pro #pourquoi-milala .card.soft p strong{
  color: var(--pro-1) !important;
}

/* chips verts lourds -> menthe claire */
.theme-pro #pourquoi-milala .chip{
  background:#f6fffc !important;
  border:1px solid rgba(14,165,164,.18) !important;
  box-shadow:0 6px 14px rgba(14,165,164,.10) !important;
}
.theme-pro #pourquoi-milala .chip strong{
  color:#1f2430 !important;
  font-weight:800;
}
.theme-pro #pourquoi-milala .chip span{
  color:#44475b !important;
  font-weight:500;
}


/* =========================================================
   5) Dernière sécurité anti-violet (couleurs inline)
========================================================= */
.theme-pro *[style*="#5145CD"],
.theme-pro *[style*="#7C3AED"],
.theme-pro *[style*="#6C5CE7"]{
  color: var(--pro-1) !important;
}
.theme-pro *[style*="background:#edeaff"],
.theme-pro *[style*="#faf9ff"],
.theme-pro *[style*="#f8f7ff"],
.theme-pro *[style*="#f7f6ff"]{
  background: var(--pro-soft-2) !important;
}


/* =========================================================
   HERO PRO : fond vert (différent du kit particulier)
========================================================= */

/* ton hero principal */
body.theme-pro .k-hero,
body.theme-pro .hero-kit,
body.theme-pro #kit-sensoriel-hero { /* au cas où tu as un id */
  background:
    radial-gradient(900px circle at 12% 8%, rgba(14,165,164,0.10), transparent 60%),
    radial-gradient(700px circle at 85% 15%, rgba(34,197,94,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3fffb 100%) !important;
}

/* si tu veux aussi une petite “bande” verte derrière le bloc texte */
body.theme-pro .k-hero .lp-wrap,
body.theme-pro .hero-kit .lp-wrap{
  background: transparent !important; /* on laisse respirer le nouveau fond */
}

/* optionnel : badge du hero en vert (au lieu du bleu/violet) */
body.theme-pro .hero-kit .badge,
body.theme-pro .k-hero .badge{
  background: rgba(14,165,164,.10) !important;
  color: var(--pro-1) !important;
  border: 1px solid rgba(14,165,164,.25) !important;
}
/* override de l’inline background du HERO */
body.theme-pro section.hero{
  background:
    radial-gradient(900px circle at 12% 8%, rgba(14,165,164,0.10), transparent 60%),
    radial-gradient(700px circle at 85% 15%, rgba(34,197,94,0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3fffb 100%) !important;
}

/* Badges métiers — uniquement style, sans modifier le reste */
/* =========================================================
   Badges métiers PRO (menthe) — uniquement pour kit-pro
========================================================= */

.pro-badges{
  display:grid;
  grid-template-columns: repeat(3, max-content);
  gap:.55rem .7rem;
  margin: 0 0 1.2rem;
  justify-content:start; /* alignés au texte à gauche */
}

/* “Animateur·rice” passe dessous et se centre */
.pro-badges .pro-badge:last-child{
  grid-column: 1 / -1;
  justify-self:center;
}

@media (max-width:640px){
  .pro-badges{
    grid-template-columns: repeat(2, max-content);
  }
  .pro-badges .pro-badge:last-child{
    grid-column: 1 / -1;
    justify-self:center;
  }
}

.pro-badge{
  display:inline-block;
  padding:.38rem .85rem;
  border-radius:999px;
  background:#E9FFFA;              /* menthe légère */
  border:1px solid #BFEFE4;        /* menthe plus soutenu */
  color:#0B7E73;                   /* texte vert pro */
  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(11,126,115,.10);
}
