:root {
    --color1: #202636;
    --color2: #ff8011;
    --color3: #087081;
    --color4: #737b8f;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--color1);
    font-size: 18px;
    font-weight: 400;
    overflow-x: hidden;
}

.color-1 {
    color: var(--color1);
}

.color-2 {
    color: #ff8011;
}

.color-3 {
    color: var(--color3);
}

.color-4 {
    color: var(--color4);
}

.container {
    max-width: 1400px !important;
}

#edi_scroll_iframe {
    width: 100%;
    min-height: 500px; /* s’assure que l’iframe ne soit jamais trop petite */
}
.container1 {
    background: #fff;
}

.uppercase {
    text-transform: uppercase;
}

header {
    min-height: 750px;
    padding-bottom: 50px;
    background: url('images/bg-header1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    position: relative;
    z-index: 1;
}

.logo-bar {
    background: #fff;
    /* fond blanc */
    padding: 15px 0;
    /* espace autour du logo */
}

.logo-bar img {
    /* largeur max du logo */
    height: auto;
}

header {
    min-height: 750px;
    padding-bottom: 50px;
    background: url('images/bg-header1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    position: relative;
    z-index: 1;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* noir avec 50% d’opacité */
    z-index: -1;
}

.header-max-content {
    max-width: 700px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.info-block {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    align-items: flex-start;
}

.info-block .icon {
    flex-shrink: 0;
    margin-right: 1rem;
}

.info-block .icon img {
    width: 40px;
    height: auto;
}

.info-block .content h5 {
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.info-block ul {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}

.info-block ul li {
    list-style: none;
    position: relative;
    margin-bottom: 0.4rem;
}

.info-block ul li::before {
    content: "✔";
    color: #00a7d7;
    font-weight: bold;
    margin-right: 0.5rem;
}

.credit {
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
}


.bg-iframe {
    background-color: #EEF6Fe;
    /* Blanc légèrement transparent */
    border-radius: 20px;
    /* Ajouter des coins arrondis */
    padding: 20px;
    /* Ajouter un peu d'espace intérieur */
    box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.05);
    /* Ajouter une ombre */
}

.iframe-title {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    line-height: 30px;

    text-align: center;
    color: #ff8011;
    margin-bottom: 20px;
    /* Ajouter un peu d'espace en bas */
}




#scroll_iframe {
    border-radius: 30px;
    overflow: hidden;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.05);
}

.title {
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;

}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    background-color: #ffffff;
    color: #087081;
    font-weight: 600;
    padding: 15px;
    border-radius: 5px;
    padding-left: 15px;
    /* text-align: center; */
}

ul {
    list-style: none;
}

ul li {
    position: relative;
    padding-top: 8px;
    padding-left: 10px;
}

ul li::before {
    content: '•';
    position: absolute;
    left: -18px;
}

header li {
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    font-weight: 600;
}

.header-info {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    width: 776px;
    height: 159px;
    background: url('images/bg-header-info.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: -10px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
}

.arrow {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #fff;
    border-radius: 100%;
    margin-left: 5px;
}



p {
    /* line-height: 40px; */
}

.section-title {
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    color: #ff8011;
    font-weight: 600;
    text-transform: uppercase;
}

.separator {
    width: 100%;
    height: 2px;
    background: linear-gradient(103.89deg, #00bcfd, #23d2b5);
    margin: 40px 0;
}

.section-separator {
    margin-top: 5px;
    width: 100px;
    height: 3px;
    background-color: #ff8011;
}

h2 {
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    font-weight: 500;
}



button {
    border: none;
    outline: none;
    text-decoration: none;
    /* Supprime le soulignement */
    border-radius: 40px;
    padding: 12px 12px 12px 30px;
    color: #fff;
    background: #ff8011;
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Lato', sans-serif;
}

button .arrow {
    width: 40px;
    height: 40px;
}

.bg-blur {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.bg-cloud {
    background: url('images/cloud.webp');
    background-size: 448px 280px;
    background-repeat: no-repeat;
    background-position: top right;
}

.aides-wrapper {
    max-width: 1550px;
    margin-left: auto;
    margin-right: auto;
}

.aides-wrapper.top {
    margin-top: 70px;
}

.aides-wrapper.top1 {
    margin-top: 140px;
}

.aides-wrapper.tops {
    margin-top: 80px;
}

.aides-wrapper .picture3 {
    position: absolute;
    top: -120px;
    right: 40px;
    z-index: 1;
}

.aides-wrapper .bars {
    position: absolute;
    top: -20px;
    right: -80px;
}

.aides-wrapper .intersect {
    position: absolute;
    top: 40px;
    right: -10px;
}

.bg-aides {
    margin-top: 120px;
    background: #EEF6Fe;
    padding: 100px 70px;
    border-radius: 24px 0 70px 24px;
}

.bg-aides p {
    margin-bottom: 30px;
}

.bg-aides .col-left,
.bg-aides .col-right {
    padding-right: 100px;
}

.bg-aides .col-right {
    margin-top: 120px;
    padding-right: 100px;
}

.z-index-priority {
    position: relative;
    z-index: 10;
}


.wrap-revente {
    position: relative;
    background: url('images/picture4.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 1059px;
}

.wrap-revente .infos {
    position: absolute;
    top: 150px;
    left: 13%;
    width: 810px;
    border-radius: 24px;
    background: #fff;
    padding: 55px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
}

footer {
    color: #434447;
    max-width: 1615px;
    margin: 0 auto;
    text-align: center;
    line-height: auto;
    padding-bottom: 80px;
    font-size: 15px;
}

footer a {
    color: #434447;
    text-decoration: underline;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .content-2 .body-content {
        margin-top: 48% !important;
    }
}

@media (max-width: 1399px) {
    .header-max-content {
        max-width: 100%;
    }

    .picture3 {
        width: 40%;
    }

    .bg-aides .col-right {
        margin-top: 7%;
    }
}

@media (min-width: 1200px) {
    .content-2 .top-content {
        position: absolute;
        top: 0;
        left: 38%;
        width: 750px;
    }

    .content-2 .body-content {
        margin-top: 41%;
        padding: 0 150px 0 40px;
    }
}

@media (max-width: 1199px) {

    .title {
        font-size: 30px;
        line-height: 64px;
        text-align: center;
    }

    h2 {
        font-size: 40px;
    }

    .separator {
        margin: 30px 0;
    }

    .picture3 {
        width: 40%;
    }

    .bg-aides {
        padding: 50px 35px;
    }

    .bg-aides .col-right {
        margin-top: 0;
    }

    .bg-aides .col-left,
    .bg-aides .col-right {
        padding: 0 15px;
    }

    .wrap-revente .infos {
        left: 50%;
        transform: translateX(-50%);
    }

}

@media (max-width: 991px) {


    header {
        min-height: auto;
    }

 .row.py-lg-4.mt-5 {
    margin-top: 2rem !important;   /* au lieu de 3rem */
    padding-top: 0.5rem !important; /* au lieu de 1.5rem */
    padding-bottom: 0.5rem !important;
  }

    body {
        font-size: 18px;
    }

    h1,
    header ul li {
        font-size: 28px;
    }

    p {
        margin-bottom: 10px;
        line-height: 32px;
    }

    .header-info {
        width: 100%;
        height: auto;
        bottom: 0;
        padding: 40px;
        font-size: 20px;
    }

    .content-1 {
        margin-top: -50px;
        padding: 0 0 20px 0;
    }

    .picture3,
    .bars,
    .intersect {
        display: none;
    }

    .bg-aides {
        border-radius: 20px;
        padding: 20px 20px 10px 20px;
        margin-top: 20px;
    }

    .aides-wrapper.top {
        margin-top: 20px;
    }

    .wrap-revente {
        height: auto;
        padding: 60px 80px;
    }

    .wrap-revente .infos {
        background: rgba(255, 255, 255, 0.95);
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        width: 100%;
        padding: 20px;
    }

    button {
        font-size: 20px;
    }

    footer {
        padding-bottom: 40px;
    }
    .aides-wrapper-tops-mobile {
        margin-top: 1rem !important;   /* un peu d'espace au dessus */
        margin-bottom: 0.5rem !important;
    }

    .aides-wrapper-tops-mobile .header-max-content {
        padding-top: 0.75rem !important; /* espace interne léger */
    }

    .aides-wrapper-tops-mobile .d-lg-none.mt-3 {
        margin-top: 0.75rem !important; /* espace entre le H1 mobile et le reste */
    }
    

}

@media (max-width: 767px) {

    .logo {
        max-width: 150px;
    }

.aides-wrapper.top1 {
    margin-top: 0.5rem !important;   /* ~8px */
    padding-top: 0 !important;
  }

  .aides-wrapper.top1 h2 {
    margin-top: 0.5rem !important;   /* réduit fortement */
  }

  .aides-wrapper.top2 {
    margin-top: 2rem !important;   /* ~8px */
    padding-top: 0 !important;
  }

  .aides-wrapper.top2 h2 {
    margin-top: 2rem !important;   /* réduit fortement */
  }

    header {
        padding-bottom: 0;
    }

    .title {
        font-size: 40px;
        line-height: 40px;
    }


    h1,
    header ul li {
        font-size: 24px;
    }

    .header-info {
        margin-top: 50px;
        position: relative;
        background: var(--color3);
        padding: 30px 20px;
    }

    .section-title {
        font-size: 28px;
    }

    h2 {
        font-size: 40px;
    }

    .wrap-revente {
        padding: 60px 20px;
    }

    .btn-get-started {

        font-size: 20px;
        font-weight: 500;
        text-align: center;
    }

}

@media (max-width: 575px) {}

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 700 !important;
    /* Gras */
}

p {
    font-family: 'Lato', sans-serif;
    font-weight: 300 !important;
    /* Léger */
}

/* ===== KPIs / Stats ===== */
:root{
  /* Couleurs dérivées de ta charte */
  --kpi-accent: var(--color3);        /* vert #087081 */
  --kpi-accent-strong: #087081;
  --kpi-bg: #f1f6f5;                  /* fond doux */
  --kpi-text-muted: #5f6b7e;
}

.kpi-row { align-items: stretch; }

.kpi-card{
  background: var(--kpi-bg);
  border-radius: 18px;
  padding: 22px 22px 18px;
  height: 100%;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  border: 1px solid transparent;
  outline: none;
}

.kpi-card:hover,
.kpi-card:focus{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  background: #ffffff;
  border-color: rgba(8,112,129,.12);
  /* color: #fff; */
}
/* 
.kpi-card .kpi-number:hover {
  color: #fff;
}

.kpi-card .kpi-title:hover {
    color: #fff;
}

.kpi-card .kpi-text:hover {
  color: #fff;
} */



.kpi-card .kpi-number{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  margin: 0 0 10px;
  color: #087081;
}

.kpi-card .kpi-title{
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--color1);
  letter-spacing: .2px;
  text-transform: none;
}

.kpi-card .kpi-text{
  font-size: 14px;
  line-height: 1.5;
  color: var(--kpi-text-muted);
  margin: 0;
}

/* Variante mise en avant (comme la carte verte sur ta maquette) */
.kpi-card.is-accent{
  background: #087081;
  color: #fff;
  box-shadow: 0 10px 24px rgba(8,112,129,.25);
}
.kpi-card.is-accent .kpi-number,
.kpi-card.is-accent .kpi-title,
.kpi-card.is-accent .kpi-text{ color:#fff; }
.kpi-card.is-accent:hover,
.kpi-card.is-accent:focus{
  background: var(--kpi-accent-strong);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-6px);
}

/* Responsive & petites optimisations */
@media (max-width: 991px){
  .kpi-card{ padding: 20px; }
  .kpi-card .kpi-number{ font-size: 34px; }
}
@media (max-width: 575px){
  .kpi-card{ border-radius: 16px; }
}

/* Respect des utilisateurs sensibles aux animations */
@media (prefers-reduced-motion: reduce){
  .kpi-card{ transition: none; }
}


/* 

/* ===== HERO ÉCO ===== */
.hero-eco{
  background: linear-gradient(0deg, rgba(8,112,129,0.06), rgba(8,112,129,0.06));
  border-radius: 28px;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

.hero-eco__title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #087081; /* vert foncé lisible */
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.15;
  margin: 0;
}

.hero-eco__subtitle{
  color: var(--color1);
  opacity: .8;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  margin: 0;
}

/* CTA : s'appuie sur ton style de <button> global mais ajuste légèrement */
.hero-eco__cta{
  margin-top: 6px;
  background: var(--color2);    /* #ff8011 */
  box-shadow: 0 10px 24px rgba(255,128,17,.25);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hero-eco__cta:hover,
.hero-eco__cta:focus{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(255,128,17,.35);
  background: #ff7a00;
}

/* Media container avec languette verte et image “coupée” */
.hero-eco__media{
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate;
}

/* Languette / aplat vert derrière l’image */
.hero-eco__media::before{
  content:"";
  position: absolute;
  inset: 6% 18% 6% 0;
  background: linear-gradient(180deg, #087081, #0d98ae);
  border-radius: 18px 0 18px 18px;
  transform: skewX(-10deg);
  z-index: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
}

/* Image avec coins coupés */
.hero-eco__img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  /* effet coins biseautés via clip-path, avec fallback sur border-radius */
  clip-path: polygon(8% 0, 100% 0, 100% 85%, 92% 100%, 0 100%, 0 15%);
}

/* Responsive */
@media (max-width: 991px){
  .hero-eco{ border-radius: 22px; }
  .hero-eco__media::before{ inset: 8% 14% 8% 2%; }
}
@media (max-width: 575px){
  .hero-eco{ padding-top: 28px; padding-bottom: 28px; }
  .hero-eco__media::before{ inset: 10% 12% 10% 4%; }
}

/* Accessibilité : respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce){
  .hero-eco__cta{ transition: none; }
}




/* ===== AVANTAGES ===== */
.avantage-card{
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  height: 100%;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.avantage-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.avantage-icon{
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color3); /* ton vert #087081 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}

.avantage-card h5{
  font-weight: 700;
  font-size: 18px;
  color: var(--color1);
  margin-bottom: 12px;
}
.avantage-card p{
  font-size: 15px;
  color: var(--color4);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media(max-width: 991px){
  .avantage-card{ padding: 22px 16px; }
  .avantage-icon{ width: 60px; height: 60px; font-size: 24px; }
  .avantage-card h5{ font-size: 17px; }
}





/* ===== HERO WAVE ===== */
.hero-wave {
  position: relative;
  overflow: hidden;
  padding: 100px 20px;
  /* border-radius: 0 0 60px 60px; */
  background: linear-gradient(135deg, #0a8b8c, #087081, #065c62);
  color: #fff;
}

/* Ondes */
.hero-wave::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23065c62' fill-opacity='1' d='M0,64L48,80C96,96,192,128,288,144C384,160,480,160,576,149.3C672,139,768,117,864,128C960,139,1056,181,1152,170.7C1248,160,1344,96,1392,64L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
  background-size: cover;
  pointer-events: none; 
  z-index: 0;   
}

/* Titre + sous-titre */
.hero-wave h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
}
.hero-subtitle {
  font-size: 20px;
  font-weight: 400;
}

/* Liste */
.hero-bullets {
  list-style: none;
  padding-left: 0;
}
.hero-bullets li {
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
}
.hero-bullets li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: 700;
}

/* Bouton */
.hero-btn {
  border: none;
  border-radius: 40px;
  padding: 12px 26px;
  background: #ff8011;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background .2s ease, transform .2s ease;
}
.hero-btn:hover {
  background: #e56f0f;
  transform: translateY(-2px);
}

/* Formulaire */
.hero-wave .bg-iframe {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.hero-wave .iframe-title {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--color3);
  margin-bottom: 12px;
}


/* ===== FAQ ===== */
.faq-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--color3);
  letter-spacing: .5px;
}

.faq-accordion{
  max-width: 1050px;
  margin: 0 auto;
}

.faq-item{
  background: #f3fafb;
  border-radius: 12px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.faq-item.is-open{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Question */
.faq-question{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: none;
  background: #f8fbfc;
  color: var(--color1);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.faq-item.is-open .faq-question{
  background: var(--color3);
  color: #fff;
}

/* Réponse */
.faq-answer{
  background: #fff;
  color: var(--color1);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .2s ease;
}
.faq-item.is-open .faq-answer{
  padding: 16px 20px 18px;
  max-height: 320px; 
}

/* Chevron */
.faq-question .chevron{
  font-size: 16px;
  transition: transform .2s ease;
  color: var(--color3);
}
.faq-item.is-open .faq-question .chevron{
  transform: rotate(180deg);
  color: #fff;
}

/* CTA bouton */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px;
  border-radius: 40px;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: var(--color2); /* orange */
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.cta-btn:hover {
  background: #e56f0f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  color: #ffffff;
}
.cta-btn .arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--color2);
  font-size: 14px;
}

.hero-bullets2 {
    display: none;
}

/* Responsive */
@media (max-width: 575px){
  .faq-title{ font-size: 22px; }
  .faq-question{ padding: 14px 16px; }
  .faq-answer{ padding: 0 16px; }
  .faq-item.is-open .faq-answer{ padding: 14px 16px 16px; }


  .hero-bullets {
    display: none;
  }

  .hero-bullets2 {
    display: flex;
    flex-direction: column;
    padding-top:30px;
  }

  .hero-subtitle {
    display: none;
  }

  .hero-wave {
    padding: 50px 0px;
  }
}

/* Masquer la vague en responsive (mobile) */
@media (max-width: 991px){   /* tu peux ajuster le breakpoint */
  .hero-wave::after{
    display: none;
  }
}


/* ===== Section CTA ===== */
.cta-section {
  background: #087081;  /* ton vert-bleu */
  color: #fff;
  padding: 40px 20px;
}

.cta-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cta-section p {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
}

/* Bouton CTA */
.cta-btn-lg {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--color2); /* ton orange */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.cta-btn-lg:hover {
  background: #e56f0f;
  transform: translateY(-2px);
  color: #ffffff;
}

.hero-subtitle i {
  font-size: 16px;
  color: #ffffff; /* ton orange */
  transition: transform .3s ease;
}
.hero-subtitle:hover i {
  transform: translateX(4px);
}


.hero-wave {
  position: relative;
}

/* Le texte reste fixe sur l'écran */
.hero-left {
  position: sticky;
  top: 100px; /* ajuste selon ton header */
  align-self: flex-start;
}

/* Empêche les mouvements liés à la ligne */
.row {
  align-items: flex-start !important;
}

/* Facultatif : pour que la colonne de droite puisse grandir sans bousculer la gauche */
.hero-right {
  display: flex;
  flex-direction: column;
}


@media (min-width: 992px) {
  .hero-wave .row > .col-lg-6:first-child {
    flex: 0 0 39%;
    max-width: 39%;
  }
  
  .hero-wave .row > .col-lg-6:last-child {
    flex: 0 0 61%;
    max-width: 61%;
  }
}

#edi_scroll_iframe {
    padding: 15px 20px;
}