/* Page B Secure+ — préfixe .bsp-page / bsp- (évite les conflits avec base.html) */
/* @import Sora supprimé : la fonte est déjà chargée depuis base.html */
.bsp-page {
  --bsp-green:       var(--color-primary);
  --bsp-green-hover: var(--color-primary-hover);
  --bsp-green-dark:  var(--color-primary-dark);
  --bsp-blue:        var(--color-secondary);
  --bsp-blue-light:  var(--color-secondary-mid);
  --bsp-blue-pale:   var(--color-secondary-pale);
  --bsp-text-dark:   var(--color-text-dark);
  --bsp-text-mid:    var(--color-text-mid);
  --bsp-text-light:  var(--color-text-light);
  --bsp-white:       var(--color-white);
  --bsp-bg-light:    var(--color-bg-light);
  --bsp-grad:        var(--color-grad-brand);
  font-family: var(--font-brand);
  font-size: 1.1rem;
  color: var(--bsp-text-dark);
  background: var(--bsp-white);
  overflow-x: hidden;
}

.bsp-page *,
.bsp-page *::before,
.bsp-page *::after {
  box-sizing: border-box;
}

.bsp-page a {
  text-decoration: none;
  color: var(--bsp-blue);
}

.bsp-page a:hover {
  text-decoration: underline;
}

/* HERO */
.bsp-page .bsp-hero {
  margin-top: calc(120px + 1rem);
  background-color: #f0f8ff;
  background-image:
    radial-gradient(ellipse at 80% 50%, #e6f7ce 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, #cae3f4 0%, transparent 55%);
  padding: 4rem 15px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.bsp-page .bsp-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1349' height='544' viewBox='0 0 1349 544' fill='none'%3E%3Cpath fill-rule='evenodd' d='M1316.58 462.614C1323.54 486.715 1308.74 500.561 1283.68 493.384L1185.41 465.237C1160.35 458.06 1154.66 438.341 1172.75 421.417L1243.71 355.046C1261.81 338.12 1282.31 343.993 1289.27 368.096L1316.58 462.614Z' fill='%239ADF3E' stroke='%2399DF2B' stroke-width='10'/%3E%3Cpath fill-rule='evenodd' d='M345.797 54.974C345.462 64.969 338.14 68.389 329.528 62.576L295.755 39.777C287.142 33.964 287.417 25.786 296.365 21.605L331.455 5.207C340.404 1.025 347.45 5.782 347.113 15.777L345.797 54.974Z' fill='%239ADF3E' stroke='%239ADF3E' stroke-width='6'/%3E%3Cpath fill-rule='evenodd' d='M13.444 376.073C6.487 368.93 9.077 361.318 19.198 359.157L58.892 350.685C69.014 348.524 74.706 354.368 71.54 363.672L59.128 400.159C55.963 409.464 47.681 411.232 40.725 404.087L13.444 376.073Z' stroke='%2382BFE9' stroke-width='5'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.6;
}

.bsp-page .bsp-hero-inner {
  max-width: 1088px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  position: relative;
  z-index: 1;
  padding-bottom: 3rem;
}

.bsp-page .bsp-hero-text {
  flex: 1;
}

.bsp-page .bsp-hero-text h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--bsp-text-dark);
  margin-bottom: 1.5rem;
}

.bsp-page .bsp-hero-bullets {
  list-style: none;
  margin-bottom: 2rem;
  padding: 0;
}

.bsp-page .bsp-hero-bullets li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--bsp-text-mid);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.bsp-page .bsp-hero-bullets li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bsp-green-dark);
  flex-shrink: 0;
}

.bsp-page .bsp-btn-hero {
  display: inline-block;
  background: var(--bsp-green-dark);
  color: var(--bsp-text-dark);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 14px 2.5rem;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.bsp-page .bsp-btn-hero:hover {
  background: var(--bsp-green-hover);
  text-decoration: none;
}

.bsp-page .bsp-hero-shield {
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bsp-page .bsp-shield-graphic {
  width: 240px;
  height: 260px;
  background: var(--bsp-grad);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(43, 141, 219, 0.15);
}

.bsp-page .bsp-shield-graphic i {
  font-size: 6rem;
  color: var(--bsp-blue-light);
  opacity: 0.7;
}

/* FEATURES */
.bsp-page .bsp-section-features {
  padding: 4rem 15px;
  background: var(--bsp-white);
}

.bsp-page .bsp-container {
  max-width: 1088px;
  margin: 0 auto;
}

.bsp-page .bsp-section-features h2 {
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.bsp-page .bsp-features-subtitle {
  text-align: center;
  color: var(--bsp-text-mid);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.bsp-page .bsp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.bsp-page .bsp-feature-card {
  background: var(--bsp-bg-light);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
}

.bsp-page .bsp-feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--bsp-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.bsp-page .bsp-feature-icon i {
  color: var(--bsp-blue-light);
  font-size: 1.2rem;
}

.bsp-page .bsp-feature-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--bsp-text-dark);
}

.bsp-page .bsp-feature-card p {
  font-size: 0.9rem;
  color: var(--bsp-text-mid);
  line-height: 1.6;
}

.bsp-page .bsp-features-cta {
  text-align: center;
}

.bsp-page .bsp-btn-cta {
  display: inline-block;
  background: var(--bsp-green-dark);
  color: var(--bsp-text-dark);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 14px 2.5rem;
  border-radius: 30px;
  transition: background 0.2s;
}

.bsp-page .bsp-btn-cta:hover {
  background: var(--bsp-green-hover);
  text-decoration: none;
}

/* COMPARE */
.bsp-page .bsp-section-compare {
  padding: 4rem 15px;
  background: var(--bsp-grad);
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.bsp-page .bsp-section-compare h2 {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 0.75rem;
}

.bsp-page .bsp-compare-subtitle {
  text-align: center;
  color: var(--bsp-text-mid);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.bsp-page .bsp-compare-table-wrap {
  overflow-x: auto;
}

.bsp-page .bsp-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bsp-white);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  font-size: 0.92rem;
}

.bsp-page .bsp-compare-table th,
.bsp-page .bsp-compare-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  vertical-align: middle;
}

.bsp-page .bsp-compare-table th {
  font-weight: 700;
  background: var(--bsp-white);
}

.bsp-page .bsp-compare-table td:first-child {
  text-align: start;
  font-size: 0.88rem;
}

.bsp-page .bsp-compare-table tr:last-child td {
  border-bottom: none;
}

.bsp-page .bsp-col-plus {
  background: linear-gradient(180deg, #f0f9e8 0%, #e6f7ce 100%);
  font-weight: 700;
}

.bsp-page .bsp-col-plus th {
  background: linear-gradient(180deg, #f0f9e8 0%, #e6f7ce 100%);
}

.bsp-page .bsp-badge-plus {
  display: inline-block;
  background: var(--bsp-green-dark);
  color: var(--bsp-text-dark);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

.bsp-page .bsp-sub-label {
  font-size: 0.78rem;
  color: var(--bsp-text-light);
  font-weight: 400;
  display: block;
}

.bsp-page .bsp-table-note {
  font-size: 0.75rem;
  color: var(--bsp-text-light);
  margin-top: 0.75rem;
}

.bsp-page .bsp-btn-table {
  display: inline-block;
  background: var(--bsp-green-dark);
  color: var(--bsp-text-dark);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.2s;
}

.bsp-page .bsp-btn-table:hover {
  background: var(--bsp-green-hover);
  text-decoration: none;
}

.bsp-page .bsp-btn-table-sec {
  display: inline-block;
  background: transparent;
  color: var(--bsp-blue);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 30px;
  border: 2px solid var(--bsp-blue);
  white-space: nowrap;
  transition: all 0.2s;
}

.bsp-page .bsp-btn-table-sec:hover {
  background: var(--bsp-blue);
  color: var(--bsp-white);
  text-decoration: none;
}

.bsp-page .bsp-check-green {
  color: #4caf50;
  font-size: 1.1rem;
}

.bsp-page .bsp-cross-red {
  color: #bbb;
  font-size: 1.1rem;
}

/* FAQ */
.bsp-page .bsp-section-faq {
  padding: 4rem 15px;
  background: var(--bsp-white);
}

.bsp-page .bsp-section-faq h2 {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 2rem;
}

.bsp-page .bsp-faq-layout {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.bsp-page .bsp-faq-questions {
  flex: 1;
}

.bsp-page .bsp-faq-cta-box {
  flex: 0 0 320px;
}

.bsp-page .bsp-accordion-item {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
}

.bsp-page .bsp-accordion-item:last-child {
  border-bottom: none;
}

.bsp-page .bsp-accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem 0;
}

.bsp-page .bsp-accordion-title h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bsp-text-dark);
  line-height: 1.4;
  margin: 0;
}

.bsp-page .bsp-accordion-title i {
  color: var(--bsp-blue-light);
  font-size: 1rem;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-inline-start: 1rem;
}

.bsp-page .bsp-accordion-title.bsp-open i {
  transform: rotate(180deg);
}

.bsp-page .bsp-accordion-content {
  display: none;
  padding: 0.5rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--bsp-text-mid);
  line-height: 1.7;
}

.bsp-page .bsp-accordion-content.bsp-open {
  display: block;
}

.bsp-page .bsp-accordion-content a {
  color: var(--bsp-blue);
}

.bsp-page .bsp-cta-box {
  background: var(--bsp-grad);
  border-radius: 2rem;
  padding: 2.5rem 2rem;
  text-align: center;
}

.bsp-page .bsp-cta-box-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  background: var(--bsp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(43, 141, 219, 0.12);
}

.bsp-page .bsp-cta-box-icon i {
  font-size: 2.5rem;
  color: var(--bsp-blue-light);
}

.bsp-page .bsp-cta-box h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* DISCLAIMER */
.bsp-page .bsp-section-disclaimer {
  background: var(--bsp-bg-light);
  padding: 2rem 15px;
}

.bsp-page .bsp-section-disclaimer .bsp-container {
  font-size: 0.8rem;
  color: var(--bsp-text-light);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .bsp-page .bsp-features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bsp-page .bsp-hero-inner {
    flex-direction: column;
  }

  .bsp-page .bsp-hero-shield {
    flex: unset;
    width: 100%;
  }

  .bsp-page .bsp-faq-layout {
    flex-direction: column;
  }

  .bsp-page .bsp-faq-cta-box {
    width: 100%;
    flex: unset;
  }
}

@media (max-width: 600px) {
  .bsp-page .bsp-hero-text h1 {
    font-size: 2rem;
  }

  .bsp-page .bsp-features-grid {
    grid-template-columns: 1fr;
  }

  .bsp-page .bsp-section-features h2,
  .bsp-page .bsp-section-compare h2,
  .bsp-page .bsp-section-faq h2 {
    font-size: 1.7rem;
  }
}