/* Identité Dzidziguri vert forêt — 20260810a. */
/* Palette commune Dzidziguri : vert forêt profond, contraste net, eucalyptus réservé aux accents. */
:root {
  color-scheme: dark;
  --porcelain: #050706;
  --porcelain-2: #050706;
  --paper: #0B0E0C;
  --canvas: #050706;
  --ink: #f7f8fa;
  --ink-2: #050706;
  --ink-3: #0B0E0C;
  --text: #f7f8fa;
  --muted: #AAB4AE;
  --soft: #7F8A84;
  --muted-dark: #AAB4AE;
  --soft-dark: #7F8A84;
  --forest: #3FAE78;
  --forest-2: #55C28D;
  --forest-glow: #55C28D;
  --forest-accent: #55C28D;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.24);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-2: rgba(255, 255, 255, 0.24);
  --section-space: clamp(5.25rem, 10vw, 8.5rem);
  --type-page-title: clamp(3rem, 6vw, 4.5rem);
  --type-section-title: clamp(2.15rem, 4vw, 3.35rem);
  --type-step-title: clamp(1.55rem, 2.35vw, 2rem);
}

/* Signature Dzidziguri finale : géométrie vectorielle, sans dépendance de police. */
.brand-logo {
  display: block;
  width: auto;
  height: 38px;
  flex: none;
}

.foot-brand .brand-logo { height: 42px; }
.brand > .mark,
.foot-brand > .mark { display: none; }

.brand,
.foot-brand { gap: 0; }

@media (max-width: 520px) {
  .brand-logo { height: 34px; }
  .foot-brand .brand-logo { height: 38px; }
}

html,
body {
  background: var(--porcelain);
  color: var(--text);
}

a:hover { color: #fff; }

/* Système de boutons commun : vert forêt pour l'action, surface translucide pour le secondaire. */
body .btn-primary,
body .btn-on-dark,
body .btn-glow,
body .hero-actions .btn {
  border-color: rgba(85, 194, 141, 0.28);
  background: linear-gradient(180deg, #3FAE78, #2B895B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 28px -18px rgba(43, 137, 91, 0.82);
  color: #fff;
}

body .btn-primary:hover,
body .btn-on-dark:hover,
body .btn-glow:hover,
body .hero-actions .btn:hover {
  border-color: rgba(85, 194, 141, 0.42);
  background: linear-gradient(180deg, #55C28D, #3FAE78);
  color: #fff;
}

body .btn:hover { transform: translateY(-1px); }
body .btn:active { transform: translateY(0); }

body .btn-ghost {
  border-color: rgba(85, 194, 141, 0.24);
  background: linear-gradient(145deg, rgba(85, 194, 141, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #F5F7F3;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

body .btn-ghost:hover {
  border-color: rgba(85, 194, 141, 0.44);
  background: linear-gradient(145deg, rgba(85, 194, 141, 0.15), rgba(255, 255, 255, 0.05));
  color: #fff;
}

body .btn:focus-visible,
body .nav-phone:focus-visible {
  outline: 2px solid #55C28D;
  outline-offset: 3px;
}

/* Lancer la démo reste l'unique action blanche de l'accueil. */
body .product-landing .hero-ctas .btn-on-dark {
  border-color: rgba(255, 255, 255, 0.72);
  background: #fff;
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.9);
  color: #2B895B;
}

body .product-landing .hero-ctas .btn-on-dark:hover {
  border-color: #fff;
  background: #F0F4F2;
  color: #3FAE78;
}

/* Les libellés restent textuels : aucune puce décorative en début de phrase. */
.eyebrow::before,
.kicker::before,
.crumb i,
.video-placeholder::before,
.hero-tag b {
  display: none !important;
  content: none !important;
}
.eyebrow,
.hero-tag { gap: 0; }

.eyebrow {
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

body .sx-head { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
body .sx-title,
body .landing-section h2,
body .cta-wrap h2 {
  font-family: var(--display);
  font-size: var(--type-section-title);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.045em;
}
body .sx-intro { max-width: 66ch; margin-top: 1.25rem; font-size: clamp(1.03rem, 1.35vw, 1.16rem); line-height: 1.65; }

body .subhero h1 { font-size: var(--type-page-title); line-height: 1; letter-spacing: -.055em; }
body .story-step h3,
body .process-row h3,
body .scenario h3 {
  font-family: var(--display);
  font-size: var(--type-step-title);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.035em;
}

/* Même action téléphonique dans tous les en-têtes. */
body .nav-phone {
  display: inline-flex;
  min-height: 40px;
  padding: 8px 14px;
  align-items: center;
  border: 1px solid rgba(85, 194, 141, .24);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
body .nav-phone:hover { border-color: rgba(85, 194, 141, .48); background: rgba(85, 194, 141, .08); color: #fff; }

/* Preuves rapides : capsules vert forêt, sobres et sans pictogramme superflu. */
.product-landing .hero-tags,
.landing-signals { gap: 0.5rem; }

.product-landing .hero-tag,
.landing-signals span {
  padding: 0.38rem 0.68rem;
  border: 1px solid rgba(85, 194, 141, 0.22);
  background: linear-gradient(145deg, rgba(85, 194, 141, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 24px -20px rgba(0, 0, 0, 0.8);
  color: #D7DEDA;
  font-size: 0.72rem;
  line-height: 1.25;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

@media (max-width: 620px) {
  .product-landing .hero-tags,
  .landing-signals { gap: 0.4rem; }

  .product-landing .hero-tag,
  .landing-signals span {
    padding: 0.34rem 0.58rem;
    font-size: 0.68rem;
  }
}

/* La barre de navigation reste une surface sombre continue. */
.nav,
.nav.scrolled {
  background: linear-gradient(90deg, rgba(11, 43, 33, 0.96), rgba(15, 51, 39, 0.96));
  border-bottom-color: rgba(85, 194, 141, 0.14);
}

.nav .wordmark,
.nav.scrolled .wordmark,
.brand,
.back { color: #fff; }

.back:hover { background: rgba(255, 255, 255, 0.1); }

/* Le Journal reste dans le même univers graphite que l'accueil. */
.subhero {
  background: linear-gradient(180deg, #050706, #0B0E0C);
  color: #fff;
  border-bottom: 1px solid var(--line);
}

.subhero h1 { color: #fff; }
.subhero p.lead { color: var(--muted); }

.nav .btn-primary,
.nav:not(.scrolled) .btn-primary,
.nav.scrolled .btn-primary {
  border-color: rgba(85, 194, 141, 0.28);
  background: linear-gradient(180deg, #3FAE78, #2B895B);
  color: #fff;
}

.nav .btn-primary:hover,
.nav:not(.scrolled) .btn-primary:hover,
.nav.scrolled .btn-primary:hover {
  background: linear-gradient(180deg, #55C28D, #3FAE78);
  color: #fff;
}

.post-card {
  background: var(--paper);
  border-color: var(--line);
}

.post-card h3 { color: #fff; }
.post-card p { color: var(--muted); }

/* Les sections, la FAQ et le pied de page parlent la même langue visuelle. */
.impact { background: linear-gradient(180deg, #0B0E0C, #050706); }
.foot { background: #050706; }

.foot { color: var(--muted); }
.foot-brand .wordmark { color: #fff; }
.foot-desc,
.foot-legal,
.foot-col a,
.foot-bottom { color: var(--muted); }
.foot-legal strong { color: #fff; }
.foot-legal a { color: var(--forest-glow); }
.foot-col h2 { color: var(--soft); }
.foot-legal a:hover,
.foot-col a:hover { color: #fff; }

/* Fenêtre de contact email partagée par toutes les pages. */
.mail-dialog {
  position: fixed;
  inset: 0;
  width: min(92vw, 430px);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(85, 194, 141, 0.3);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(63, 174, 120, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(17, 57, 43, 0.97), rgba(7, 14, 23, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 30px 80px -35px rgba(0, 0, 0, 0.92);
  color: #fff;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.16, 1, .3, 1), display 0.22s allow-discrete;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

.mail-dialog[open] { opacity: 1; transform: none; }
.mail-dialog::backdrop { background: rgba(2, 7, 13, 0.7); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
@starting-style { .mail-dialog[open] { opacity: 0; transform: translateY(10px) scale(0.98); } }

.mail-dialog-inner { position: relative; padding: clamp(1.5rem, 5vw, 2.2rem); }
.mail-dialog-kicker { color: #55C28D; font: 650 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.mail-dialog h2 { margin: .65rem 2.7rem .55rem 0; color: #fff; font-size: clamp(1.65rem, 6vw, 2.15rem); line-height: 1.05; letter-spacing: -.035em; }
.mail-dialog p { margin: 0; color: #b9c5d3; line-height: 1.55; }
.mail-dialog-address { display: block; margin-top: 1.35rem; padding: .9rem 1rem; border: 1px solid rgba(85, 194, 141, .22); border-radius: 13px; background: rgba(6, 14, 24, .55); color: #fff; font: 650 clamp(.88rem, 4vw, 1rem)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.mail-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.mail-dialog-action { min-height: 44px; padding: .7rem .9rem; border: 1px solid rgba(85, 194, 141, .24); border-radius: 999px; color: #fff; background: rgba(85, 194, 141, .07); font: 650 .85rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; cursor: pointer; }
.mail-dialog-action.primary { background: linear-gradient(180deg, #3FAE78, #2B895B); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.mail-dialog-action:hover { border-color: rgba(85, 194, 141, .48); background-color: rgba(85, 194, 141, .14); }
.mail-dialog-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid rgba(85, 194, 141,.2); border-radius: 50%; background: rgba(255,255,255,.045); color: #D7DEDA; font-size: 1.25rem; cursor: pointer; }
.mail-dialog-close:hover { background: rgba(85, 194, 141,.13); color: #fff; }
@media (max-width: 420px) { .mail-dialog-actions { grid-template-columns: 1fr; } }

/* Les grandes surfaces passent progressivement du vert forêt au presque noir.
   Le mobile validé conserve exactement ses fonds actuels. */
@media (min-width: 621px) {
.product-landing.hero {
  background:
    radial-gradient(ellipse 48% 58% at 82% 22%, rgba(63, 174, 120, .12), transparent 70%),
    linear-gradient(135deg, #050706 0%, #050706 48%, #0B0E0C 100%) !important;
}

.landing-page .subhero {
  background: linear-gradient(180deg, #050706 0%, #0B0E0C 48%, #0B0E0C 100%);
}

.landing-page .landing-section {
  background: linear-gradient(180deg, #0B0E0C 0%, #0B0E0C 45%, #050706 100%);
}

.landing-page .landing-section.alt {
  background: linear-gradient(180deg, #050706 0%, #0B0E0C 48%, #050706 100%);
}

.value-estimator {
  background: linear-gradient(180deg, #0B0E0C 0%, #0B0E0C 46%, #0B0E0C 100%) !important;
}

.cost-comparison {
  background: linear-gradient(180deg, #0B0E0C 0%, #050706 50%, #050706 100%) !important;
}

.impact {
  background: linear-gradient(180deg, #050706 0%, #0B0E0C 52%, #050706 100%) !important;
}

#methode {
  background: linear-gradient(180deg, #050706 0%, #050706 44%, #050706 100%) !important;
}

#faq {
  background: linear-gradient(180deg, #050706 0%, #0B0E0C 54%, #050706 100%);
}

.foot {
  background: linear-gradient(180deg, #050706 0%, #050706 100%);
}

#faq .sx-head,
#faq .faq-list {
  width: min(100%, 980px);
  margin-inline: auto;
}

#faq .sx-head {
  text-align: center;
}

#faq .sx-head .eyebrow { width: 100%; justify-content: center; text-align: center; }

#faq .sx-title {
  max-width: none;
  margin-inline: auto;
  font-size: var(--type-section-title);
  text-align: center;
}

#faq .sx-intro {
  max-width: 72ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
}

#faq .faq-item,
body .card { background: var(--paper); border-color: var(--line); box-shadow: none; }

#faq .faq-item summary::after {
  color: var(--forest-glow);
  background: rgba(63, 174, 120, 0.12);
}

/* Pages de contenu et documents légaux. */
body p,
body li,
body .intro,
body .data,
body .fine,
body .footer { color: var(--muted); }

body .data { background: #0B0E0C; }
body .data strong { color: #fff; }
body .footer a { color: var(--forest-glow); }
body table[style] { color: var(--muted) !important; }

@media (prefers-reduced-transparency: reduce) {
  .nav,
  .nav.scrolled,
  body .card { background: #0B0E0C; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(255, 255, 255, 0.48); }
}


/* Dzidziguri noir premium — 20260810b. Le noir porte les surfaces ; le vert signe les actions. */
:root {
  --porcelain: #050706;
  --porcelain-2: #070A08;
  --paper: #0B0E0C;
  --canvas: #050706;
  --ink: #F4F7F5;
  --ink-2: #F4F7F5;
  --ink-3: #D7DEDA;
  --text: #F4F7F5;
  --muted: #AAB4AE;
  --soft: #7F8A84;
  --muted-dark: #AAB4AE;
  --soft-dark: #7F8A84;
  --forest: #3FAE78;
  --forest-2: #55C28D;
  --forest-glow: #55C28D;
  --forest-accent: #3FAE78;
  --line: rgba(244, 247, 245, .13);
  --line-2: rgba(244, 247, 245, .22);
  --line-dark: rgba(244, 247, 245, .13);
  --line-dark-2: rgba(244, 247, 245, .22);
}

html, body { background: #050706 !important; color: #F4F7F5; }
.nav, .nav.scrolled { background: rgba(5, 7, 6, .94) !important; border-bottom-color: rgba(244,247,245,.12) !important; }
.product-landing.hero,
.landing-page .subhero,
.landing-page .landing-section,
.landing-page .landing-section.alt,
.value-estimator,
.cost-comparison,
.impact,
#methode,
#faq,
.foot,
.subhero {
  background-color: #050706 !important;
  background-image: none !important;
}
.product-landing.hero {
  background-image: radial-gradient(ellipse 46% 42% at 50% 46%, rgba(43,137,91,.16), transparent 72%) !important;
}
.post-card,
#faq .faq-item,
body .card,
.estimate-panel,
.comparison-card,
.scenario,
.story-step,
.process-row,
.contact-form,
body .data {
  background: #0B0E0C !important;
  border-color: rgba(244,247,245,.13) !important;
  box-shadow: none !important;
}
body h1, body h2, body h3, body h4, .post-card h3, .subhero h1 { color: #F4F7F5; }
body p, body li, body .intro, body .data, body .fine, body .footer, .post-card p { color: #AAB4AE; }
body .btn-primary,
body .btn-on-dark,
body .btn-glow,
body .hero-actions .btn,
body .product-landing .hero-ctas .btn-on-dark,
.nav .btn-primary,
.mail-dialog-action.primary {
  border-color: #3FAE78 !important;
  background: #3FAE78 !important;
  color: #04110A !important;
  box-shadow: none !important;
}
body .btn-primary:hover,
body .btn-on-dark:hover,
body .btn-glow:hover,
body .hero-actions .btn:hover,
body .product-landing .hero-ctas .btn-on-dark:hover,
.nav .btn-primary:hover,
.mail-dialog-action.primary:hover { background: #55C28D !important; color: #04110A !important; }
body input, body textarea, body select {
  border-color: rgba(244,247,245,.16) !important;
  background: #0B0E0C !important;
  color: #F4F7F5 !important;
}
body input::placeholder, body textarea::placeholder { color: #AAB4AE !important; opacity: 1; }
.mail-dialog {
  border-color: rgba(63,174,120,.34);
  background: radial-gradient(circle at 18% 0%, rgba(63,174,120,.12), transparent 42%), #0B0E0C;
}
.mail-dialog-address { background: #050706; }
.product-landing .hero-sub, .product-landing .hero-tags, .hero-demo-note { color: #AAB4AE; }
.hero-demo, .hero-demo-stage { background-color: #0B0E0C !important; border-color: rgba(244,247,245,.13) !important; }
.hero-demo-stage { background-image: radial-gradient(circle at 50% 24%, rgba(63,174,120,.12), transparent 52%) !important; }
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.scrolled, body .card { background: #0B0E0C !important; }
}

/* Finition contraste — 20260810c. Les surfaces importantes restent lisibles dans le noir. */
:root {
  --surface-raised: #101512;
  --surface-strong: #141C17;
  --line-green: rgba(85, 194, 141, .30);
}

#faq {
  border-block: 1px solid rgba(85, 194, 141, .12);
  background-color: #080B09 !important;
  background-image: radial-gradient(ellipse 56% 42% at 50% 48%, rgba(63, 174, 120, .075), transparent 72%) !important;
}

#faq .faq-item {
  border-color: var(--line-green) !important;
  background: #111713 !important;
  transition: border-color .2s cubic-bezier(.16,1,.3,1), background-color .2s cubic-bezier(.16,1,.3,1) !important;
}

#faq .faq-item:hover {
  border-color: rgba(85, 194, 141, .48) !important;
  background: #141C17 !important;
}

#faq .faq-item[open] {
  border-color: rgba(85, 194, 141, .62) !important;
  background: radial-gradient(circle at 92% 0, rgba(63,174,120,.12), transparent 34%), #162019 !important;
}

#faq .faq-item summary { color: #F4F7F5 !important; }
#faq .faq-item summary::after {
  color: #55C28D !important;
  background: rgba(63, 174, 120, .18) !important;
}
#faq .faq-item p { color: #C3CDC7 !important; }

#contact .cta-wrap {
  border-color: rgba(85, 194, 141, .38) !important;
  background: radial-gradient(ellipse 64% 48% at 50% 0, rgba(63,174,120,.15), transparent 68%), var(--surface-raised) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#contact .contact-form { background: transparent !important; }
#contact .contact-field label { color: #E6EBE8; }
#contact .contact-field input,
#contact .contact-field textarea {
  border-color: rgba(244,247,245,.24) !important;
  background: #070A08 !important;
}
#contact .contact-field input:hover,
#contact .contact-field textarea:hover { border-color: rgba(85,194,141,.42) !important; }
#contact .contact-field input:focus,
#contact .contact-field textarea:focus {
  border-color: #55C28D !important;
  box-shadow: 0 0 0 3px rgba(63,174,120,.22) !important;
}

.impact .story-step,
#methode .story-step { background: transparent !important; }

@media (min-width: 861px) {
  .impact .story-steps { --path-gap: clamp(2rem, 4vw, 4.5rem); }
  .impact .story-steps::before { display: none; }
  .impact .story-step:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 1.1rem;
    left: 50%;
    width: calc(100% + var(--path-gap));
    height: 1px;
    background: linear-gradient(90deg, rgba(85,194,141,.72), rgba(85,194,141,.44));
    box-shadow: 0 0 8px rgba(63,174,120,.18);
    content: "";
  }
  .impact .story-index { z-index: 2; }
}

@media (min-width: 621px) {
  #methode .story-steps { --path-gap: clamp(2.5rem, 5vw, 5rem); }
  #methode .story-steps::before { display: none; }
  #methode .story-step:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 1.1rem;
    left: 50%;
    width: calc(100% + var(--path-gap));
    height: 1px;
    background: linear-gradient(90deg, rgba(85,194,141,.72), rgba(85,194,141,.44));
    box-shadow: 0 0 8px rgba(63,174,120,.18);
    content: "";
  }
  #methode .story-index { z-index: 2; }
}

/* Boutons Dzidziguri — un langage unique, franc et sans effets décoratifs. */
body .btn,
body .nav-phone,
body .back {
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--body, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color .2s cubic-bezier(.16,1,.3,1), border-color .2s cubic-bezier(.16,1,.3,1), color .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1) !important;
}

body .btn-primary,
body .btn-on-dark,
body .btn-glow,
body .hero-actions .btn,
body .product-landing .hero-ctas .btn-on-dark,
body .nav .btn-primary,
body .nav-phone,
body .contact-submit .btn {
  border-color: #3FAE78 !important;
  background: #3FAE78 !important;
  color: #04110A !important;
}

body .btn-primary:hover,
body .btn-on-dark:hover,
body .btn-glow:hover,
body .hero-actions .btn:hover,
body .product-landing .hero-ctas .btn-on-dark:hover,
body .nav .btn-primary:hover,
body .nav-phone:hover,
body .contact-submit .btn:hover {
  border-color: #55C28D !important;
  background: #55C28D !important;
  color: #04110A !important;
  transform: translateY(-1px) !important;
}

body .btn-ghost,
body .product-landing .hero-ctas .btn-ghost,
body .back {
  border-color: rgba(244,247,245,.28) !important;
  background: #101512 !important;
  color: #F4F7F5 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .btn-ghost:hover,
body .product-landing .hero-ctas .btn-ghost:hover,
body .back:hover {
  border-color: rgba(85,194,141,.62) !important;
  background: #162019 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  text-decoration: none;
}

body .btn:active,
body .nav-phone:active,
body .back:active { transform: translateY(0) !important; }

@media (max-width: 520px) {
  body .btn,
  body .nav-phone,
  body .back { min-height: 42px; padding: 10px 14px; font-size: 13px; }
}

/* Finition CTA — contraste, variété et centrage optique. */
body .btn,
body .nav-phone,
body .back {
  justify-content: center;
  text-align: center;
}

body .nav-phone {
  border-color: rgba(85,194,141,.48) !important;
  background: #101512 !important;
  color: #F4F7F5 !important;
}

body .nav-phone:hover {
  border-color: #55C28D !important;
  background: #162019 !important;
  color: #fff !important;
}

body .cta-wrap {
  border: 1px solid rgba(85,194,141,.28) !important;
  border-radius: 16px !important;
  background: #101512 !important;
  box-shadow: none !important;
  color: #F4F7F5 !important;
}

body .cta-wrap::before {
  background: radial-gradient(circle at 50% 115%, rgba(63,174,120,.12), transparent 58%) !important;
}

body .cta-wrap h2 { color: #F4F7F5 !important; }
body .cta-wrap p { color: #C3CDC7 !important; }

/* CTA du hero : mêmes dimensions et libellés parfaitement centrés. */
body .product-landing .hero-ctas .btn {
  min-width: 172px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ai-disclosure {
  max-width: 760px;
  margin: 18px 0 0;
  color: #7F8A84;
  font-size: 12px;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}

/* Sur mobile, les deux séquences utilisent la même timeline à gauche. */
@media (max-width: 620px) {
  .impact .story-steps {
    position: relative;
    max-width: 34rem;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 2.35rem;
    align-items: stretch;
  }

  .impact .story-steps::before {
    display: block !important;
    position: absolute;
    z-index: 0;
    top: 1.125rem;
    bottom: 1.125rem;
    left: 1.125rem;
    width: 1px;
    height: auto;
    background: rgba(85,194,141,.38);
    content: "";
  }

  .impact .story-step {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 0 0 0 3.5rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
  }

  .impact .story-index {
    position: absolute !important;
    top: 0;
    left: 0;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 !important;
    place-items: center;
    background: #050706;
  }

  .impact .story-step h3 {
    display: block;
    min-height: 0;
    margin: 0;
    color: #fff;
    text-align: left;
  }

  .impact .story-step p {
    max-width: 32ch;
    margin: .7rem 0 0;
    color: #AAB4AE;
    text-align: left;
  }
}