/* Landing page redesign - 2026-06-08 */

:root {
  --shell: 1320px;
  --section-space: clamp(88px, 8vw, 124px);
  --surface: #f5f9fe;
  --surface-blue: #eef8ff;
  --border-soft: #dbe8f4;
  /* Échelle d'ombres : repos discret -> survol marqué (hiérarchie) */
  --shadow-xs: 0 1px 2px rgba(7, 38, 82, .05);
  --shadow-sm: 0 4px 14px rgba(7, 38, 82, .06);
  --shadow-soft: 0 8px 22px rgba(7, 38, 82, .06);
  --shadow-card: 0 10px 26px rgba(7, 38, 82, .07);
  --shadow-hover: 0 20px 44px rgba(8, 39, 83, .13), 0 4px 12px rgba(7, 65, 139, .06);
}

body {
  color: #09275a;
  font-size: 16px;
  line-height: 1.65;
  background: #fff;
}

.page-shell {
  width: min(calc(100% - 64px), var(--shell));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 88px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(215, 228, 241, .8);
  box-shadow: 0 8px 30px rgba(7, 38, 82, .06);
  backdrop-filter: blur(18px);
}

.header-inner {
  width: min(calc(100% - 64px), 1380px);
  gap: 34px;
}

.brand {
  gap: 13px;
}

.brand-mark {
  width: 56px;
  height: 56px;
}

.brand-copy {
  gap: 1px;
}

.brand-copy strong {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.45px;
}

.brand-copy small {
  font-size: 12px;
  font-weight: 500;
}

.main-nav {
  height: 58px;
  padding-inline: 31px;
  gap: 34px;
  border: 1px solid #edf3f8;
  box-shadow: 0 12px 32px rgba(13, 49, 95, .08);
}

.main-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 650;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: right .25s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  right: 0;
}

.header-contact {
  gap: 10px;
}

.header-contact strong {
  font-size: 13px;
  font-weight: 750;
}

.header-contact small {
  color: #617494;
  font-size: 10px;
}

.header-cta {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(4, 93, 231, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(4, 93, 231, .28);
}

.hero {
  width: 100%;
  min-height: calc(100svh - 88px);
  background:
    linear-gradient(90deg, rgba(244, 250, 255, .99) 0%, rgba(244, 250, 255, .9) 31%, rgba(244, 250, 255, .42) 54%, rgba(244, 250, 255, .08) 72%),
    url("assets/hero-bg-optimized.webp") center / cover no-repeat,
    #e9f3fb;
}

.hero::after {
  height: 150px;
  background: linear-gradient(0deg, rgba(3, 28, 67, .12), transparent);
}

.hero-grid {
  min-height: calc(100svh - 88px);
  padding: clamp(54px, 6vh, 80px) 0;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: clamp(64px, 7vw, 110px);
}

.hero-copy {
  max-width: 690px;
}

.eyebrow-pill {
  margin-bottom: 25px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, .88);
  border-color: #cce8f5;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-xs);
}

.hero h1 {
  max-width: 690px;
  margin-bottom: 24px;
  font-size: clamp(58px, 5.15vw, 78px);
  line-height: 1.01;
  letter-spacing: -2.6px;
  font-weight: 750;
}

.hero-lead {
  margin-bottom: 22px;
  font-size: clamp(25px, 2vw, 31px);
  line-height: 1.3;
  letter-spacing: -.55px;
}

.hero-text {
  max-width: 650px;
  color: #29486f;
  font-size: 17px;
  line-height: 1.75;
}

.hero-benefits {
  max-width: 650px;
  margin-top: 34px;
  gap: 12px;
}

.benefit {
  min-width: 0;
  flex: 1;
  min-height: 108px;
  padding: 16px 14px;
  align-content: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(199, 221, 237, .85);
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}

.benefit:first-child {
  padding-left: 14px;
}

.benefit svg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
}

.hero-trustline {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 22px;
  color: #2c4c73;
  font-size: 12px;
  font-weight: 600;
}

.hero-trustline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trustline svg {
  width: 17px;
  height: 17px;
  color: var(--cyan);
}

.callback-card {
  width: 430px;
  padding: 35px;
  border: 1px solid rgba(213, 227, 240, .92);
  border-radius: 24px;
  box-shadow: 0 22px 52px rgba(5, 35, 75, .14), 0 3px 10px rgba(5, 35, 75, .05);
}

.kindilab-card {
  min-height: 590px;
  padding: 22px;
  display: block;
}

#kindilab-native-auto_assurance_rag {
  width: 100%;
}

.kindilab-card noscript {
  display: block;
  padding: 24px;
  color: #09275a;
  background: #f4f8fc;
  border: 1px solid #dbe8f4;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
}

.callback-card h2 {
  font-size: 27px;
  letter-spacing: -.6px;
}

.callback-card > p:first-of-type {
  max-width: 330px;
  margin: 8px 0 22px;
  color: #4c6281;
  font-size: 13px;
  line-height: 1.6;
}

.field {
  margin-bottom: 12px;
}

.field input,
.select-wrap select {
  height: 52px;
  border-color: #cad9e8;
  border-radius: 11px;
  font-size: 13px;
}

.select-label {
  margin-top: 15px;
  font-size: 11px;
}

.consent-field {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 9px;
  align-items: start;
  color: #536b8b;
  font-size: 10px;
  line-height: 1.5;
  cursor: pointer;
}

.consent-field input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.consent-field a {
  color: var(--blue);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-field.invalid span {
  color: #b92d3c;
}

.primary-button {
  height: 54px;
  margin-top: 18px;
  border-radius: 11px;
  font-size: 13px;
  box-shadow: 0 13px 28px rgba(3, 88, 222, .24);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(3, 88, 222, .3);
}

.form-trust {
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #526987;
  border-top: 1px solid #e2ebf3;
  font-size: 9px;
  font-weight: 600;
}

.form-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.form-trust svg {
  width: 14px;
  height: 14px;
  color: #0aa7c9;
}

.form-message {
  min-height: 18px;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
}

.partner-strip {
  border-top: 1px solid #eef4f9;
  border-bottom: 1px solid #e7eff6;
}

.partner-inner {
  height: 126px;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 38px;
}

.partner-label {
  color: #49617f;
  font-size: 10px;
  letter-spacing: .08em;
}

.partner-track {
  gap: clamp(46px, 5vw, 80px);
}

.partner-logo {
  max-width: 168px;
  height: 64px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 12px;
  filter: saturate(.95) contrast(1.02);
}

.content-section {
  padding: var(--section-space) 0;
}

.profiles {
  background: #fff;
}

.situations {
  padding-top: var(--section-space);
  background: var(--surface);
}

.section-heading {
  margin-bottom: 46px;
  align-items: flex-end;
  gap: 32px;
}

.section-copy {
  max-width: 720px;
}

.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: #029bc7;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.14;
  letter-spacing: -1.3px;
  font-weight: 720;
}

.section-copy p {
  max-width: 680px;
  margin: 14px 0 0;
  color: #536b8b;
  font-size: 15px;
  line-height: 1.75;
}

.section-heading > a {
  min-height: 44px;
  padding: 0 17px;
  flex: 0 0 auto;
  border: 1px solid #cfe0ef;
  border-radius: 12px;
  font-size: 12px;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.section-heading > a:hover {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.centered-heading {
  justify-content: center;
  text-align: center;
}

.centered-heading .section-copy {
  max-width: 760px;
}

.centered-heading .section-copy p {
  margin-inline: auto;
}

.carousel-wrap {
  padding-block: 18px;
  margin-block: -18px;
}

.carousel-wrap::before,
.carousel-wrap::after {
  top: 18px;
  bottom: 18px;
  width: 58px;
}

.situations .carousel-wrap::before {
  background: linear-gradient(90deg, var(--surface), transparent);
}

.situations .carousel-wrap::after {
  background: linear-gradient(-90deg, var(--surface), transparent);
}

.card-viewport {
  padding: 18px 0 34px;
  margin: -18px 0 -34px;
}

.card-track {
  gap: 26px;
}

.profile-track,
.situation-track {
  --visible-cards: 3.35;
}

.solution-card {
  flex-basis: calc((var(--track-w, 100%) - (var(--visible-cards) - 1) * 26px) / var(--visible-cards));
  border-color: #dce8f2;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.solution-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
}

.card-image {
  height: 210px;
}

.card-icon {
  left: 22px;
  top: 176px;
  width: 54px;
  height: 54px;
  border-width: 3px;
}

.card-icon svg {
  width: 27px;
  height: 27px;
}

.card-body,
.situation-track .card-body {
  min-height: 220px;
  padding: 38px 25px 25px;
}

.card-body h3 {
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.3;
}

.card-body p {
  margin-bottom: 18px;
  color: #526987;
  font-size: 13px;
  line-height: 1.7;
}

.card-body a {
  font-size: 12px;
}

.round-arrow {
  top: 48%;
  width: 52px;
  height: 52px;
}

.round-arrow.prev {
  left: -26px;
}

.round-arrow.next {
  right: -26px;
}

.pagination {
  height: 36px;
  margin-top: 20px;
}

.stats-section {
  padding: 0 0 var(--section-space);
}

.stats-grid {
  min-height: 0;
  padding: 30px 20px;
  background: linear-gradient(120deg, #eaf9ff, #f7fcff 48%, #edf8ff);
  border-color: #cbe7f4;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.stat {
  min-height: 0;
}

.stat svg {
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
}

.stat strong {
  font-size: 29px;
  font-weight: 750;
}

.stat span {
  margin-top: 3px;
  color: #4c6382;
  font-size: 12px;
}

.reassurance-section {
  padding: var(--section-space) 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(0, 170, 215, .2), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(21, 98, 230, .27), transparent 33%),
    linear-gradient(135deg, #061e4b, #08346f);
}

.reassurance-section .section-kicker {
  color: #5dd7ef;
}

.reassurance-section .section-copy p {
  color: #bfd1e8;
}

.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reassurance-card {
  padding: 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
  transition: transform .3s ease, background .3s ease;
}

.reassurance-card:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-6px);
}

.reassurance-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #4ed4ed;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
}

.reassurance-icon svg {
  width: 28px;
  height: 28px;
}

.reassurance-card h3 {
  margin: 4px 0 11px;
  font-size: 19px;
  line-height: 1.35;
}

.reassurance-card p {
  margin: 0;
  color: #c8d8eb;
  font-size: 13px;
  line-height: 1.75;
}

.process-section {
  padding: var(--section-space) 0;
  background: #fff;
}

.process-grid {
  display: block;
}

.process-intro {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}

.process-intro span {
  display: block;
  margin-bottom: 8px;
  letter-spacing: .09em;
}

.process-intro h2 {
  margin: 0;
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.14;
  letter-spacing: -1.3px;
}

.process-intro p {
  max-width: 650px;
  margin: 15px auto 0;
  color: #536b8b;
  font-size: 15px;
  line-height: 1.75;
}

.process-steps {
  gap: 22px;
}

.process-steps::before {
  display: none;
}

.process-step {
  padding: 28px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}

.step-icon {
  width: 60px;
  height: 60px;
  margin: 0 0 24px;
  background: #effaff;
  border-color: #d4ebf4;
  box-shadow: none;
}

.process-step > i {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 31px;
  height: 31px;
  margin: 0;
  font-size: 12px;
}

.process-step h3 {
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.4;
}

.process-step p {
  color: #536b8b;
  font-size: 13px;
  line-height: 1.7;
}

.faq-section {
  padding: var(--section-space) 0;
  background: #fff;
}

.faq-heading {
  align-items: flex-end;
}

.faq-grid {
  gap: 22px;
}

.faq-column {
  gap: 16px;
}

details {
  border-color: #dfe9f2;
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

details[open] {
  border-color: #b9d7ed;
  box-shadow: var(--shadow-sm);
}

summary {
  min-height: 66px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 650;
}

details p {
  padding: 0 22px 20px;
  color: #536b8b;
  font-size: 13px;
  line-height: 1.7;
}

.help-banner {
  padding: 12px 0 100px;
}

.help-inner {
  min-height: 132px;
  padding: 27px 30px;
  color: #fff;
  background:
    radial-gradient(circle at 20% 0, rgba(45, 191, 225, .24), transparent 28%),
    linear-gradient(110deg, #06275c, #0756c8);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(6, 39, 89, .18);
}

.help-icon {
  width: 68px;
  height: 68px;
  color: #0aa7cf;
}

.help-copy {
  max-width: 660px;
}

.help-copy strong {
  font-size: 20px;
  line-height: 1.35;
}

.help-copy span {
  color: #d7e6f8;
  font-size: 13px;
}

.help-phone {
  min-width: 290px;
  min-height: 70px;
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(1, 22, 56, .16);
}

.help-phone strong {
  font-size: 19px;
}

.site-footer {
  padding: 70px 0 30px;
  color: #fff;
  background: #061a3e;
}

.footer-grid {
  padding: 22px 18px 58px;
  grid-template-columns: 1.45fr .9fr .9fr 1.25fr;
  gap: 64px;
}

.footer-brand .brand-copy small,
.footer-brand p,
.footer-column,
.footer-contact a span {
  color: #aebfd6;
}

.footer-brand .brand-copy strong {
  font-size: 18px;
  line-height: 1.3;
}

.footer-brand .brand-copy small {
  font-size: 12px;
}

.footer-brand .brand-mark {
  width: 48px;
  height: 48px;
}

.footer-brand p {
  max-width: 340px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.75;
}

.social-links {
  gap: 11px;
}

.social-links a {
  width: 40px;
  height: 40px;
  color: #fff;
  border-color: #6681a5;
  font-size: 14px;
  font-weight: 750;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.social-links a:hover {
  color: #061a3e;
  background: #61d5ef;
  border-color: #61d5ef;
  transform: translateY(-2px);
}

.footer-column {
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.footer-column h3 {
  margin-bottom: 13px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .07em;
}

.footer-column a {
  min-height: 25px;
  transition: color .2s ease;
}

.footer-column a:hover {
  color: #61d5ef;
}

.footer-contact {
  gap: 15px;
  padding-left: 32px;
  border-color: #29456d;
}

.footer-contact > a,
.footer-hours {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 10px;
}

.footer-contact svg,
.footer-hours svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #61d5ef;
  stroke-width: 1.9;
}

.footer-contact .footer-contact-copy {
  grid-column: 2;
  padding-left: 0;
  display: grid;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

.footer-contact-copy strong {
  font-size: 16px;
  font-weight: 700;
}

.footer-contact-copy small {
  color: #aebfd6;
  font-size: 12px;
}

.footer-bottom {
  min-height: 58px;
  padding-top: 22px;
  color: #8fa4c0;
  border-color: #29456d;
  font-size: 12px;
  line-height: 1.55;
  gap: 20px;
}

.footer-bottom a {
  font-weight: 600;
  white-space: nowrap;
}

.mobile-action-bar {
  display: none;
}

#callback {
  scroll-margin-top: 110px;
}

@media (max-width: 1240px) {
  .header-inner {
    width: min(calc(100% - 40px), 1160px);
    gap: 20px;
  }

  .main-nav {
    gap: 22px;
    padding-inline: 22px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 45px;
  }

  .callback-card {
    width: 390px;
    padding: 30px;
  }

  .profile-track,
  .situation-track {
    --visible-cards: 3;
  }

  .round-arrow.prev {
    left: -18px;
  }

  .round-arrow.next {
    right: -18px;
  }
}

@media (max-width: 1060px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    margin-left: auto;
    display: grid;
  }

  .main-nav.open {
    top: 78px;
    left: 20px;
    right: 20px;
    display: flex;
    height: auto;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-radius: 16px;
  }

  .main-nav.open a {
    padding: 13px 10px;
  }

  .main-nav a::after {
    display: none;
  }

  .hero {
    background-position: 62% center;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 365px;
    gap: 30px;
  }

  .hero h1 {
    font-size: clamp(50px, 6vw, 64px);
  }

  .callback-card {
    width: 365px;
  }

  .profile-track,
  .situation-track {
    --visible-cards: 2.5;
  }

  .reassurance-card {
    padding: 26px;
    flex-direction: column;
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-bottom: 100px;
  }

  .page-shell {
    width: min(calc(100% - 36px), var(--shell));
  }

  .site-header {
    height: 76px;
  }

  .header-inner {
    width: calc(100% - 28px);
  }

  .header-contact {
    display: none;
  }

  .hero {
    min-height: 100svh;
    background:
      linear-gradient(180deg, rgba(244, 250, 255, .97) 0%, rgba(244, 250, 255, .88) 52%, rgba(244, 250, 255, .64) 100%),
      url("assets/hero-bg-optimized.webp") 69% center / cover no-repeat,
      #e9f3fb;
  }

  .hero-grid {
    min-height: 100svh;
    padding: 64px 0 74px;
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .callback-card {
    width: min(100%, 620px);
    justify-self: center;
  }

  .partner-inner {
    height: auto;
    padding: 25px 0;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .partner-label {
    text-align: center;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading > a {
    align-self: flex-start;
  }

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

  .reassurance-card {
    min-height: 0;
    flex-direction: row;
  }

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

  .help-inner {
    padding: 26px;
  }

  .help-phone {
    width: 100%;
    margin-top: 8px;
  }

  .site-footer {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .mobile-action-bar {
    position: fixed;
    z-index: 80;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 66px;
    padding: 7px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(205, 220, 234, .95);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(4, 31, 72, .24), 0 3px 10px rgba(4, 31, 72, .1);
    backdrop-filter: blur(18px);
  }

  .mobile-action-bar a {
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
  }

  .mobile-action-bar svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    stroke-width: 2;
  }

  .mobile-action-call {
    color: #0758d6;
    background: #edf5ff;
    border: 1px solid #cfe1f5;
  }

  .mobile-action-quote {
    color: #fff;
    background: linear-gradient(100deg, #0762ec, #0753d1);
    box-shadow: 0 10px 23px rgba(4, 87, 218, .25);
  }
}

@media (max-width: 620px) {
  :root {
    --section-space: 78px;
  }

  body {
    font-size: 15px;
  }

  .page-shell {
    width: calc(100% - 28px);
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand-copy strong {
    font-size: 13px;
  }

  .brand-copy small {
    font-size: 9px;
  }

  .hero-grid {
    padding-top: 44px;
    gap: 36px;
  }

  .eyebrow-pill {
    margin-bottom: 20px;
    padding: 9px 13px;
    font-size: 11px;
  }

  .hero h1 {
    margin-bottom: 20px;
    font-size: clamp(37px, 11.4vw, 50px);
    line-height: 1.03;
    letter-spacing: -1.5px;
  }

  .hero-lead {
    font-size: 22px;
  }

  .hero-text {
    font-size: 15px;
  }

  .hero-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .benefit {
    min-height: 66px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 34px 1fr;
    justify-items: start;
    align-items: center;
    text-align: left;
    font-size: 12px;
  }

  .benefit:first-child {
    padding-left: 14px;
  }

  .benefit svg {
    width: 26px;
    height: 26px;
    margin: 0;
  }

  .hero-trustline {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .callback-card {
    padding: 26px 22px;
    border-radius: 20px;
  }

  .kindilab-card {
    min-height: 560px;
    padding: 14px;
  }



  .callback-card h2 {
    font-size: 24px;
  }

  .form-trust {
    align-items: flex-start;
    flex-direction: column;
  }

  .partner-logo {
    max-width: 132px;
    height: 52px;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .section-heading h2,
  .process-intro h2 {
    font-size: 33px;
    letter-spacing: -.85px;
  }

  .section-copy p,
  .process-intro p {
    font-size: 14px;
  }

  .section-heading > a {
    min-height: 42px;
    font-size: 11px;
  }

  .profile-track,
  .situation-track {
    --visible-cards: 1.12;
  }

  .card-track {
    gap: 16px;
  }

  .solution-card {
    flex-basis: calc((var(--track-w, 100%) - (var(--visible-cards) - 1) * 16px) / var(--visible-cards));
  }

  .card-image {
    height: 200px;
  }

  .card-icon {
    top: 166px;
  }

  .card-body,
  .situation-track .card-body {
    min-height: 210px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    padding: 18px 10px;
  }

  .stat {
    min-height: 125px;
  }

  .stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #b8dceb;
  }

  .stat:nth-child(4) {
    border-top: 1px solid #b8dceb;
  }

  .stat strong {
    font-size: 24px;
  }

  .reassurance-card {
    padding: 24px;
    flex-direction: column;
  }

  .process-intro {
    margin-bottom: 38px;
    text-align: left;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: 0;
  }

  summary {
    min-height: 62px;
    padding-inline: 18px;
    font-size: 12px;
  }

  details p {
    padding-inline: 18px;
    font-size: 12px;
  }

  .help-banner {
    padding-bottom: 76px;
  }

  .help-inner {
    padding: 24px 20px;
  }

  .help-icon {
    width: 56px;
    height: 56px;
  }

  .help-copy strong {
    font-size: 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }

  .footer-contact {
    padding-left: 0;
    border-left: 0;
  }

  .footer-brand p {
    max-width: 460px;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 11px;
    font-size: 11px;
  }

  .mobile-action-bar {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    grid-template-columns: 102px minmax(0, 1fr);
  }

  .mobile-action-bar a {
    font-size: 11px;
  }
}

/* =========================================================
   Formulaire de devis multi-étapes (embed Kindilab .dfe-*)
   Restylé pour s'aligner à la charte du site
   ========================================================= */
.kindilab-card .dfe-form {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif !important;
  color: #09275a !important;
}

/* En-tête de carte (ajouté en HTML) */
.kindilab-head {
  margin-bottom: 22px;
}

.kindilab-head h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -.5px;
  line-height: 1.2;
}

.kindilab-head p {
  margin: 7px 0 0;
  max-width: 330px;
  color: #4c6281;
  font-size: 13px;
  line-height: 1.6;
}

/* --- Indicateurs d'étapes --- */
.kindilab-card .dfe-step-indicators {
  display: flex !important;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 18px;
}

.kindilab-card .dfe-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 116px;
  text-align: center;
}

.kindilab-card .dfe-step-indicator.clickable {
  cursor: pointer;
}

.kindilab-card .dfe-step-dot {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #8aa0bf;
  background: #eef4fb !important;
  border: 1px solid #dbe7f2 !important;
  border-radius: 50% !important;
  font-size: 16px;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kindilab-card .dfe-step-indicator.active .dfe-step-dot {
  color: #fff;
  background: linear-gradient(145deg, #075ee9, #06a9cb) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(4, 93, 231, .26);
}

.kindilab-card .dfe-step-indicator.completed .dfe-step-dot {
  color: #fff;
  background: #06a9cb !important;
  border-color: transparent !important;
}

.kindilab-card .dfe-step-label {
  color: #6c83a2;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.kindilab-card .dfe-step-indicator.active .dfe-step-label,
.kindilab-card .dfe-step-indicator.completed .dfe-step-label {
  color: #09275a;
}

.kindilab-card .dfe-step-connector {
  flex: 1 1 auto;
  height: 3px;
  margin-top: 21px;
  background: #dde8f1 !important;
  border-radius: 3px;
  overflow: hidden;
}

.kindilab-card .dfe-step-connector-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #075ee9, #06a9cb);
}

.kindilab-card .dfe-step-connector.completed {
  background: #06a9cb !important;
}

/* --- Barre de progression --- */
.kindilab-card .dfe-progress-bar {
  height: 6px;
  margin-bottom: 24px;
  background: #e7eef6 !important;
  border-radius: 99px;
  overflow: hidden;
}

.kindilab-card .dfe-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #075ee9, #06a9cb) !important;
  border-radius: 99px;
  transition: width .4s cubic-bezier(.3, .8, .3, 1);
}

/* --- Champs --- */
.kindilab-card .dfe-step-panel {
  animation: dfeFade .32s ease;
}

@keyframes dfeFade {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.kindilab-card .dfe-fields-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
  margin: 0 !important;
}

.kindilab-card .dfe-field {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kindilab-card .dfe-field.col-12 {
  grid-column: 1 / -1;
}

.kindilab-card .dfe-label {
  margin-bottom: 6px;
  color: #2c4a72 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

.kindilab-card .dfe-label::first-letter {
  text-transform: uppercase;
}

.kindilab-card .dfe-req {
  color: #e0566b !important;
}

.kindilab-card .dfe-input {
  width: 100% !important;
  height: 50px !important;
  padding: 0 14px !important;
  color: #09275a !important;
  background: #fff !important;
  border: 1px solid #cad9e8 !important;
  border-radius: 11px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: normal;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.kindilab-card .dfe-input::placeholder {
  color: #9bafc7 !important;
  opacity: 1;
}

.kindilab-card .dfe-input:focus {
  border-color: #075ee9 !important;
  box-shadow: 0 0 0 3px rgba(4, 95, 235, .13) !important;
}

.kindilab-card .dfe-input.dfe-invalid,
.kindilab-card .dfe-field.has-error .dfe-input {
  border-color: #e0566b !important;
}

/* --- Champs date : pictogramme bleu + interaction --- */
.kindilab-card input[type="date"].dfe-input {
  padding-right: 12px !important;
  cursor: pointer;
}

.kindilab-card input[type="date"].dfe-input::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  cursor: pointer;
  opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075ee9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  transition: opacity .2s ease, transform .15s ease;
}

.kindilab-card input[type="date"].dfe-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Format "jj/mm/aaaa" affiché en gris (placeholder) tant que le champ est vide */
.kindilab-card input[type="date"].dfe-input:not([data-filled])::-webkit-datetime-edit {
  color: #9bafc7;
}

.kindilab-card input[type="date"].dfe-input[data-filled]::-webkit-datetime-edit {
  color: #09275a;
}

.kindilab-card input[type="date"].dfe-input:focus {
  border-color: #075ee9 !important;
  box-shadow: 0 0 0 3px rgba(4, 95, 235, .13) !important;
}

/* --- Cases à cocher (consentements) --- */
.kindilab-card .dfe-checkbox-label {
  display: grid !important;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  align-items: start;
  cursor: pointer;
  margin: 0 !important;
  padding: 13px 15px;
  background: #f6f9fd;
  border: 1px solid #e4edf5;
  border-radius: 13px;
}

.kindilab-card .dfe-checkbox {
  width: 19px !important;
  height: 19px !important;
  margin: 1px 0 0 !important;
  accent-color: #13b98d;
  cursor: pointer;
}

.kindilab-card .dfe-checkbox-label:has(.dfe-checkbox:checked) {
  background: #ecfaf4;
  border-color: #b9e7d4;
}

.kindilab-card .dfe-checkbox-text {
  color: #52688a !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* --- Boutons de navigation (display sans !important : le JS masque "Précédent") --- */
.kindilab-card .dfe-step-nav {
  display: flex !important;
  gap: 12px;
  margin-top: 24px;
}

.kindilab-card .dfe-btn {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #2c4a72;
  background: #eef4fb !important;
  border: 1px solid #dce8f2 !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}

.kindilab-card .dfe-btn-prev {
  flex: 0 0 auto;
}

.kindilab-card .dfe-btn-prev:hover {
  background: #e3edf6 !important;
}

.kindilab-card .dfe-btn-next,
.kindilab-card .dfe-btn-primary {
  flex: 1 1 auto;
  color: #fff !important;
  background: linear-gradient(90deg, #075ee9, #064fd0) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(3, 88, 222, .22);
}

.kindilab-card .dfe-btn-next:hover,
.kindilab-card .dfe-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(3, 88, 222, .3);
  filter: brightness(1.04);
}

/* --- Messages d'erreur --- */
.kindilab-card .dfe-error {
  margin-top: 5px;
  color: #d33a4c !important;
  font-size: 11px !important;
  line-height: 1.4;
}

.kindilab-card .dfe-error:empty {
  display: none;
}

@media (max-width: 620px) {
  .kindilab-head h2 {
    font-size: 22px;
  }

  .kindilab-card .dfe-step-label {
    font-size: 10px;
  }

  .kindilab-card .dfe-fields-row {
    gap: 12px;
  }

  .kindilab-card .dfe-input {
    height: 48px !important;
  }
}

/* =========================================================
   Animations (perf-safe : opacity + transform uniquement,
   désactivées si prefers-reduced-motion)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Révélation au défilement */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
  }

  .reveal,
  .reveal-in {
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal-in {
    opacity: 1;
    transform: none;
  }

  /* Entrée du hero (le H1 reste statique pour préserver le LCP) */
  .hero-copy .eyebrow-pill { animation: heroUp .6s .05s both cubic-bezier(.22, .8, .3, 1); }
  .hero-lead { animation: heroUp .6s .14s both cubic-bezier(.22, .8, .3, 1); }
  .hero-text { animation: heroUp .6s .22s both cubic-bezier(.22, .8, .3, 1); }
  .hero-benefits { animation: heroUp .6s .30s both cubic-bezier(.22, .8, .3, 1); }
  .hero-trustline { animation: heroUp .6s .38s both cubic-bezier(.22, .8, .3, 1); }
  .kindilab-card { animation: heroUp .7s .12s both cubic-bezier(.22, .8, .3, 1); }

  @keyframes heroUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }

  /* Micro-interactions */
  .partner-logo {
    transition: transform .25s ease, filter .25s ease;
  }

  .partner-logo:hover {
    transform: translateY(-3px);
    filter: saturate(1) contrast(1.02);
  }

  .stat {
    transition: transform .25s ease;
  }

  .stat:hover {
    transform: translateY(-4px);
  }

  .footer-bottom a,
  .footer-column a {
    transition: color .2s ease, transform .2s ease;
  }

  .footer-column a:hover {
    transform: translateX(2px);
  }
}