/* Page À propos de Bondora — préfixe .abt-page / abt- */
/* @import Sora supprimé : la fonte est déjà chargée depuis base.html */
.abt-page {
  --abt-green:       var(--color-primary);
  --abt-green-hover: var(--color-primary-hover);
  --abt-green-dark:  var(--color-primary-dark);
  --abt-blue:        var(--color-secondary);
  --abt-blue-light:  var(--color-secondary-mid);
  --abt-blue-pale:   var(--color-secondary-pale);
  --abt-text-dark:   var(--color-text-dark);
  --abt-text-mid:    var(--color-text-mid);
  --abt-text-light:  var(--color-text-light);
  --abt-white:       var(--color-white);
  --abt-bg-light:    var(--color-bg-light);
  --abt-grad:        var(--color-grad-brand);
  font-family: var(--font-brand);
  font-size: 1.05rem;
  color: var(--abt-text-dark);
  background: var(--abt-white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

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

.abt-page .abt-container {
  max-width: 1088px;
  margin: 0 auto;
  padding: 0 15px;
}

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

.abt-page .abt-hero::before {
  content: '';
  position: absolute;
  inset: 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%3Cpath fill-rule='evenodd' d='M1123.51 164.542C1110.3 160.862 1108.12 150.02 1118.65 140.45L1159.96 102.917C1170.49 93.346 1181.29 96.357 1183.97 109.608L1194.44 161.573C1197.11 174.825 1188.5 182.655 1175.29 178.974L1123.51 164.542Z' stroke='%2382BFE9' stroke-width='5'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.5;
}

.abt-page .abt-hero .abt-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.abt-page .abt-hero h1 {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--abt-text-dark);
  margin-bottom: 3rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.abt-page .abt-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  margin-bottom: 3.5rem;
}

.abt-page .abt-stat-item {
  text-align: center;
}

.abt-page .abt-stat-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--abt-text-dark);
  display: block;
}

.abt-page .abt-stat-label {
  font-size: 0.88rem;
  color: var(--abt-text-mid);
  display: block;
  margin-top: 0.2rem;
}

.abt-page .abt-why-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--abt-text-dark);
}

.abt-page .abt-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.abt-page .abt-why-card {
  background: var(--abt-white);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

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

.abt-page .abt-why-card-icon i {
  color: var(--abt-blue-light);
  font-size: 1.1rem;
}

.abt-page .abt-why-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--abt-text-dark);
}

.abt-page .abt-why-card p {
  font-size: 0.88rem;
  color: var(--abt-text-mid);
  line-height: 1.6;
}

/* MISSION */
.abt-page .abt-section-mission {
  padding: 5rem 15px;
  background: var(--abt-white);
}

.abt-page .abt-mission-inner {
  max-width: 1088px;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.abt-page .abt-mission-text {
  flex: 1;
}

.abt-page .abt-mission-text p {
  color: var(--abt-text-mid);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.abt-page .abt-mission-callout {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--abt-text-dark);
  line-height: 1.4;
  border-inline-start: 4px solid var(--abt-green-dark);
  padding-inline-start: 1.25rem;
  margin: 2rem 0;
}

.abt-page .abt-mission-img {
  flex: 0 0 340px;
}

.abt-page .abt-mission-img-placeholder {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 2rem;
  background: var(--abt-grad);
  display: flex;
  align-items: center;
  justify-content: center;
}

.abt-page .abt-mission-img-placeholder i {
  font-size: 6rem;
  color: var(--abt-blue-light);
  opacity: 0.5;
}

/* STORY */
.abt-page .abt-section-story {
  padding: 5rem 15px;
  background: var(--abt-bg-light);
}

.abt-page .abt-story-inner {
  max-width: 1088px;
  margin: 0 auto;
}

.abt-page .abt-section-story h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 1.75rem;
  color: var(--abt-text-dark);
}

.abt-page .abt-section-story p {
  color: var(--abt-text-mid);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 800px;
}

.abt-page .abt-responsible-box {
  background: var(--abt-white);
  border-radius: 1.5rem;
  padding: 2.5rem;
  margin-top: 2.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  max-width: 800px;
}

.abt-page .abt-responsible-box h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--abt-text-dark);
  margin-bottom: 1rem;
}

.abt-page .abt-responsible-box p {
  color: var(--abt-text-mid);
  font-size: 0.97rem;
  line-height: 1.75;
}

/* WISHES / CTA */
.abt-page .abt-section-wishes {
  padding: 5rem 15px;
  background: var(--abt-grad);
}

.abt-page .abt-wishes-inner {
  max-width: 1088px;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: center;
}

.abt-page .abt-wishes-img {
  flex: 0 0 300px;
}

.abt-page .abt-wishes-img-placeholder {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cae3f4 0%, #e6f7ce 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(43, 141, 219, 0.15);
}

.abt-page .abt-wishes-img-placeholder i {
  font-size: 7rem;
  color: var(--abt-blue-light);
  opacity: 0.6;
}

.abt-page .abt-wishes-text {
  flex: 1;
}

.abt-page .abt-wishes-text h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--abt-text-dark);
  margin-bottom: 1rem;
}

.abt-page .abt-wishes-text p {
  font-size: 0.97rem;
  color: var(--abt-text-mid);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.abt-page .abt-wishes-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.abt-page .abt-wishes-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--abt-text-mid);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.abt-page .abt-wishes-list li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--abt-green-dark);
  flex-shrink: 0;
  margin-top: 0.35rem;
}

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

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

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

  .abt-page .abt-mission-inner {
    flex-direction: column;
  }

  .abt-page .abt-mission-img {
    width: 100%;
    flex: unset;
  }

  .abt-page .abt-wishes-inner {
    flex-direction: column;
  }

  .abt-page .abt-wishes-img {
    flex: unset;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .abt-page .abt-wishes-img-placeholder {
    width: 220px;
    height: 220px;
  }
}

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

  .abt-page .abt-btn-create {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .abt-page .abt-why-grid {
    grid-template-columns: 1fr;
  }

  .abt-page .abt-stats-row {
    gap: 1.5rem 2rem;
  }

  .abt-page .abt-stat-value {
    font-size: 1.6rem;
  }

  .abt-page .abt-mission-inner {
    gap: 2rem;
  }

  .abt-page .abt-section-story h2,
  .abt-page .abt-section-wishes .abt-wishes-text h3 {
    font-size: 1.6rem;
  }
}