/* ============================================================
   Chalet Member Banner – Elementor Widget
   ============================================================ */

.cmb-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* ── Fond ── */
.cmb-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── Dégradé oblique blanc → transparent ── */
.cmb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    #ffffff 0%,
    #ffffff 40%,
    rgba(255,255,255,0.80) 52%,
    rgba(255,255,255,0.20) 65%,
    rgba(255,255,255,0)    76%
  );
  pointer-events: none;
}

/* ── Zone de contenu ── */
.cmb-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 8vw;
}

/* ── Bloc texte ── */
.cmb-text-block {
  width: 42vw;
  max-width: 520px;
  position: relative;
  z-index: 2;
}

/* ── Titre ── */
.cmb-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: #6b0000;
  line-height: 1.12;
  margin: 0 0 18px;
}

/* ── Description ── */
.cmb-desc {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: #333;
  line-height: 1.65;
  margin: 0 0 30px;
  max-width: 310px;
}

/* ── Ligne bouton + badge ── */
.cmb-btn-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Bouton ── */
.cmb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #c0392b;
  color: #fff !important;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.cmb-btn:hover {
  background-color: #96281b;
  color: #fff !important;
}

.cmb-arrow {
  font-size: 1.1em;
}

/* ── Badge prix ── */
.cmb-badge {
  /* Desktop : sorti du flux, positionné après le bloc texte */
  position: absolute;
  left: calc(min(42vw, 520px) + 110px);
  top: 22%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: clamp(110px, 10vw, 135px);
  height: clamp(110px, 10vw, 135px);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  z-index: 3;
}

.cmb-badge-icon {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  margin-bottom: 2px;
  line-height: 1;
}

.cmb-badge-icon svg,
.cmb-badge-icon i {
  width: 1em;
  height: 1em;
}

/* Ligne prix : grand + petit côte à côte, alignés en bas */
.cmb-badge-price {
  display: flex;
  align-items: flex-end;
  line-height: 1;
}

.cmb-price-main {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 900;
  line-height: 1;
}

.cmb-price-cents {
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1px;
}

.cmb-badge-period {
  font-size: clamp(0.65rem, 0.85vw, 0.8rem);
  margin-top: 3px;
}

/* ============================================================
   Tablet landscape  (769 – 1100px)
   ============================================================ */
@media (max-width: 1100px) and (min-width: 769px) {
  .cmb-text-block { width: 38vw; }

  .cmb-overlay {
    background: linear-gradient(
      110deg,
      #ffffff 0%,
      #ffffff 36%,
      rgba(255,255,255,0.80) 50%,
      rgba(255,255,255,0.15) 65%,
      rgba(255,255,255,0)    76%
    );
  }
}

/* ============================================================
   Tablet portrait & mobile  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cmb-banner { min-height: 100vh; }

  .cmb-overlay {
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 45%,
      rgba(255,255,255,0.75) 62%,
      rgba(255,255,255,0.05) 82%,
      rgba(255,255,255,0)   100%
    );
  }

  .cmb-content {
    position: absolute;
    align-items: flex-start;
    padding: 9vh 7vw 0;
  }

  .cmb-text-block {
    width: 100%;
    max-width: 480px;
  }

  .cmb-title { font-size: clamp(1.8rem, 6vw, 2.5rem); margin-bottom: 14px; }
  .cmb-desc  { font-size: 1rem; max-width: 100%; margin-bottom: 22px; }

  .cmb-btn-row { gap: 16px; }

  /* Badge : retour dans le flux, côte à côte avec le bouton */
  .cmb-badge {
    position: static;
    transform: none;
    width: 88px;
    height: 88px;
  }

  .cmb-price-main   { font-size: 1.25rem; }
  .cmb-price-cents  { font-size: 0.72rem; }
  .cmb-badge-period { font-size: 0.68rem; }
  .cmb-badge-icon   { font-size: 0.9rem; }
}

/* ============================================================
   Mobile  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .cmb-content { padding: 8vh 6vw 0; }

  .cmb-title { font-size: 1.6rem; margin-bottom: 12px; }
  .cmb-desc  { font-size: 0.93rem; margin-bottom: 18px; }

  .cmb-btn   { font-size: 0.85rem; padding: 12px 16px; gap: 8px; }
  .cmb-btn-row { gap: 12px; }

  .cmb-badge { width: 76px; height: 76px; }
  .cmb-price-main   { font-size: 1.05rem; }
  .cmb-price-cents  { font-size: 0.62rem; }
  .cmb-badge-period { font-size: 0.62rem; }
  .cmb-badge-icon   { font-size: 0.82rem; }
}

/* ============================================================
   Très petit mobile  (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .cmb-title { font-size: 1.4rem; }
  .cmb-btn   { font-size: 0.78rem; padding: 10px 13px; }
  .cmb-btn-row { gap: 10px; }
  .cmb-badge { width: 66px; height: 66px; }
  .cmb-price-main   { font-size: 0.9rem; }
  .cmb-price-cents  { font-size: 0.55rem; }
  .cmb-badge-period { font-size: 0.58rem; }
}