/* ============================================================
   ✨ BANDE TEMPLATE — PREMIUM BAND (Halo + Champagne)
   (version corrigée : même logique que .showcase-text)
============================================================ */

.premium-band{
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  isolation: isolate;

  background:
    radial-gradient(
      1200px 520px at 50% -12%,
      rgba(255,255,255,0.26),
      transparent 65%
    ),
    radial-gradient(
      900px 420px at 50% 112%,
      rgba(230,214,158,0.30),
      transparent 72%
    ),
    radial-gradient(
      circle at 18% 32%,
      rgba(255,218,226,0.20),
      transparent 60%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(220,200,185,0.24),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #3b2415 0%,
      #361c0d 55%,
      #3b2415 100%
    );
}

.premium-band::before,
.premium-band::after{
  content: none;
}

/* ============================================================
   💌 BANDE CTA PRINCIPALE (2 COLONNES)
   -> utilise désormais le background de .premium-band
============================================================ */

.cta-devis{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 20;

  padding: clamp(56px, 8vh, 96px) 0;

  color: #fff;
}

/* Container */
.cta-main-wrap{
  width: min(1220px, 92%);
  margin: 0 auto;
}

/* Panneau principal */
.cta-main-panel{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;

  min-height: clamp(340px, 48vh, 500px);

  border-radius: 28px;
  overflow: hidden;

  border: 1px solid rgba(230,214,158,0.22);
  box-shadow: 0 24px 70px rgba(0,0,0,0.42);

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.32)
  );
}

/* ============================================================
   GAUCHE : TEXTE + ACTIONS
============================================================ */

.cta-main-left{
  padding: clamp(30px, 4vw, 54px);

  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  justify-items: start;

  gap: 18px;
  text-align: left;

  background:
    radial-gradient(900px 600px at 20% 15%, rgba(230,214,158,0.10), rgba(230,214,158,0.00) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.34) 100%);
}

/* même largeur optique pour titre, texte et bloc actions */
.cta-main-left h2,
.cta-main-left .cta-main-text,
.cta-main-left .cta-main-actions{
  width: min(640px, 100%);
}

.cta-main-left h2{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.05rem, 2.0vw + 1.6rem, 3.0rem);
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.18;
  color: rgba(255,255,255,0.96);
}

.cta-main-text{
  margin: 0;

  font-family: "Inter", sans-serif;
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 7px rgba(0,0,0,0.45);
}

.cta-main-actions{
  margin-top: 6px;
  display: grid;
  gap: 12px;
  justify-items: start;
  align-content: start;
}

/* ✅ le bouton est désormais global : .ln-btn (dans buttons.css)
   Ici on gère seulement la mise en page locale (marges / largeur) */
.cta-main-actions .ln-btn{
  margin-top: 15px;
  margin-bottom: 40px;
}

/* note */
.cta-note{
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: rgba(230,214,158,0.92);
  letter-spacing: 0.04em;
}

/* ============================================================
   DROITE : IMAGE
============================================================ */

.cta-main-right{
  position: relative;
  min-height: 100%;
  background:
    url("/static/images/base/footer.jpg")
    center / cover
    no-repeat;
}

.cta-main-right-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.46) 100%),
    radial-gradient(900px 650px at 40% 20%, rgba(230,214,158,0.12), rgba(230,214,158,0.00) 58%);
}

/* ============================================================
   RESPONSIVE CTA
============================================================ */

@media (max-width: 1100px){
  .cta-main-panel{
    grid-template-columns: 1.05fr 0.95fr;
  }
}

@media (max-width: 980px){
  .cta-devis{
    padding: clamp(46px, 6.5vh, 78px) 0;
  }

  .cta-main-panel{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cta-main-right{
    order: -1;
    height: clamp(220px, 34vh, 320px);
    min-height: 0;
    background-position: center 35%;
  }

  .cta-main-left{
    align-content: start;
    text-align: center;
    justify-items: center;
  }

  .cta-main-actions{
    justify-items: center;
    width: min(520px, 100%);
  }

  .cta-main-actions .ln-btn{
    margin-bottom: 10px;
  }
}

@media (max-width: 640px){
  .cta-main-wrap{
    width: min(1220px, 94%);
  }

  .cta-devis{
    padding: 52px 0;
  }

  .cta-main-left{
    padding: 22px 18px 26px;
    gap: 14px;
  }

  .cta-main-left h2{
    font-size: clamp(1.60rem, 5.6vw, 2.05rem);
    line-height: 1.14;
  }

  .cta-main-text{
    font-size: 0.75rem;
    line-height: 1.78;
  }

  .cta-main-actions .ln-btn{
    width: 82%;
    max-width: 320px;
  }

  .cta-note{
    font-size: 0.75rem;
  }
}

@media (max-width: 420px){
  .cta-main-panel{
    border-radius: 20px;
  }

  .cta-main-right{
    height: clamp(200px, 45vh, 280px);
  }

  .cta-main-left{
    padding: 20px 14px 24px;
  }

  .cta-main-actions .ln-btn{
    max-width: 82%;
  }
}

@media (max-height: 720px){
  .cta-devis{
    padding: clamp(42px, 6vh, 70px) 0;
  }

  .cta-main-panel{
    min-height: clamp(300px, 44vh, 460px);
  }

  .cta-main-text{
    font-size: 0.95rem;
    line-height: 1.8;
  }
}