/* ===== HERO — avec fresque + dégradé animé ===== */
.about-hero{
  position: relative;
  overflow: clip;
  color:#fff;
  padding: 5.5rem 0 3.8rem;
  text-align: center;
  background:
    radial-gradient(1200px 500px at 10% 5%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg,#ffb254 0%, #FF8C00 46%, #ff9a2b 100%);
  animation: aboutShift 14s ease-in-out infinite alternate;
}
@keyframes aboutShift{
  0%{background-position:0% 0%,100% 0%,0% 0%;}
  100%{background-position:2% 1%,98% 3%,100% 100%;}
}
/* fresque */
.about-hero__bg{
  position:absolute; inset:0;
  opacity:.22; filter: contrast(110%) saturate(110%);
  pointer-events:none; z-index:0;
}
.about-hero__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 1rem; }

.about-badges{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.8rem;
}
.about-badges .badge{
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; font-weight:600; font-size:.85rem;
  padding:.3rem .65rem; border-radius:999px;
  backdrop-filter: blur(2px);
}

.about-hero h1{
  font-size:2.6rem; font-weight:800; letter-spacing:-.6px;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
  margin:.35rem 0 .65rem;
}
.about-hero-sub{ max-width:820px; margin:0 auto 1.2rem; font-size:1.12rem; line-height:1.65; opacity:.98; }

.about-proof{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
}
.proof-chip{
  background:#fff; color:#2B1C08; border-radius:999px;
  padding:.55rem 1rem; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.proof-chip strong{ color:#FF8C00; }

/* ===== HISTOIRE — timeline cartes reliées ===== */
.about-story{ background:#fffaf5; padding: 4.4rem 0 2.6rem; }
.about-story h2{ text-align:center; font-size:2rem; color:#2B1C08; font-weight:800; letter-spacing:-.6px; }

.story-timeline{
  position:relative; max-width:1100px; margin:2.2rem auto 0; padding: 0 1rem;
  display:grid; grid-template-columns: repeat(4, minmax(200px,1fr)); gap:1.2rem;
}
.story-line{
  position:absolute; left:1rem; right:1rem; top:60px; height:4px; border-radius:2px;
  background: linear-gradient(90deg,#C76C13 60%,#38B885 100%); z-index:0;
}

.timeline-card{
  position:relative; z-index:1; background:#fff; border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.06);
  padding:1.2rem 1rem 1.4rem; text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.timeline-card:hover{ transform: translateY(-4px); box-shadow:0 8px 22px rgba(0,0,0,.12); }

.timeline-date{
  display:inline-block; font-weight:800; color:#C76C13; letter-spacing:.6px; margin-bottom:.2rem;
}
.timeline-card h3{ font-size:1.08rem; font-weight:800; color:#2B1C08; margin:.1rem 0 .2rem; }
.timeline-card p{ color:#2B1C08; font-size:1.02rem; line-height:1.45; margin:0; }

/* responsive timeline */
@media (max-width: 980px){
  .story-timeline{ grid-template-columns:1fr; gap:1.4rem; }
  .story-line{ left:calc(50% - 2px); right:auto; width:4px; height:calc(100% - 20px); top:10px;
    background: linear-gradient(180deg,#C76C13 60%,#38B885 100%); }
  .timeline-card{ text-align:left; padding:1.1rem 1rem 1.2rem 1.3rem; }
}

/* ===== DIFFERENCE ===== */
.about-difference{ background:#fff; padding:3rem 0 2.2rem; text-align:center; }
.about-difference h2{ font-size:2rem; color:#2B1C08; font-weight:800; letter-spacing:-.6px; }

.about-difference-list{ list-style:none; padding:0; margin:0 auto; display:inline-block; text-align:left; }
.about-difference-list li{
  opacity:0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
  font-size:1.08rem; font-weight:600; color:#2B1C08; position:relative;
  margin-bottom:1rem; padding-left:2.1rem; line-height:1.45;
}
.about-difference-list li .tick{
  position:absolute; left:0; top:.05em; width:1.45rem; height:1.45rem; border-radius:50%;
  background:#38B885; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(56,184,133,.25); color:#fff; font-weight:800; font-size:1rem;
  content:""; 
}
.about-difference-list li .tick::before{ content:"✔"; transform: translateY(-1px); }
.about-difference-list li.visible{ opacity:1; transform:none; }

/* ===== CTA ===== */
.about-cta{ background:#fff; text-align:center; padding:3.6rem 0 3rem; }
.about-cta h2{ color:#C76C13; font-size:2rem; font-weight:800; letter-spacing:-.6px; margin-bottom:.8rem; }
.about-cta p{ color:#2B1C08; font-size:1.08rem; max-width:760px; margin:.2rem auto 1.6rem; }
.btn-primary{ display:inline-block; font-weight:700; color:#fff; text-decoration:none; padding:.85rem 1.6rem; border-radius:12px;
  background: linear-gradient(90deg,#ff9500 0%,#ff7b00 100%); box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.22); filter:brightness(.98); }

/* motion-safe */
@media (prefers-reduced-motion: reduce){
  .about-hero{ animation:none; }
}