/* =========================================================
   À propos — présentation, valeurs, parcours
   Mise en page posée (plus d'éléments éparpillés) ; les
   animations d'entrée n'utilisent que opacity / transform.
   ========================================================= */

.story{position:relative;max-width:900px;margin:0 auto 40px;text-align:left}

/* ---------- Présentation ---------- */
.ab-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:10px 0 8px}

/* cadre photo façon polaroid, scotché, avec deux stickers collés */
.ab-frame{position:relative;margin:0 0 0 12px;padding:14px 14px 0;border-radius:6px;background:#f8f2e6;color:#3a2a20;
  box-shadow:0 30px 50px -22px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.4) inset;rotate:-3deg;will-change:transform}
.ab-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:#2a2c5a}
.ab-frame figcaption{font-family:var(--script);font-size:24px;text-align:center;padding:10px 0 14px}
.ab-tape{position:absolute;z-index:2;width:92px;height:26px;background:rgba(255,214,140,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.15);-webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0)}
.ab-tape.t1{left:-22px;top:18px;rotate:-38deg}
.ab-tape.t2{right:-22px;top:18px;rotate:38deg;background:rgba(255,160,175,.5)}
.ab-stk{position:absolute;z-index:3;width:30%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.ab-stk.k1{left:-12%;bottom:12%;rotate:-12deg}
.ab-stk.k2{right:-10%;bottom:-4%;rotate:10deg}

.story-hello{font-family:var(--script);font-size:32px;color:var(--red);font-weight:700;line-height:1}
.story-title{font-size:clamp(26px,3.2vw,40px)!important;line-height:1.15;margin:8px 0 14px;font-weight:800;text-wrap:balance}
.story-title em{font-style:normal;color:var(--red)}
.story-intro{font-size:15.5px;line-height:1.65;font-weight:600;color:var(--ink-2);max-width:52ch}

.ab-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 22px}
.ab-stats li{padding:14px 12px 12px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ab-stats b{display:block;font-size:28px;font-weight:900;line-height:1;color:#ffd27a;font-variant-numeric:tabular-nums}
.ab-stats span{display:block;margin-top:6px;font-size:12px;line-height:1.35;font-weight:700;color:var(--ink-2)}
.story-cta{gap:8px}
.story-cta span{display:inline-block;transition:transform .3s ease}
.story-cta:hover span{transform:translateY(3px)}

/* ---------- Valeurs ---------- */
.ab-values{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:46px 0 0}
.ab-values li{padding:20px 18px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line)}
.ab-vi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:12px;background:rgba(255,90,115,.14)}
.ab-vi svg{width:21px;height:21px;fill:none;stroke:#ff8095;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ab-values b{display:block;font-size:15.5px;margin-bottom:4px}
.ab-values p{font-size:13.5px;line-height:1.5;font-weight:600;color:var(--ink-2)}

/* ---------- Parcours : la descente ---------- */
.ab-parcours-head{text-align:center;margin:64px 0 8px}
.ab-parcours-head .sub{margin-bottom:6px}
.timeline{position:relative;margin:30px auto 0;padding:10px 0 30px;text-align:left}
.tl-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.tl-track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.tl-ink{fill:none;stroke:url(#tlGrad);stroke-width:4;stroke-linecap:round;will-change:stroke-dashoffset}
.tl-trav{transition:opacity .4s ease;will-change:transform}
.tl-trav circle{fill:#1a1c48;stroke:#ffd27a;stroke-width:2.5}
.tl-env rect{fill:#f8f2e6;stroke:none}
.tl-env path{fill:none;stroke:#c9a24a;stroke-width:1.6;stroke-linejoin:round}
.tl-spark{font-size:12px;fill:#ffd27a;transform-box:fill-box;transform-origin:center}

.tl-steps{list-style:none;position:relative;z-index:1;display:flex;flex-direction:column;gap:60px}
.tl-step{position:relative;display:grid;grid-template-columns:1fr 190px 1fr;align-items:center}
.tl-dot{grid-column:2;grid-row:1;justify-self:center;position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px;
  background:#1a1c48;color:var(--muted);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
  transition:background .5s ease,color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tl-step.in .tl-dot{background:linear-gradient(145deg,#ff6b81,var(--red-2));color:#fff;transform:scale(1.08);box-shadow:0 0 0 6px rgba(255,90,115,.16)}

/* carte postale */
.tl-card{grid-row:1;position:relative;padding:18px 20px 18px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),0 18px 30px -22px rgba(0,0,0,.8);
  opacity:0;transform:translate3d(var(--from,0),16px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.tl-step:nth-child(odd) .tl-card{grid-column:1;--from:-26px}
.tl-step:nth-child(even) .tl-card{grid-column:3;--from:26px}
.tl-step.in .tl-card{opacity:1;transform:none}
.tl-when{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:8px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#3b2a06;
  background:linear-gradient(135deg,#fbe6a2,#e0b450);box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 0 3px rgba(224,180,80,.35)}
.tl-card p{font-size:14px;line-height:1.6;color:var(--ink-2);font-weight:600}
.tl-card img{margin-top:14px;width:100%;max-height:240px;object-fit:cover;object-position:top;border-radius:12px}

.story-sign{font-family:var(--script);font-size:28px;color:var(--ink);margin-top:34px;text-align:center}

/* ---------- Entrée en scène ---------- */
.story-hello,.ab-intro .story-intro,.ab-stats li,.story-cta,.ab-values li{opacity:0;transform:translateY(14px)}
.ab-frame{opacity:0;transform:translateY(20px)}
.kw{display:inline-block;opacity:0;transform:translateY(.45em)}
.story-play .ab-frame{animation:abIn .9s cubic-bezier(.22,1,.36,1) .05s forwards}
.story-play .story-hello{animation:abIn .7s cubic-bezier(.22,1,.36,1) .2s forwards}
.story-play .kw{animation:abIn .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.3s + var(--i) * .045s)}
.story-play .ab-intro .story-intro{animation:abIn .7s ease .8s forwards}
.story-play .ab-stats li{animation:abIn .6s cubic-bezier(.22,1,.36,1) forwards}
.story-play .ab-stats li:nth-child(1){animation-delay:.95s}
.story-play .ab-stats li:nth-child(2){animation-delay:1.05s}
.story-play .ab-stats li:nth-child(3){animation-delay:1.15s}
.story-play .story-cta{animation:abIn .6s cubic-bezier(.22,1,.36,1) 1.3s forwards}
.story-play .ab-values li{animation:abIn .7s cubic-bezier(.22,1,.36,1) forwards}
.story-play .ab-values li:nth-child(1){animation-delay:1.4s}
.story-play .ab-values li:nth-child(2){animation-delay:1.5s}
.story-play .ab-values li:nth-child(3){animation-delay:1.6s}
/* le cadre se pose en douceur (son translate de parallaxe est géré en JS) */
@keyframes abIn{to{opacity:1;transform:none}}
.story-play .ab-frame{animation-name:abFrame}
@keyframes abFrame{to{opacity:1}}
.ab-frame{transition:none}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .ab-hero{grid-template-columns:1fr;gap:26px;text-align:center}
  .ab-frame{width:min(250px,70%);margin:6px auto 0}
  .story-intro{margin:0 auto}
  .ab-stats{gap:8px}
  .ab-stats b{font-size:22px}
  .ab-stats span{font-size:11px}
  .ab-values{grid-template-columns:1fr;margin-top:32px}
  .ab-parcours-head{margin-top:46px}
  .tl-steps{gap:28px}
  .tl-step{grid-template-columns:38px 1fr;gap:14px;align-items:start}
  .tl-dot{grid-column:1}
  .tl-step:nth-child(odd) .tl-card,.tl-step:nth-child(even) .tl-card{grid-column:2;--from:18px}
}
@media (prefers-reduced-motion:reduce){
  .kw,.story-hello,.ab-frame,.ab-intro .story-intro,.ab-stats li,.story-cta,.ab-values li,.tl-card{opacity:1!important;transform:none!important;animation:none!important}
}
.tl-when .todo{color:inherit}
/* la lettre du mois reste une surprise ici aussi */
.tl-card img{filter:blur(6px) saturate(1.1)}
.tl-card:has(img){overflow:hidden}