/* ==========================================================================
   Thirdslot — page About (/about/)
   Maquette : about/2026-10-27 Thirdslot-about_1.svg (1920 px de large,
   + about_2.svg = 2e diapositive de « Why Thirdslot Exists »).
   Les cotes viennent de la maquette : y = position dans la maquette,
   les sections ont la hauteur exacte de leur bande pour que les fonds
   (assets/about/bg-*.webp, découpés dans la maquette) se raccordent.
   ========================================================================== */

.page-about { --ab-ink: #1a1a2e; --ab-mute: #aaaaaf; --ab-text: #4f4f4f; --k: 1; }

/* Le header est transparent au-dessus du hero, comme dans la maquette */
.page-about .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-about .footer { border-top: 0; }

.ab { overflow-x: clip; }
.ab section { position: relative; }
.ab h1, .ab h2, .ab h3 { font-family: var(--font-head); font-weight: 500; color: var(--ab-ink); }
.ab-bg { background-repeat: no-repeat; background-position: center top; background-size: max(1920px, 100%) auto; }
.ab-h2 { font-size: 50px; line-height: 60px; }

/* ---------- Hero (bande y 0 → 1130, le header passe dessus) ---------- */
.ab-hero { height: 1130px; margin-top: -88px; background: #f8f6f9; }
/* faisceau (jpeg opaque, image du bas de la maquette) + voile de dégradés par-dessus */
.ab-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.ab-hero-bg > div { position: absolute; inset: 0; background-position: center top; background-repeat: no-repeat; background-size: max(1920px, 100%) auto; }
.ab-hero-bg .beam { background-image: url(/assets/about/hero-beam.webp); transform-origin: 50% 22%; }
.ab-hero-bg .veil { background-image: url(/assets/about/hero-veil.webp); }
.ab-photos { position: absolute; inset: 0; pointer-events: none; }
/* Photos accrochées aux bords comme sur la maquette 1920 ; sous 1920 px, --d (about.js, ≤ 0) les pousse
   hors écran pour garder leur écart avec le titre, et --k les réduit avec le reste sous 1488 px */
.ab-ph { position: absolute; scale: var(--k); }
.ab-ph .pl, .ab-star .pl { display: block; will-change: transform; }
.ab-ph img { display: block; max-width: none; width: 100%; height: auto; }
.ph-cnc, .ph-sofa { transform-origin: 0 0; translate: var(--d, 0px) 0; }
.ph-port, .ph-robot, .ph-fashion { transform-origin: 100% 0; translate: calc(-1 * var(--d, 0px)) 0; }
.ph-cnc     { left: calc(82px * var(--k));   top: calc(88px + 86px * var(--k));  width: 185px; }
.ph-sofa    { left: 0;                       top: calc(88px + 288px * var(--k)); width: 302px; }
.ph-port    { right: calc(48px * var(--k));  top: calc(88px + 17px * var(--k));  width: 175px; }
.ph-robot   { right: calc(161px * var(--k)); top: calc(88px + 131px * var(--k)); width: 314px; }
.ph-fashion { right: 0;                      top: calc(88px + 540px * var(--k)); width: 244px; }

.ab-hero-inner { position: relative; z-index: 1; padding-top: 281px; text-align: center; }
/* étoile 3D au sommet du faisceau (image masquée dans le rendu navigateur de la maquette : filtre d'ombre) */
.ab-star { position: absolute; left: 650.4px; top: 131.6px; width: 102.4px; height: 102.4px; z-index: 0; pointer-events: none; }
.ab-star img { display: block; width: 102.4px; height: 102.4px; max-width: none; transform-origin: 0 0; transform: rotate(-24.2deg); filter: drop-shadow(0 15px 15px rgba(191, 191, 219, 0.2)); }
.ab-hero-copy { position: relative; z-index: 1; }
/* indicateur de défilement de « banner-2 » (x 948, y 850) */
.ab-scroll { position: absolute; left: 732px; top: 850px; z-index: 2; width: 24px; height: 47px; padding: 0; }
.ab-scroll svg { display: block; fill: none; stroke: #1a1a2e; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ab-pill {
  display: inline-flex; align-items: center; gap: 12px;
  height: 37px; padding: 0 20px 0 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4a46d3 0%, #d085c2 30%, #ddd 80%) border-box;
  box-shadow: 0 8px 16px rgba(218, 218, 232, 0.5);
  font-weight: 500; font-size: 14px; color: var(--ab-ink);
}
.ab-pill img { width: 18px; height: 18px; }
.ab-h1 {
  position: relative;
  width: 721px;
  margin: 20px 0 0 calc(50% - 358px);
  font-size: 74px; line-height: 74px; font-weight: 600 !important;
  text-align: left;
}
.ab-h1 span { display: block; }
.ab-h1::after {
  content: ""; position: absolute; left: 1px; top: 140px;
  width: 720px; height: 6px; border-radius: 3px;
  background: var(--grad-underline);
  transform-origin: left center;
}
.ab-hero-sub { max-width: 720px; margin: 35px auto 0; font-size: 17px; line-height: 28px; color: #505056; }

/* Pile de classement : y 644 → 859, centrée sur 960 */
.ab-rank { position: relative; height: 215px; margin-top: 39px; text-align: left; }
/* Les 3 places : rk1 (1re, bordure violette), rk2, rk3. Une carte qui change de place s'anime vers le style de sa nouvelle place. */
.rk {
  position: absolute; left: 50%; display: flex; align-items: flex-start; overflow: hidden;
  border: 2px solid #fff; font-family: var(--font-head); color: var(--ab-ink); background-color: transparent;
  transition: top 0.75s cubic-bezier(0.6, 0, 0.25, 1), margin-left 0.75s cubic-bezier(0.6, 0, 0.25, 1), width 0.75s cubic-bezier(0.6, 0, 0.25, 1),
    height 0.75s cubic-bezier(0.6, 0, 0.25, 1), padding 0.75s cubic-bezier(0.6, 0, 0.25, 1), border-color 0.5s ease, border-radius 0.75s ease,
    background-color 0.5s ease, box-shadow 0.6s ease;
}
.rk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, #fff 55px); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.rk > span { position: relative; transition: opacity 0.5s ease, font-size 0.75s cubic-bezier(0.6, 0, 0.25, 1), line-height 0.75s cubic-bezier(0.6, 0, 0.25, 1), font-weight 0.75s ease; }
.rk .n { width: 46px; flex: none; font-weight: 400; font-size: 18px; }
.rk .t { font-weight: 500; font-size: 20px; }
.rk1 { top: 0; margin-left: -388px; width: 772px; height: 92px; padding: 30.5px 39px 0 41px; border-color: #4a46d3; border-radius: 24.5px; box-shadow: 0 20px 30px rgba(172, 168, 204, 0.4); z-index: 3; }
.rk1::before { opacity: 1; }
.rk1 > span { line-height: 27px; }
.rk1 .t { font-weight: 600; font-size: 22px; }
.rk2 { top: 69px; margin-left: -327px; width: 650px; height: 91px; padding: 36px 0 0 34px; border-radius: 24.5px; background-color: #e4e2ed; box-shadow: 0 20px 30px rgba(201, 200, 206, 0.4); z-index: 2; }
.rk3 { top: 142px; margin-left: -263px; width: 522px; height: 73px; padding: 22px 0 0 24px; border-radius: 16.3px; z-index: 1; }
.rk2 > span, .rk3 > span { line-height: 24px; }
.rk2 > span { opacity: 0.7; }
.rk3 > span { opacity: 0.5; }
.rk.is-moving { z-index: 5; }
.rk .top {
  display: none; margin-left: auto; height: 29px; padding: 0 22px 0 23px; border-radius: 14.5px; transform: translateY(-1px);
  background: #4a46d3; color: #fff; font-weight: 600; font-size: 16px; line-height: 29px !important;
}
.rk.is-top .top { display: block; }
.rk.no-tr, .rk.no-tr > span, .rk.no-tr::before { transition: none !important; }
.rk-arrow { position: absolute; left: calc(50% + 415px); top: 44px; width: 43px; height: 155px; fill: #4a46d3; z-index: 4; }

/* Chiffres : centres x 383,5 / 778,5 / 1160 / 1506,5 */
.ab-stats { position: relative; height: 121px; margin-top: 106px; }
.ab-stats li { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; text-align: center; }
.ab-stats li:nth-child(1) { left: 9.965%; }
.ab-stats li:nth-child(2) { left: 37.396%; }
.ab-stats li:nth-child(3) { left: 63.889%; }
.ab-stats li:nth-child(4) { left: 87.951%; }
.ab-stats b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 46px; line-height: 55px; color: var(--ab-ink); }
.ab-stats span { display: block; }
.ab-stats li > span { position: relative; left: 4px; margin-top: 7px; font-size: 17.9px; line-height: 28px; color: var(--ab-text); }

/* ---------- Our Story (bande y 1130 → 2129) ---------- */
.ab-story {
  height: 999px;
  background: url(/assets/about/bg-story.webp) center top / max(1920px, 100%) auto no-repeat;
}
.ab-bubble { position: absolute; pointer-events: none; max-width: none; }
.bub-a { right: 73px; top: 103px; width: 249px; }
.bub-b { right: -53px; top: 556px; width: 182px; }
.bub-c { left: 0; top: 796px; width: 156px; }
.ab-story > .container { position: relative; z-index: 1; padding-top: 120px; }
.ab-kicker { font-weight: 500; font-size: 24px; line-height: 29px; color: var(--ab-ink); }
.ab-story-title { max-width: 905px; margin-top: 17px; font-size: 50px; line-height: 54px; }
.ab-story-title span { display: block; }
.ab-story-title .mute { color: var(--ab-mute); }
.ab-tl { display: grid; grid-template-columns: 395px minmax(0, 1fr); margin-top: 67px; }
.ab-tl-tabs { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ab-tl-tabs button {
  padding: 0; font-family: var(--font-head); font-weight: 500;
  font-size: 28px; line-height: 34px; color: var(--ab-mute);
  transition: color 0.3s ease, font-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), line-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ab-tl-tabs button:hover { color: var(--ab-ink); }
.ab-tl-tabs button[aria-selected="true"] { font-size: 34px; line-height: 41px; color: #4a46d3; }
.ab-tl-dots {
  position: absolute; left: 174px; top: 18px; width: 161px; height: 5px;
  background: radial-gradient(circle at 2.5px 2.5px, #d0d0dd 2.4px, transparent 2.7px) 0 0 / 19.4px 5px repeat-x;
  transition: top 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
/* minuteur de l'avance automatique : les points se colorent un à un */
.ab-tl-dots i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: radial-gradient(circle at 2.5px 2.5px, #4a46d3 2.4px, transparent 2.7px) 0 0 / 19.4px 5px repeat-x; }
.ab-tl-panels { position: relative; max-width: 830px; }
.ab-tl-panel h3 { font-size: 34px; line-height: 41px; }
.ab-tl-panel p { margin-top: 19px; font-size: 18px; line-height: 28px; color: var(--ab-text); }
.ab-tl-panel p.strong { margin-top: 28px; font-weight: 500; color: var(--ab-ink); }
.ab-arc { position: absolute; left: 50%; top: 771px; width: 803px; height: 230px; margin-left: -401px; pointer-events: none; }
.ab-arc svg { overflow: visible; }
/* fusée 3D posée sur l'arc (nez = tête de la progression), placée par about.js */
.ab-rocket { position: absolute; left: 0; top: 0; width: 201.2px; height: 201.2px; margin: -100.6px 0 0 -100.6px; will-change: transform; }
.ab-rocket img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 15px 15px rgba(121, 121, 188, 0.2)); }
.ab-trail { position: absolute; inset: 0; }
.ab-trail i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #f0b7e4 40%, rgba(160, 150, 240, 0) 70%); pointer-events: none; animation: abSpark 0.9s ease-out forwards; }
.ab-tl-next {
  position: absolute; left: 50%; top: 871px; z-index: 2;
  width: 65px; height: 48px; margin-left: -32px; padding: 0;
  border-radius: 12px;
}
.ab-tl-next svg { width: 65px; height: 48px; fill: none; stroke: #4a46d3; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.ab-tl-next:hover svg { transform: translateX(6px); }

/* ---------- Why Thirdslot Exists (bande y 2129 → 3180) ---------- */
.ab-why {
  height: 1051px;
  background: url(/assets/about/bg-why.webp) center top / max(1920px, 100%) auto no-repeat;
}
.ab-why > .container { padding-top: 188px; }
.ab-why-title { text-align: center; }
.ab-slider { position: relative; height: 523px; margin-top: 55px; }
.ab-slide { position: absolute; left: 0; top: 114px; width: 532px; }
.ab-why-copy h3 { font-size: 32px; line-height: 41px; }
.ab-why-copy p { margin-top: 28px; font-size: 18px; line-height: 28px; color: var(--ab-text); }
.ab-why-copy p + p { margin-top: 28px; }
.ab-why-copy p.strong { font-weight: 500; color: var(--ab-ink); }
.ab-why-copy b { font-weight: 500; color: var(--ab-ink); }
#why-s-0 .ab-why-copy h3 + p { margin-top: 23px; }
#why-s-1 .ab-why-copy h3 + p { margin-top: 30px; }

/* Cartes : arrière y 2432 (x 995, 683×505), avant y 2471 (x 989, 667×484) */
.ab-cards { position: absolute; inset: 0; perspective: 1400px; }
.ab-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ab-card-h .caret { display: inline-block; width: 2px; height: 26px; margin-left: 3px; vertical-align: -4px; background: #4a46d3; opacity: 0; }
.ans li.gap .typing { display: inline-flex; gap: 5px; }
.ans li.gap .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ab-ink); }
.ab-card {
  position: absolute; left: 749px; top: 39px; width: 667px; height: 484px;
  border-radius: 24px;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), z-index 0s 0.4s;
  transform-origin: 0 0;
}
.ab-card > * { transition: opacity 0.45s ease; }
.c-answer { background: #d7e9f4; }
.c-compare { background: #f7f1e2; }
/* carte du fond : même boîte, déplacée/agrandie vers x 995, y 2432, 683×505 */
.ab-card.is-back { z-index: 0; transform: translate(6px, -39px) scale(1.024, 1.0434); }
.ab-card.is-back > * { opacity: 0; transition-duration: 0.25s; }
.ab-card.is-front { z-index: 1; }
.ab-card.is-front > * { transition-delay: 0.35s; }

.ab-card-h { padding: 40px 0 0 48px; font-family: var(--font-head); font-weight: 500; font-size: 26px; line-height: 31px; color: var(--ab-ink); }
.ans { margin: 25px 0 0 48px; width: 568px; }
.ans li {
  display: flex; align-items: center; height: 66px; padding: 0 14px 0 22px;
  border-radius: 12px; background: #fff;
  font-family: var(--font-head); color: var(--ab-ink);
}
.ans li + li { margin-top: 13px; }
.ans .n { width: 39px; flex: none; font-weight: 400; font-size: 16px; }
.ans .t { font-weight: 500; font-size: 20px; }
.ans .r1 { border: 2px solid #4a46d3; padding-left: 20px; padding-right: 12px; box-shadow: 0 8px 16px rgba(197, 197, 234, 0.5); }
.ans .r1 .t { font-weight: 600; font-size: 21px; }
.ans .r1 .bd { transform: translateY(3px); }
.ans li.gap { justify-content: center; height: 47px; margin-top: 0; padding: 8px 0 0; background: none; font-size: 21px; line-height: 1; }
.ans li.gap + li { margin-top: 13px; }
.ans li.you { background: #bad7e5; }
.ab .bd {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; margin-left: auto; padding: 0 10px 0 7px;
  border-radius: 12.5px; background: #f2f2f2;
  font-family: var(--font-head); font-weight: 500; font-size: 14px; color: var(--ab-ink); white-space: nowrap;
}
.ab .bd i { position: relative; width: 15px; height: 15px; flex: none; border-radius: 50%; background: rgba(74, 70, 211, 0.1); }
.ab .bd i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #4a46d3; }
.ab .bd.off { background: #fff; padding-right: 12px; }
.ab .bd.off i { background: rgba(237, 29, 29, 0.1); }
.ab .bd.off i::after { background: #ed1d1d; }
.ab .bd.ok { position: absolute; top: 14px; right: 16px; gap: 5px; padding-right: 11px; background: #fff; font-size: 13px; }
.ab .bd.ok i { background: rgba(19, 128, 79, 0.1); }
.ab .bd.ok i::after { background: #13804f; }
.why-arrow { position: absolute; left: -51px; top: 284px; width: 72px; height: 142px; fill: #4a46d3; }

.cmp { display: grid; grid-template-columns: 271px 271px; gap: 31px; padding: 53px 0 0 47px; }
.cmp-h { display: flex; align-items: center; gap: 16px; height: 29px; font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 29px; color: var(--ab-ink); }
.cmp-col:first-child .cmp-h { padding-left: 2px; }
.cmp-col + .cmp-col .cmp-h { gap: 15px; }
.cmp-box { position: relative; height: 140px; margin-top: 27px; padding: 50px 0 0 25px; border-radius: 18px; background: #eddebc; }
.cmp-box b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 42px; line-height: 51px; color: var(--ab-ink); }
.cmp-box .l { display: block; margin-top: 1px; font-size: 17.9px; line-height: 22px; color: var(--ab-text); }
.cmp-k { margin-top: 23px; margin-left: -1px; font-size: 18px; line-height: 22px; color: var(--ab-text); }
.cmp-v { margin-top: 8px; margin-left: -1px; font-weight: 500; font-size: 18px; line-height: 22px; color: var(--ab-ink); }
.cmp-x { display: flex; align-items: flex-start; gap: 14px; height: 90px; margin-top: 28px; padding: 21px 0 0 20px; border-radius: 18px; background: #fff; }
.cmp-x img { margin-top: 0; }
.cmp-x span { font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ab-ink); }

.ab-pager { position: absolute; right: 45px; top: 525px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ab-pager button {
  width: 11px; height: 11px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(20, 20, 104, 0.8); background: transparent;
  transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease, width 0.3s ease;
}
.ab-pager button[aria-current="true"] { position: relative; overflow: hidden; width: 10px; height: 48px; border: 0; background: rgba(20, 20, 104, 0.8); }
.ab-pager button i { position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgba(20, 20, 104, 0.8); }

/* ---------- Why the Name + Measure / Act / Prove (bande y 3180 → 4440) ---------- */
.ab-name {
  height: 1260px;
  background: url(/assets/about/bg-name.webp) center top / max(1920px, 100%) auto no-repeat;
}
.ab-name > .container { position: relative; height: 100%; padding-top: 105px; }
.ab-name-head { position: relative; z-index: 1; }
.ab-name-head h2 { font-size: 44px; line-height: 53px; }
.ab-quote { max-width: 850px; margin-top: 34px; font-family: var(--font-head); font-weight: 500; font-size: 34px; line-height: 45px; color: var(--ab-ink); }
.ab-quote .mute { margin-right: 12px; color: var(--ab-mute); }
.ab-wordmark { position: absolute; left: 539px; top: -140px; width: 1022px; height: 183px; max-width: none; z-index: -1; overflow: visible; }
.wm-fill path { fill: #fff; }
.wm-line path { fill: none; stroke: #aaaae0; stroke-width: 2px; stroke-miterlimit: 10; }

.ab-trio { position: absolute; left: 24px; right: 24px; top: 0; height: 100%; pointer-events: none; }
.ab-trio > * { position: absolute; }
.ab-net { left: 0; top: 0; width: 1440px; height: 1260px; max-width: none; overflow: visible; }
.ab-net .pulses { opacity: 0; }
.ab-orb { left: 450px; top: 388px; width: 540px; height: 540px; }
.ab-orb img { position: absolute; max-width: none; }
.ab-sphere { left: 0; top: 0; width: 540px; }
.ring-a { left: 77.3px; top: 76.7px; width: 385px; opacity: 0.12; }
.ring-b { left: 12.3px; top: 11.7px; width: 515px; opacity: 0; }
.ab-node img { position: absolute; max-width: none; }
.ab-node .bg { left: 0; top: 0; width: 100%; }
.nd-measure { left: 970px; top: 390px; width: 270px; height: 270px; }
.nd-measure .ic { left: 90px; top: 88px; width: 40px; }
.nd-act { left: 10px; top: 620px; width: 300px; height: 300px; }
.nd-act .ic { left: 145px; top: 93px; width: 49px; }
.nd-prove { left: 1010px; top: 770px; width: 330px; height: 330px; }
.nd-prove .ic { left: 107px; top: 105px; width: 57px; }
.ab-step, .ab-node { pointer-events: auto; }
.ab-node .ic { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.4); }
.ab-node:hover .ic { transform: scale(1.18) rotate(-8deg); }
.ab-step h3 { font-size: 30px; line-height: 36px; }
.ab-step p { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--ab-text); }
.st-measure { left: 1173px; top: 435px; width: 320px; }
.st-act { left: 0; top: 824px; width: 350px; }
.st-prove { left: 847px; top: 988px; width: 356px; }

/* ---------- How We Work (carrousel) + Methodology ---------- */
.ab-work { padding-top: 59px; }
.ab-work .ab-h2 { margin-left: 2px; }
.ab-carousel {
  --pad: max(26px, calc((100% - 1440px) / 2 + 2px));
  margin-top: 52px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; scroll-padding-left: var(--pad);
  cursor: grab;
  outline-offset: -3px;
}
.ab-carousel::-webkit-scrollbar { display: none; }
.ab-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ab-carousel.is-dragging * { pointer-events: none; }
.ab-track { display: flex; gap: 46px; width: max-content; padding: 0 var(--pad); }
.ab-wcard {
  position: relative; flex: none; width: 448px; height: 547px;
  padding: 51px 44px 0; border-radius: 28px; background: #f6f6fb;
  scroll-snap-align: start;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.ab-wcard h3 { font-size: 28px; line-height: 32px; }
.ab-wcard p { margin-top: 23px; font-size: 18px; line-height: 28px; color: var(--ab-text); }
.ab-wcard .ic { position: absolute; max-width: none; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ic-human  { left: 44px; top: 403px; width: 121px; }
.ic-evol   { left: 37px; top: 396px; width: 142px; }
.ic-raw    { left: 42px; top: 398px; width: 104px; }
.ic-buyers { left: 42px; top: 391px; width: 139px; }
.ab-wcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(26, 26, 46, 0.07); }
.ab-wcard:hover .ic { transform: rotate(-4deg) scale(1.05); }

.ab-method { position: relative; height: 180px; margin-top: 91px; }
.ab-method::before { content: ""; position: absolute; inset: -2px; background: url(/assets/about/meth-bg.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.ab-method > * { position: absolute; }
.ab-method .ic { left: 51px; top: 36px; width: 98px; transition: transform 0.4s ease; }
.ab-method:hover .ic { transform: rotate(-8deg); }
.ab-method .txt { left: 185px; top: 53px; }
.ab-method h2 { font-size: 30px; line-height: 36px; }
.ab-method p { margin-top: 11px; font-size: 16px; line-height: 20px; color: #5f5d77; }
.ab-method .btn { right: 62px; top: 62px; width: 197px; padding: 0; }

/* ---------- Who's Behind Thirdslot ---------- */
.ab-who { padding-top: 173px; padding-bottom: 10px; }
.ab-who-head { display: grid; grid-template-columns: 714px minmax(0, 1fr); padding-left: 2px; }
.ab-who-head h2 { font-size: 50px; line-height: 62px; }
.ab-who-head .ul { position: relative; display: inline-block; }
.ab-who-head .ul::after {
  content: ""; position: absolute; left: -4px; right: -13px; top: 50px; height: 6px; border-radius: 3px;
  background: var(--grad-underline); transform-origin: left center;
}
.ab-who-copy { max-width: 713.5px; padding-top: 21px; margin-left: -2px; }
.ab-who-copy p { font-size: 18px; line-height: 28px; color: var(--ab-text); }
.ab-who-copy p + p { margin-top: 28px; }
.ab-who-copy b { margin: 0 1px 0 2px; font-weight: 500; color: var(--ab-ink); }

.ab-facts { margin: 47px -11px 0 -12px; padding: 13px 11px 13px 12px; border-radius: 32.7px; background: #e7e7f2; }
.ab-facts dl { margin: 0; padding: 0 45px 0 51px; border-radius: 26.5px; background: #fff; }
.ab-facts dl > div { position: relative; display: grid; grid-template-columns: 663px minmax(0, 1fr); padding: 29px 0 35px; border-top: 1px solid #ededef; }
.ab-facts dl > div:first-child { padding-top: 48px; border-top: 0; }
.ab-facts dl > div:nth-child(3) { padding-bottom: 33px; }
.ab-facts dl > div:last-child { padding-bottom: 46px; }
.ab-facts dt { font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 28px; color: var(--ab-ink); }
.ab-facts dd { margin: 0; font-size: 18px; line-height: 28px; color: var(--ab-text); }
.ab-facts dd > * { display: block; width: max-content; }
.ab-facts .nm { font-family: var(--font-head); font-weight: 500; font-size: 22px; color: var(--ab-ink); }
.ab-facts .d { margin-top: 17px; }
.ab-facts .nm + .d + a { margin-top: 10px; }
.ab-facts a { font-weight: 500; color: #4a46d3; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ab-facts a:hover { color: #2f2bb0; }
.ab-facts a.plain { font-weight: 400; color: var(--ab-text); text-decoration: none; }
.ab-facts a.plain:hover { color: var(--ab-ink); }

/* ---------- CTA (bande y 6440 → 7036) ---------- */
.ab-cta {
  height: 596px; padding-top: 134px; text-align: center;
  background: url(/assets/about/bg-cta.webp) center top / max(1920px, 100%) auto no-repeat;
}
.ab-cta-mark { width: 64px; height: 63px; margin: 0 auto; overflow: visible; }
.ab-cta-mark path { transform-box: view-box; transform-origin: 960px 6605.5px; }
.ab-cta h2 { margin-top: 31px; }
.ab-cta p { max-width: 500px; margin: 19px auto 0; font-size: 18px; line-height: 28px; color: #565656; }
.ab-cta .btn { margin-top: 27px; width: 221px; gap: 12px; padding: 0; }

/* ==========================================================================
   Animations (html.anim ; ?noanim les coupe, comme sur le reste du site)
   Hero : body.ab-ready lance l'entrée dans l'état « banner-2 » (.ab-hero.is-intro),
   puis about.js pose l'état final (.is-settled) au bout de 2,4 s ou au premier défilement.
   Sections : .is-in quand elles entrent à l'écran. Mots découpés par about.js (.ab-split .w).
   ========================================================================== */
@keyframes abRise    { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes abWord    { from { transform: translateY(135%) rotate(4deg); } to { transform: none; } }
@keyframes abDraw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes abPop     { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.14); } 80% { transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes abGrowUp  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-5% 0 0 0); } }
@keyframes abGrowDn  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -5% 0); } }
@keyframes abWipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-5% -5% -5% 0); } }
@keyframes abStroke  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes abFloat   { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes abFloat2  { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-8px, 12px) rotate(-1deg); } }
@keyframes abBreath  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes abSpinR   { to { transform: rotate(360deg); } }
@keyframes abRipple  { 0% { opacity: 0; transform: scale(0.72); } 25% { opacity: 0.55; } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes abSpark   { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.2) translate(var(--sx, -10px), var(--sy, 6px)); } }
@keyframes abTimer   { from { width: 0; } to { width: 100%; } }
@keyframes abFillY   { from { height: 0; } to { height: 100%; } }
@keyframes abBlink   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes abDots    { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes abPulse   { 0% { box-shadow: 0 0 0 0 rgba(237, 29, 29, 0.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(237, 29, 29, 0); } }
@keyframes abShake   { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes abNudge   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes abShine   { 0%, 72% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes abGlow    { 0%, 100% { box-shadow: 0 10px 24px rgba(74, 70, 211, 0.32), 0 0 0 0 rgba(102, 99, 226, 0.35); } 50% { box-shadow: 0 14px 30px rgba(74, 70, 211, 0.42), 0 0 0 10px rgba(102, 99, 226, 0); } }

/* ---- Hero, étape 1 : entrée (état banner-2) ---- */
@keyframes abBeamIn  { from { opacity: 0; transform: scale(1.08, 0.55); } to { opacity: 1; transform: none; } }
@keyframes abStarIn  { 0% { opacity: 0; transform: translateY(260px) scale(0.15) rotate(-160deg); } 70% { opacity: 1; transform: translateY(-14px) scale(1.12) rotate(12deg); } 100% { opacity: 1; transform: none; } }
@keyframes abStarLoop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes abTwinkle { 0%, 100% { scale: 1; filter: drop-shadow(0 15px 15px rgba(191, 191, 219, 0.2)) brightness(1); } 50% { scale: 1.08; filter: drop-shadow(0 0 22px rgba(196, 140, 255, 0.75)) brightness(1.15); } }
@keyframes abPhL     { from { opacity: 0; transform: translateX(-150px) rotate(-7deg) scale(0.86); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abPhR     { from { opacity: 0; transform: translateX(150px) rotate(7deg) scale(0.86); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abCueDot  { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }
@keyframes abCueBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.anim .ab-hero-bg .beam, .anim .ab-hero-bg .veil, .anim .ab-star, .anim .ab-ph img, .anim .ab-pill, .anim .ab-hero-sub,
.anim .ab-scroll, .anim .rk, .anim .rk-arrow, .anim .ab-stats li { opacity: 0; }
.anim .ab-h1::after { transform: scaleX(0); }
.anim .ab-ready .ab-hero-bg .veil { animation: abFade 1.2s ease both; }
.anim .ab-ready .ab-hero-bg .beam { animation: abBeamIn 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-ready .ab-star { animation: abStarIn 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both, abStarLoop 5s ease-in-out 1.5s infinite; }
.anim .ab-ready .ab-star img { animation: abTwinkle 2.8s ease-in-out 1.4s infinite; }
.anim .ab-ready .ab-pill { animation: abRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.anim .ab-ready .ab-h1::after { animation: abDraw 1s cubic-bezier(0.65, 0, 0.2, 1) 1.05s both; }
.anim .ab-ready .ab-hero-sub { animation: abRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
.anim .ab-ready .ph-cnc img     { animation: abPhL 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both, abFloat 5.5s ease-in-out 2s infinite alternate; }
.anim .ab-ready .ph-sofa img    { animation: abPhL 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.38s both, abFloat2 7s ease-in-out 2.1s infinite alternate; }
.anim .ab-ready .ph-port img    { animation: abPhR 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s both, abFloat 6s ease-in-out 2s infinite alternate; }
.anim .ab-ready .ph-robot img   { animation: abPhR 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.46s both, abFloat2 7.5s ease-in-out 2.2s infinite alternate-reverse; }
.anim .ab-ready .ph-fashion img { animation: abPhR 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.56s both, abFloat 6.5s ease-in-out 2.3s infinite alternate; }
.anim .ab-ready .ab-scroll { animation: abFade 0.6s ease 1.4s both; }
.anim .ab-scroll .d1 { animation: abCueDot 1.4s ease-in-out infinite; }
.anim .ab-scroll .d2 { animation: abCueDot 1.4s ease-in-out 0.18s infinite; }
.anim .ab-scroll .ln, .anim .ab-scroll .hd { animation: abCueBob 1.4s ease-in-out 0.3s infinite; }
.anim .ab-ready .ab-stats li { animation: abRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-ready .ab-stats li:nth-child(1) { animation-delay: 1.25s; }
.anim .ab-ready .ab-stats li:nth-child(2) { animation-delay: 1.35s; }
.anim .ab-ready .ab-stats li:nth-child(3) { animation-delay: 1.45s; }
.anim .ab-ready .ab-stats li:nth-child(4) { animation-delay: 1.55s; }

/* état banner-2 : tout est décalé ; la transition vers l'état final est la « mise en place » */
.ab-hero-copy, .ab-star, .ab-hero-bg .beam, .ab-ph img { transition: translate 1.1s cubic-bezier(0.7, 0, 0.2, 1), scale 1.1s cubic-bezier(0.7, 0, 0.2, 1); }
.anim .ab-hero.is-intro .ab-hero-copy { translate: 0 49px; }
.anim .ab-hero.is-intro .ab-star { translate: 0 33px; }
.anim .ab-hero.is-intro .ab-hero-bg .beam { translate: 0 31.5px; }
.anim .ab-hero.is-intro .ab-ph img { translate: 0 25px; }
.anim .ab-hero.is-intro .ph-robot img { transform-origin: 100% 0; scale: 1.1136; }
.anim .ab-hero.is-intro .ph-fashion img { transform-origin: 0 0; scale: 1.099; }
.ph-robot img { transform-origin: 100% 0; }
.ph-fashion img { transform-origin: 0 0; }
.ab-scroll { transition: opacity 0.5s ease, translate 0.6s ease; }
.anim .ab-hero.is-settled .ab-scroll { opacity: 0 !important; translate: 0 26px; pointer-events: none; animation: none; }

/* ---- Hero, étape 2 : la pile de classement se construit ---- */
@keyframes abCardUp  { from { opacity: 0; transform: translateY(46px) scale(0.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abTopPop  { 0% { opacity: 0; transform: scale(0.2) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.25) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes abCardShine { 0%, 78% { transform: translateX(-140%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes abLift { 0%, 100% { transform: none; } 50% { transform: scale(1.035) translateY(-4px); } }
.rk::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(160, 156, 240, 0.22), rgba(255, 255, 255, 0)); transform: translateX(-140%) skewX(-20deg); pointer-events: none; }
.anim .ab-hero.is-settled .rk { animation: abCardUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.45s + var(--o, 0) * 0.14s) both; }
/* même 1re animation (non relancée) + soulèvement de la carte qui monte */
.anim .ab-hero.is-settled .rk.is-moving { animation: abCardUp 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.45s + var(--o, 0) * 0.14s) both, abLift 0.75s cubic-bezier(0.6, 0, 0.25, 1); }
.anim .rk.is-top .top { animation: abTopPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-hero.is-settled .rk.is-top::after { animation: abCardShine 5s ease-in-out 1.2s infinite; }
.anim .ab-hero.is-settled .rk-arrow { animation: abFade 0.01s linear 1.55s both, abGrowUp 1.9s cubic-bezier(0.5, 0, 0.2, 1) 1.55s both; }

/* ---- Mots découpés ---- */
.ab-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.ab-split .w > span { display: inline-block; }
.anim .ab-split .w > span { transform: translateY(135%); }
.anim .ab-ready .ab-hero .ab-split .w > span,
.anim .is-in .ab-split .w > span { animation: abWord 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) calc(var(--d0, 0s) + var(--i) * 0.045s) both; }
.anim .ab-ready .ab-hero .ab-split { --d0: 0.45s; }
.anim .ab-quote .ab-split + .ab-split, .anim .ab-story-title .mute { --d0: 0.25s; }

/* ---- Révélations génériques ---- */
.anim .ab-rv { opacity: 0; }
.anim .is-in .ab-rv { animation: abRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ---- Our Story ---- */
.anim .is-in .ab-tl { animation-delay: 0.35s; }
.anim .ab-arc, .anim .ab-tl-next, .anim .ab-bubble { opacity: 0; }
.anim .is-in .ab-arc { animation: abRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.anim .is-in .ab-tl-next { animation: abFade 0.6s ease 0.9s both, abNudge 2.4s ease-in-out 2s infinite; }
.anim .ab-tl-next:hover { animation-play-state: paused; }
.anim .is-in .bub-a { animation: abFade 1.4s ease 0.2s both, abFloat 6s ease-in-out 1.6s infinite alternate; }
.anim .is-in .bub-b { animation: abFade 1.4s ease 0.4s both, abFloat2 7s ease-in-out 1.8s infinite alternate; }
.anim .is-in .bub-c { animation: abFade 1.4s ease 0.5s both, abFloat 6.5s ease-in-out 1.9s infinite alternate-reverse; }
.anim .ab-tl-panel.is-active > * { animation: abRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-tl-panel.is-active > :nth-child(2) { animation-delay: 0.1s; }
.anim .ab-tl-panel.is-active > :nth-child(3) { animation-delay: 0.2s; }
.anim .ab-tl.is-playing .ab-tl-dots i { animation: abTimer 7s linear forwards; }
.anim .ab-tl.is-held .ab-tl-dots i { animation-play-state: paused; }
.anim .ab-rocket { opacity: 0; transition: opacity 0.4s ease; }
.anim .ab-rocket.is-on { opacity: 1; }
@keyframes abRocketIdle { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1px, -3px) rotate(-1.5deg); } }
.anim .ab-rocket img { animation: abRocketIdle 1.6s ease-in-out infinite; }

/* ---- Why Thirdslot Exists ---- */
@keyframes abCards3D { from { opacity: 0; transform: translate3d(140px, 40px, -240px) rotateY(-24deg) rotateX(6deg); } to { opacity: 1; transform: none; } }
@keyframes abRowIn   { from { opacity: 0; transform: translateX(46px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes abSwapOut { 0% { transform: none; z-index: 1; } 45% { transform: translate(60px, 46px) rotate(5deg) scale(0.95); z-index: 1; } 46% { z-index: 0; } 100% { transform: translate(6px, -39px) scale(1.024, 1.0434); z-index: 0; } }
@keyframes abSwapIn  { 0% { transform: translate(6px, -39px) scale(1.024, 1.0434); z-index: 0; } 45% { transform: translate(-46px, -70px) rotate(-4deg) scale(1.02); z-index: 0; } 46% { z-index: 1; } 100% { transform: none; z-index: 1; } }
.anim .ab-slide .ab-why-copy > * { opacity: 0; }
.anim .is-in .ab-slide.is-active .ab-why-copy > * { animation: abRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .is-in .ab-slide.is-active .ab-why-copy > :nth-child(1) { animation-delay: 0.2s; }
.anim .is-in .ab-slide.is-active .ab-why-copy > :nth-child(2) { animation-delay: 0.32s; }
.anim .is-in .ab-slide.is-active .ab-why-copy > :nth-child(3) { animation-delay: 0.44s; }
.ab-slide { visibility: hidden; }
.ab-slide.is-active { visibility: visible; }
.anim .ab-cards { opacity: 0; }
.anim .is-in .ab-cards { animation: abCards3D 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.ab-card.swap-out { animation: abSwapOut 1s cubic-bezier(0.6, 0, 0.25, 1) both; }
.ab-card.swap-in  { animation: abSwapIn 1s cubic-bezier(0.6, 0, 0.25, 1) both; }
.anim .ans li, .anim .ans .bd { opacity: 0; }
.anim .ab-card.is-front.is-on .ans li { animation: abRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-card.is-front.is-on .ans li:nth-child(1) { animation-delay: 0.95s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(2) { animation-delay: 1.15s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(3) { animation-delay: 1.35s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(4) { animation-delay: 1.55s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(5) { animation: abRowIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 2.15s both, abShake 0.55s ease 2.75s; }
.anim .ab-card.is-front.is-on .ans .bd { animation: abPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-card.is-front.is-on .ans li:nth-child(1) .bd { animation-delay: 1.3s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(2) .bd { animation-delay: 1.5s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(3) .bd { animation-delay: 1.7s; }
.anim .ab-card.is-front.is-on .ans li:nth-child(5) .bd { animation-delay: 2.55s; }
.anim .ab-card.is-front.is-on .typing i { animation: abDots 1.1s ease-in-out infinite; }
.anim .ab-card.is-front.is-on .typing i:nth-child(2) { animation-delay: 0.15s; }
.anim .ab-card.is-front.is-on .typing i:nth-child(3) { animation-delay: 0.3s; }
.anim .ab-card.is-front.is-on .bd.off i::after { animation: abPulse 1.6s ease-out 3s infinite; }
.anim .ab-card-h .caret.is-typing { opacity: 1; animation: abBlink 0.9s steps(1) infinite; }
.anim .why-arrow { clip-path: inset(0 0 100% 0); }
.anim .ab-card.is-front.is-on .why-arrow { animation: abGrowDn 0.85s cubic-bezier(0.5, 0, 0.2, 1) 2.6s both; }
.anim .cmp-col > *, .anim .cmp .bd { opacity: 0; }
.anim .ab-card.is-front.is-on .cmp-col > * { animation: abRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-card.is-front.is-on .cmp-col > :nth-child(1) { animation-delay: 0.55s; }
.anim .ab-card.is-front.is-on .cmp-col > :nth-child(2) { animation: abPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.anim .ab-card.is-front.is-on .cmp-col > :nth-child(3) { animation-delay: 0.95s; }
.anim .ab-card.is-front.is-on .cmp-col > :nth-child(4) { animation-delay: 1.05s; }
.anim .ab-card.is-front.is-on .cmp-col > :nth-child(5) { animation-delay: 1.2s; }
.anim .ab-card.is-front.is-on .cmp-col + .cmp-col > * { animation-delay: 0.85s; }
.anim .ab-card.is-front.is-on .cmp-col + .cmp-col > :nth-child(2) { animation-delay: 0.85s; }
.anim .ab-card.is-front.is-on .cmp-col + .cmp-col > :nth-child(5) { animation-delay: 1.35s; }
.anim .ab-card.is-front.is-on .cmp .bd { animation: abPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s both; }
.anim .ab-card.is-front.is-on .cmp-x img { animation: abPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1.4) 1.5s both; }
.anim .ab-card.is-back * { animation: none !important; }
.anim .ab-pager { opacity: 0; }
.anim .is-in .ab-pager { animation: abFade 0.6s ease 0.9s both; }
.anim .ab-pager.is-playing button[aria-current="true"] { background: rgba(20, 20, 104, 0.22); }
.anim .ab-pager.is-playing button[aria-current="true"] i { animation: abFillY 6.5s linear forwards; }
.anim .ab-pager.is-held button[aria-current="true"] i { animation-play-state: paused; }

/* ---- Why the Name + Measure / Act / Prove ---- */
.anim .ab-wordmark .wm-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .ab-wordmark .wm-fill path { opacity: 0; }
.anim .ab-wordmark .wm-ribbon { clip-path: inset(0 100% 0 0); }
.anim .is-in .ab-wordmark .wm-line path { animation: abStroke 1.3s cubic-bezier(0.6, 0, 0.3, 1) calc(0.2s + var(--i) * 0.11s) both; }
.anim .is-in .ab-wordmark .wm-fill path { animation: abFade 0.7s ease calc(1.1s + var(--i) * 0.11s) both; }
.anim .is-in .ab-wordmark .wm-ribbon { animation: abWipe 1.3s cubic-bezier(0.65, 0, 0.2, 1) 1.9s both; }
.anim .ab-orb, .anim .ab-node, .anim .ab-step { opacity: 0; }
.anim .ab-net .nl { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .ab-trio.is-in .ab-orb { animation: abPop 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.anim .ab-trio.is-in .ab-sphere { animation: abBreath 6s ease-in-out 1.4s infinite; }
.anim .ab-trio.is-in .ring-a { animation: abSpinR 38s linear infinite; }
.anim .ab-trio.is-in .ring-b { animation: abRipple 3.8s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite; }
.anim .ab-trio.is-in .nl1 { animation: abStroke 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.6s both; }
.anim .ab-trio.is-in .nl2 { animation: abStroke 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.9s both; }
.anim .ab-trio.is-in .nl3 { animation: abStroke 0.9s cubic-bezier(0.6, 0, 0.3, 1) 1.2s both; }
.anim .ab-trio.is-in .ab-net .pulses { animation: abFade 1s ease 2.2s both; }
.anim .ab-trio.is-in .ab-node { animation: abPop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both, abFloat 5s ease-in-out infinite alternate; }
.anim .ab-trio.is-in .nd-act     { animation-delay: 0.55s, 1.4s; animation-duration: 0.8s, 6s; }
.anim .ab-trio.is-in .nd-measure { animation-delay: 1.4s, 2.2s; }
.anim .ab-trio.is-in .nd-prove   { animation-delay: 1.9s, 2.7s; animation-duration: 0.8s, 5.5s; }
.anim .ab-trio.is-in .ab-step { animation: abRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .ab-trio.is-in .st-act     { animation-delay: 0.75s; }
.anim .ab-trio.is-in .st-measure { animation-delay: 1.6s; }
.anim .ab-trio.is-in .st-prove   { animation-delay: 2.1s; }

/* ---- How We Work + Methodology ---- */
@keyframes abCardRight { from { opacity: 0; transform: translateX(180px) rotate(5deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.anim .ab-wcard { opacity: 0; }
.anim .ab-carousel.is-in .ab-wcard { opacity: 1; animation: abCardRight 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.13s) backwards; }
.anim .ab-wcard .ic { clip-path: inset(0 100% 0 0); }
.anim .ab-carousel.is-in .ab-wcard .ic { animation: abWipe 1s cubic-bezier(0.6, 0, 0.2, 1) calc(0.7s + var(--i) * 0.13s) both; }
.ab-method { overflow: hidden; border-radius: 20px; }
.ab-method::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); transform: translateX(-130%) skewX(-18deg); pointer-events: none; }
.anim .is-in .ab-method::after { animation: abShine 6s ease-in-out 1.2s infinite; }
@keyframes abRock { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
.anim .is-in .ab-method .ic { animation: abRock 3.2s ease-in-out 1s infinite; }

/* ---- Who's Behind ---- */
.anim .is-in .ab-who-copy { animation-delay: 0.2s; }
.anim .ab-who-head .ul::after { transform: scaleX(0); }
.anim .is-in .ab-who-head .ul::after { animation: abDraw 1s cubic-bezier(0.65, 0, 0.2, 1) 0.7s both; }
.ab-facts dl > div + div { border-top: 0; padding-top: 30px; }
.ab-facts dl > div + div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #ededef; transform-origin: left center; }
.anim .ab-facts dl > div > * { opacity: 0; }
.anim .ab-facts dl > div + div::before { transform: scaleX(0); }
.anim .is-in .ab-facts { animation-delay: 0.3s; }
.anim .is-in .ab-facts dl > div > * { animation: abRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.55s + var(--r) * 0.14s) both; }
.anim .is-in .ab-facts dl > div > dd { animation-delay: calc(0.65s + var(--r) * 0.14s); }
.anim .is-in .ab-facts dl > div + div::before { animation: abDraw 0.9s cubic-bezier(0.65, 0, 0.2, 1) calc(0.5s + var(--r) * 0.14s) both; }

/* ---- CTA ---- */
@keyframes abSeg1 { from { opacity: 0; transform: rotate(-140deg) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes abSeg2 { from { opacity: 0; transform: rotate(140deg) scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes abLogoTurn { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.anim .ab-cta-mark path { opacity: 0; }
.anim .is-in .ab-cta-mark .s1 { animation: abSeg1 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.anim .is-in .ab-cta-mark .s2 { animation: abSeg2 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
.anim .is-in .ab-cta-mark .s3 { animation: abSeg2 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.anim .is-in .ab-cta-mark { animation: abLogoTurn 7s cubic-bezier(0.6, 0, 0.3, 1) 2s infinite; }
.anim .is-in.ab-cta p { animation-delay: 0.35s; }
.anim .is-in.ab-cta .btn { animation: abRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both, abGlow 2.6s ease-in-out 1.6s infinite; }

/* ?noanim : tout est en place immédiatement */
.no-anim .ab *, .no-anim .ab *::before, .no-anim .ab *::after { animation: none !important; transition: none !important; }
.no-anim .ab-hero-bg .beam, .no-anim .ab-hero-bg .veil, .no-anim .ab-star, .no-anim .ab-ph img, .no-anim .ab-pill, .no-anim .ab-hero-sub,
.no-anim .rk, .no-anim .rk-arrow, .no-anim .ab-stats li, .no-anim .rk .top, .no-anim .ab-rv, .no-anim .ab-arc, .no-anim .ab-tl-next, .no-anim .ab-bubble,
.no-anim .ab-cards, .no-anim .ans li, .no-anim .ans .bd, .no-anim .cmp-col > *, .no-anim .cmp .bd, .no-anim .ab-pager, .no-anim .ab-wordmark .wm-fill path,
.no-anim .ab-orb, .no-anim .ab-node, .no-anim .ab-step, .no-anim .ab-wcard, .no-anim .ab-facts dl > div > *, .no-anim .ab-cta-mark path,
.no-anim .ab-slide .ab-why-copy > *, .no-anim .ab-rocket { opacity: 1; }
.no-anim .ab-scroll { display: none; }
.no-anim .ab-split .w > span, .no-anim .ab-h1::after, .no-anim .ab-who-head .ul::after, .no-anim .ab-facts dl > div + div::before { transform: none; }
.no-anim .rk-arrow, .no-anim .why-arrow, .no-anim .ab-wordmark .wm-ribbon, .no-anim .ab-wcard .ic { clip-path: none; }
.no-anim .ab-wordmark .wm-line path, .no-anim .ab-net .nl { stroke-dashoffset: 0; }
.no-anim .ab-net .pulses { opacity: 1; }

/* ==========================================================================
   Écrans plus étroits que la maquette
   ========================================================================== */
/* 1100 → 1488 px : les compositions absolues gardent leurs cotes et sont réduites d'un bloc (--k posé par about.js) */
@media (max-width: 1487px) and (min-width: 1100px) {
  .ab-hero-inner, .ab-story > .container, .ab-why > .container, .ab-name > .container { zoom: var(--k); }
  .ab-name { height: calc(1260px * var(--k)); }
  .ab-name > .container { height: 1260px; }
  .ab-why { height: calc(1051px * var(--k)); }
  .ab-story { height: calc(999px * var(--k)); }
  .ab-arc, .ab-tl-next { zoom: var(--k); }
  .ab-hero { height: calc(88px + 1042px * var(--k)); }
  .ab-hero-inner { padding-top: calc(281px - 88px + 88px / var(--k)); }
  .ab-story, .ab-why, .ab-name, .ab-hero-bg > div { background-size: calc(1920px * var(--k)) auto; }
  .ab-hero-inner, .ab-story > .container, .ab-why > .container, .ab-name > .container { max-width: calc(1488px); }
  .ab-pager { zoom: var(--k); }
}

@media (max-width: 1099px) {
  .ab-hero { height: auto; padding-bottom: 72px; }
  .ab-photos, .ab-star, .ab-scroll { display: none; }
  .ab-hero-inner { padding-top: 168px; }
  .ab-h1 { width: auto; max-width: 721px; margin: 22px auto 0; font-size: clamp(40px, 7vw, 64px); line-height: 1.05; text-align: center; }
  .ab-h1 span { display: inline; }
  .ab-h1::after { display: none; }
  .ab-h1 .l2 { background: var(--grad-underline) no-repeat 0 100% / 100% 5px; padding-bottom: 6px; }
  .ab-hero-sub { margin-top: 24px; }
  .ab-rank { width: 100%; max-width: 640px; height: auto; margin: 36px auto 0; padding-bottom: 96px; }
  .rk { left: 0; right: 0; width: auto; margin-left: 0; }
  .rk1 { position: relative; height: 76px; padding: 23px 20px 0 24px; }
  .rk2 { left: 6%; right: 6%; top: 58px; height: 76px; padding: 34px 0 0 24px; }
  .rk3 { left: 13%; right: 13%; top: 116px; height: 62px; padding: 28px 0 0 20px; }
  .rk-arrow { display: none; }
  .ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; height: auto; margin-top: 40px; }
  .ab-stats li { position: static; translate: none; white-space: normal; }
  .ab-stats b { font-size: 34px; line-height: 1.2; }
  .ab-stats li > span { font-size: 16px; line-height: 1.5; }

  .ab-story { height: auto; padding-bottom: 80px; }
  .ab-bubble, .ab-arc { display: none; }
  .ab-story > .container { padding-top: 64px; }
  .ab-story-title { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; }
  .ab-tl { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .ab-tl-tabs { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
  .ab-tl-dots { display: none; }
  .ab-tl-tabs button[aria-selected="true"] { font-size: 30px; }
  .ab-tl-panel h3 { font-size: 28px; line-height: 1.2; }
  .ab-tl-next { position: relative; left: auto; top: auto; display: block; margin: 36px 0 0 calc(50% - 32px); }

  .ab-why { height: auto; padding-bottom: 80px; }
  .ab-why > .container { padding-top: 72px; }
  .ab-why-title { font-size: clamp(32px, 5vw, 50px); line-height: 1.15; }
  .ab-slider { height: auto; margin-top: 40px; display: grid; }
  .ab-slide { position: relative; top: 0; width: auto; grid-area: 1 / 1; }
  .ab-cards { position: relative; inset: auto; grid-area: 2 / 1; height: 560px; margin-top: 40px; }
  .ab-card { left: 50%; top: 39px; margin-left: -333px; }
  .ab-pager { position: relative; right: auto; top: auto; flex-direction: row; justify-content: center; margin-top: 28px; }
  .ab-pager button[aria-current="true"] { width: 48px; height: 10px; }

  .ab-name { height: auto; padding-bottom: 80px; background-size: auto 100%; }
  .ab-name > .container { padding-top: 120px; }
  .ab-name-head h2 { font-size: 36px; line-height: 1.2; }
  .ab-quote { font-size: 26px; line-height: 1.35; }
  .ab-wordmark { left: auto; right: 0; top: -100px; width: 70%; height: auto; }
  .ab-trio { position: static; height: auto; display: grid; gap: 36px; margin-top: 56px; pointer-events: auto; }
  .ab-trio > * { position: static; }
  .ab-net, .ab-orb, .ab-node { display: none; }
  .ab-step { width: auto; max-width: 520px; padding-left: 20px; border-left: 3px solid #e1e0f8; }

  .ab-work { padding-top: 72px; }
  .ab-work .ab-h2 { font-size: clamp(32px, 5vw, 50px); line-height: 1.15; }
  .ab-carousel { margin-top: 36px; --pad: 24px; }
  .ab-wcard { width: min(448px, 82vw); }
  .ab-method { height: auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px 28px; padding: 28px 30px; margin-top: 56px; }
  .ab-method > * { position: static; }
  .ab-method .ic { width: 80px; }
  .ab-method .btn { grid-column: 1 / -1; justify-self: start; }

  .ab-who { padding-top: 96px; padding-bottom: 40px; }
  .ab-who-head { grid-template-columns: 1fr; gap: 20px; padding-left: 0; }
  .ab-who-head h2 { font-size: clamp(34px, 5vw, 50px); line-height: 1.24; }
  .ab-who-head .ul::after { top: auto; bottom: 0; }
  .ab-who-copy { padding-top: 0; margin-left: 0; }
  .ab-facts { margin: 56px 0 0; padding: 10px; border-radius: 26px; }
  .ab-facts dl { padding: 0 24px; border-radius: 20px; }
  .ab-facts dl > div, .ab-facts dl > div:first-child, .ab-facts dl > div:nth-child(3), .ab-facts dl > div:last-child { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .ab-facts dd > * { width: auto; }

  .ab-cta { height: auto; padding: 96px 0 104px; background-size: cover; }
  .ab-cta h2 { font-size: clamp(30px, 5vw, 50px); line-height: 1.2; }
}

@media (max-width: 720px) {
  .ab-stats b { font-size: 26px; }
  .ab-stats li > span { left: 0; font-size: 14px; }
  .ab-cards { height: auto; margin-top: 32px; display: grid; }
  .ab-card { position: relative; left: auto; top: auto; margin: 0; width: 100%; height: auto; grid-area: 1 / 1; padding-bottom: 24px; }
  .ab-card.is-back { transform: translate(0, -14px) scale(0.96); }
  .ab-card-h { padding: 24px 0 0 20px; font-size: 22px; }
  .ans { width: auto; margin: 18px 16px 0; }
  .ans li { height: 56px; padding: 0 10px 0 14px; }
  .ans .n { width: 30px; }
  .ans .t, .ans .r1 .t { font-size: 16px; }
  .ab .bd { font-size: 12px; }
  .why-arrow { display: none; }
  .cmp { grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 14px 0; }
  .cmp-h { font-size: 17px; gap: 8px; height: auto; line-height: 1.2; }
  .cmp-h img { width: 22px; height: auto; }
  .cmp-box { height: 120px; padding: 44px 0 0 14px; }
  .ab .bd.ok { top: 10px; right: 10px; }
  .cmp-box b { font-size: 32px; line-height: 1.2; }
  .cmp-box .l, .cmp-k, .cmp-v, .cmp-x span { font-size: 15px; line-height: 1.35; }
  .cmp-x { height: auto; padding: 14px 10px 14px 12px; gap: 8px; }
  .ab-method { grid-template-columns: 1fr; }
}