/* ==========================================================================
   À propos (a-propos.html) : grande typographie, chiffres mis en scène,
   illustrations légères. Animations au défilement via [data-reveal] (lecon.js).
   ========================================================================== */

.apropos { padding-bottom: 40px; }
.ap-hero { padding-top: 72px; padding-bottom: 24px; display: grid; gap: 20px; }
@media (min-width: 768px) { .ap-hero { padding-top: 112px; } }
.ap-hook { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 7vw, 76px); line-height: 1.08; letter-spacing: -0.02em; max-width: 14em; }
.ap-hero-art { width: 100%; max-width: 720px; height: auto; }
.ap-line { stroke-dasharray: 800; stroke-dashoffset: 0; }
[data-reveal] .ap-line, .ap-hero-art[data-reveal] .ap-line { stroke-dashoffset: 800; }
.ap-hero-art[data-reveal].is-visible .ap-line { animation: ap-draw 1.6s var(--ease) forwards; }
@keyframes ap-draw { to { stroke-dashoffset: 0; } }

.ap-section { padding-block: 56px; display: grid; gap: 24px; }
@media (min-width: 768px) { .ap-section { padding-block: 88px; } }
.ap-section h2 { font-size: clamp(28px, 4vw, 40px); }
.ap-text { display: grid; gap: 14px; max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--t1); }
.ap-text p { margin: 0; }
.ap-strong { font-family: var(--display); font-size: 22px; color: var(--t0); }

/* Chiffres du constat */
.ap-stats { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .ap-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-stat { margin: 0; padding: 22px; border-radius: var(--r-xl); display: grid; gap: 12px; align-content: start; }
.ap-big { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 7vw, 64px); line-height: 1; color: var(--t0); }
.ap-stat figcaption { font-size: 15px; line-height: 1.55; color: var(--t2); }
.ap-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 220px; }
.ap-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.ap-dots i.on { background: linear-gradient(135deg, #8FB0FF, #B79CFF); }
.ap-foyers { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 260px; }
.ap-foyers i { aspect-ratio: 1 / 1.1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8FB0FF, #4C6EF5); clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%); }
.ap-foyers i.off { background: rgba(255, 255, 255, 0.14); }
[data-reveal] .ap-dots i.on, [data-reveal] .ap-foyers i { opacity: 0; transform: scale(0.6); }
[data-reveal].is-visible .ap-dots i.on, [data-reveal].is-visible .ap-foyers i { animation: ap-pop 300ms var(--ease) forwards; }
[data-reveal].is-visible .ap-dots i:nth-child(n) { animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes ap-pop { to { opacity: 1; transform: none; } }

/* Mission : bande légèrement plus claire, étapes */
.ap-alt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.045)); border-block: 1px solid rgba(255, 255, 255, 0.05); }
.ap-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .ap-split { grid-template-columns: 1.3fr 1fr; } .ap-split-rev { grid-template-columns: 1fr 1.3fr; } }
.ap-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.ap-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); }
.ap-steps li > span:last-child { display: grid; gap: 2px; }
.ap-steps strong { font-weight: 500; color: var(--t0); }
.ap-step-n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-family: var(--mono); color: #141415; background: linear-gradient(135deg, #8FB0FF, #F5B8DA); }
[data-reveal] .ap-steps li, .ap-steps[data-reveal] li { opacity: 0; transform: translateX(-10px); }
.ap-steps[data-reveal].is-visible li { animation: ap-slide 400ms var(--ease) forwards; animation-delay: calc(var(--i) * 120ms); }
@keyframes ap-slide { to { opacity: 1; transform: none; } }

/* Derrière Klar */
.ap-portrait { padding: 24px; border-radius: var(--r-xl); display: grid; justify-items: center; gap: 16px; }
.ap-portrait svg { width: 140px; height: 140px; }
.ap-portrait text { font-family: var(--display); font-size: 44px; fill: var(--t0); }
.ap-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* Citation */
.ap-quote { position: relative; overflow: hidden; padding-block: 72px; background: radial-gradient(60% 120% at 20% 50%, rgba(76, 110, 245, 0.22), transparent 70%), radial-gradient(50% 100% at 85% 40%, rgba(245, 184, 218, 0.16), transparent 70%); border-block: 1px solid rgba(255, 255, 255, 0.06); }
@media (min-width: 768px) { .ap-quote { padding-block: 120px; } }
.ap-quote blockquote { margin: 0 auto; }
.ap-quote p { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(28px, 5vw, 56px); line-height: 1.2; letter-spacing: -0.01em; color: var(--t0); max-width: 18em; }
.ap-quote[data-reveal], .ap-quote blockquote[data-reveal] { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.ap-quote blockquote[data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }

/* Appel à l'action */
.ap-cta { justify-items: start; }
.ap-cta > p:not(.ap-source) { max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--t1); margin: 0; }
.ap-source { margin: 24px 0 0; max-width: 720px; font-size: 12px; line-height: 1.6; color: var(--t3); }
.ap-source a { color: var(--t2); text-decoration: underline; }

.ap-stat[data-reveal]:not(.is-visible), .ap-portrait[data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(12px); }
.ap-stat[data-reveal], .ap-portrait[data-reveal] { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }

/* Mobile : animations raccourcies ; mouvements réduits : aucune */
@media (max-width: 600px) { .ap-steps[data-reveal].is-visible li { animation-duration: 250ms; animation-delay: 0ms; } }
@media (prefers-reduced-motion: reduce) {
  .apropos [data-reveal], .apropos [data-reveal] * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}