/*
 * Page de présentation AkyForma (/presentation).
 * Feuille autonome (pas de Tailwind) : direction artistique propre à la vitrine.
 * Les animations au scroll reposent sur des variables CSS écrites par
 * le contrôleur Stimulus `presentation-scroll` : --p (progression 0→1), --pe (progression adoucie).
 */

/* ------------------------------------------------------------------ Tokens */
.akp {
    --akp-footer-h: clamp(620px, 57vw, 860px);
    --akp-ink: #0b0c10;
    --akp-night: #05060a;
    --akp-deep: #02040c;
    --akp-paper: #ecebe8;
    --akp-navy: #000f9f;
    --akp-blue: #3d6bff;
    --akp-violet: #b13dff;
    --akp-pink: #ff2d8a;
    --akp-orange: #ff9a3d;
    --akp-yellow: #ffe566;
    --akp-sky: #9fd8ff;
    --akp-green: #178a4c;

    --akp-pad: clamp(20px, 4.45vw, 96px);
    --akp-max: 1760px;
    --akp-h2: clamp(44px, 6.67vw, 140px);
    --akp-lead: clamp(16px, 1.25vw, 22px);
    --akp-radius-xl: clamp(28px, 3.9vw, 64px);
    --akp-ease: cubic-bezier(.2, .8, .2, 1);
    --akp-ease-io: cubic-bezier(.76, 0, .24, 1);
    --akp-display: 'Bricolage Grotesque', 'Manrope', ui-sans-serif, system-ui, sans-serif;

    position: relative;
    background: var(--akp-night);
    color: #ffffff;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.akp :where(h1, h2, h3, p, ul, ol) {
    margin: 0;
}

.akp :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.akp :where(h1, h2, h3) {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.akp :where(a) {
    color: inherit;
    text-decoration: none;
}

.akp :where(button) {
    font: inherit;
    color: inherit;
}

.akp ::selection {
    background: var(--akp-violet);
    color: #ffffff;
}

html:has(.akp) {
    scroll-behavior: smooth;
    scrollbar-color: var(--akp-blue) var(--akp-night);
    scrollbar-width: thin;
    background: var(--akp-night, #05060a);
}

@media (prefers-reduced-motion: reduce) {
    html:has(.akp) {
        scroll-behavior: auto;
    }
}

.akp :focus-visible {
    outline: 2px solid #7c9bff;
    outline-offset: 4px;
}

.akp-defs {
    position: absolute;
    width: 0;
    height: 0;
}

.akp-wrap {
    width: 100%;
    max-width: var(--akp-max);
    margin-inline: auto;
    padding-inline: var(--akp-pad);
}

.akp-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.akp-mini {
    display: block;
    pointer-events: none;
}

.akp-nowrap {
    white-space: nowrap;
}

/* ------------------------------------------------------------ Typographie */
.akp-h2 {
    font-family: var(--akp-display);
    font-size: var(--akp-h2);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.045em;
    font-variation-settings: 'opsz' 96;
    text-wrap: balance;
}

.akp-light {
    font-weight: 300;
    color: rgba(255, 255, 255, .68);
}

[data-nav-theme='light'] .akp-light {
    color: rgba(11, 12, 16, .45);
}

.akp-glass {
    color: rgba(255, 255, 255, .24);
    filter: url(#akpGlassD) drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
    padding: 0 .04em;
}

.akp-glass-l {
    color: rgba(11, 12, 16, .14);
    filter: url(#akpGlassL) drop-shadow(0 14px 22px rgba(11, 12, 16, .18));
    padding: 0 .04em;
}

.akp-lead {
    max-width: 30em;
    font-size: var(--akp-lead);
    line-height: 1.5;
    font-weight: 500;
}

.akp-forma {
    margin: 0;
    font-family: var(--akp-display);
    font-weight: 750;
    font-variation-settings: 'opsz' 96;
    letter-spacing: -.045em;
    line-height: .9;
    text-transform: uppercase;
}

.akp-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.akp-head .akp-lead {
    max-width: 22em;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .75);
}

[data-nav-theme='light'] .akp-head .akp-lead,
.akp-platform .akp-lead {
    color: rgba(11, 12, 16, .72);
}

@media (max-width: 899px) {
    .akp-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ------------------------------------------------------- Pièces partagées */
.akp-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #ff9a3d 0%, #ff2d8a 14%, #b13dff 28%, #3d6bff 42%, #000f9f 52%, #3d6bff 62%, #b13dff 74%, #ff2d8a 86%, #ffb347 100%);
    background-size: 260% 100%;
    filter: saturate(1.1);
    animation: akp-grad 16s ease-in-out infinite alternate;
}

@keyframes akp-grad {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.akp-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
    opacity: .55;
    pointer-events: none;
}

.akp-logo {
    display: inline-block;
    aspect-ratio: 150 / 38;
    background: currentColor;
    -webkit-mask: var(--akp-logo) center / contain no-repeat;
    mask: var(--akp-logo) center / contain no-repeat;
}

.akp-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tone, var(--akp-blue));
}

.akp-dot--blue { --tone: var(--akp-blue); }
.akp-dot--violet { --tone: var(--akp-violet); }
.akp-dot--pink { --tone: var(--akp-pink); }
.akp-dot--orange { --tone: var(--akp-orange); }
.akp-dot--yellow { --tone: var(--akp-yellow); }

/* Apparition au défilement (IntersectionObserver ajoute .is-in). */
.akp-reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
    transition: opacity 1s var(--akp-ease), transform 1.1s var(--akp-ease), filter 1s var(--akp-ease);
    transition-delay: var(--delay, 0s);
}

.akp-reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

.akp-desktop-only {
    display: none;
}

@media (min-width: 900px) {
    .akp-desktop-only {
        display: block;
    }
}

/* ------------------------------------------------------- Écran d’entrée */
.akp-intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    background: var(--akp-night);
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s var(--akp-ease-io);
}

.akp-intro-seen .akp-intro,
.akp-intro.is-gone {
    display: none;
}

.akp-intro.is-closing {
    clip-path: inset(50% 0 50% 0);
}

.akp-intro__count {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    font-family: var(--akp-display);
    font-size: clamp(64px, 8vw, 112px);
    font-weight: 750;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #ffffff;
    transition: opacity .35s ease, transform .35s ease;
}

.akp-intro__count::after {
    content: '%';
    margin-left: .04em;
    font-size: .55em;
    opacity: .72;
}

.akp-intro__box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 110px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(177, 61, 255, .45);
    transition:
        opacity .45s ease,
        visibility .45s ease,
        width .9s var(--akp-ease-io),
        height .9s var(--akp-ease-io),
        border-radius .9s var(--akp-ease-io);
}

.akp-intro__box .akp-noise {
    opacity: .6;
}

.akp-intro__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(360px, 60vw);
    color: #ffffff;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(.82);
    transition: opacity .6s .15s, transform 1.1s var(--akp-ease);
}

.akp-intro.is-open .akp-intro__box {
    opacity: 1;
    visibility: visible;
    width: 100vw;
    height: 100%;
    border-radius: 0;
}

.akp-intro.is-open .akp-intro__count {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
}

.akp-intro.is-open .akp-intro__logo {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 12px)) scale(1);
}

/* --------------------------------------------------------------- Navigation */
.akp-nav {
    --cap-bg: rgba(255, 255, 255, .04);
    --cap-border: rgba(255, 255, 255, .12);
    --cap-ink: #ffffff;
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: 0;
}

.akp[data-nav='light'] .akp-nav:not(.is-open) {
    --cap-bg: rgba(11, 12, 16, .05);
    --cap-border: rgba(11, 12, 16, .12);
    --cap-ink: var(--akp-ink);
}

.akp-nav__cap,
.akp-nav__burger {
    position: absolute;
    top: 20px;
    height: 56px;
    display: flex;
    align-items: center;
    border-radius: 28px;
    border: 1px solid var(--cap-border);
    background: var(--cap-bg);
    color: var(--cap-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    transition: background-color .3s, color .3s, border-color .3s, transform .25s;
}

.akp-nav__cap {
    left: 24px;
    gap: 12px;
    padding: 0 22px;
}

.akp-nav__logo {
    height: 19px;
}

.akp-nav__sep {
    width: 1px;
    height: 16px;
    background: currentColor;
    opacity: .3;
}

.akp-nav__name {
    font-family: var(--akp-display);
    font-size: 16px;
    font-weight: 750;
    font-variation-settings: 'opsz' 96;
    letter-spacing: -.04em;
    line-height: .9;
    text-transform: uppercase;
}

.akp-nav__burger {
    right: 24px;
    width: 56px;
    padding: 0;
    cursor: pointer;
}

.akp-nav__burger:hover {
    transform: scale(1.04);
}

.akp-nav__bar {
    position: absolute;
    left: 19px;
    width: 17px;
    height: 1.8px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s var(--akp-ease);
}

.akp-nav__bar:first-child {
    top: 23px;
}

.akp-nav__bar:last-child {
    top: 31px;
}

.akp-nav.is-open .akp-nav__bar:first-child {
    transform: translateY(4px) rotate(45deg);
}

.akp-nav.is-open .akp-nav__bar:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

.akp-nav__menu {
    position: absolute;
    right: 24px;
    top: 88px;
    width: 320px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 28px;
    background: rgba(12, 14, 24, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    color: #ffffff;
    transform-origin: top right;
    animation: akp-menu .35s var(--akp-ease) both;
}

.akp-nav__menu[hidden] {
    display: none;
}

@keyframes akp-menu {
    from { opacity: 0; transform: translateY(-8px) scale(.98); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: none; }
}

.akp-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    transition: background-color .2s, color .2s;
}

.akp-nav__item:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.akp-nav__item--plain {
    font-size: 16px;
    font-weight: 500;
}

.akp-nav__rule {
    height: 1px;
    margin: 8px 12px;
    background: rgba(255, 255, 255, .12);
}

.akp-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 4px;
    border-radius: 20px;
    background: #ffffff;
    color: var(--akp-night) !important;
    font-size: 16px;
    font-weight: 700;
    transition: transform .25s;
}

.akp-nav__cta:hover {
    transform: scale(1.02);
}

@media (max-width: 767px) {
    .akp-nav__cap {
        left: 16px;
        top: 14px;
        height: 48px;
        padding: 0 18px;
    }

    .akp-nav__burger {
        right: 16px;
        top: 14px;
        width: 48px;
        height: 48px;
    }

    .akp-nav__bar {
        left: 15px;
    }

    .akp-nav__bar:first-child { top: 19px; }
    .akp-nav__bar:last-child { top: 27px; }

    .akp-nav__menu {
        left: 16px;
        right: 16px;
        top: 74px;
        width: auto;
    }
}

/* -------------------------------------------------------------------- Hero */
/*
 * Le hero reste collé après la fin de son animation (data-scroll-end) :
 * --tail suit la montée du manifeste par-dessus, le hero recule et s’assombrit.
 */
.akp-hero {
    --hf: clamp(0, calc((var(--p, 0) - .72) / .28), 1);
    --tail-e: calc(var(--tail, 0) * (2 - var(--tail, 0)));
    position: relative;
    height: 290svh;
    background: #030612;
}

.akp-hero__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    transform: translateY(calc(-6svh * var(--tail-e))) scale(calc(1 - .07 * var(--hf) - .07 * var(--tail-e)));
    transform-origin: 50% 0%;
    border-radius: calc(40px * var(--hf));
    background: radial-gradient(ellipse 60% 50% at 50% 45%, #0e1d4a 0%, #030612 70%);
}

/* Titre lu par les lecteurs d’écran ; visible seulement sans WebGL (sinon dessiné dans la scène). */
.akp-hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.akp.is-nogl .akp-hero__title {
    inset: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: none;
    white-space: normal;
    text-align: center;
    font-family: var(--akp-display);
    font-size: clamp(52px, 10.8vw, 220px);
    font-weight: 750;
    line-height: .9;
    letter-spacing: -.055em;
}

.akp-hero__mid {
    position: absolute;
    left: var(--akp-pad);
    right: var(--akp-pad);
    top: clamp(96px, 13.3svh, 160px);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    opacity: min(clamp(0, calc((var(--p, 0) - .25) / .2), 1), clamp(0, calc((.8 - var(--p, 0)) / .15), 1));
}

.akp-hero__foot {
    position: absolute;
    left: var(--akp-pad);
    right: var(--akp-pad);
    bottom: clamp(28px, 5svh, 56px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    opacity: clamp(0, calc(1 - var(--p, 0) * 5), 1);
    animation: akp-fade 1.2s var(--akp-ease) 1.2s both;
}

.akp-hero__label {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.akp-hero__label--end {
    text-align: right;
}

.akp-hero__cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.akp-hero__mouse {
    position: relative;
    width: 24px;
    height: 38px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .45);
}

.akp-hero__mouse span {
    position: absolute;
    left: 9.5px;
    top: 7px;
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: #ffffff;
    animation: akp-wheel 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.akp-hero__fade {
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: calc(.55 * var(--hf) + .3 * var(--tail-e));
    pointer-events: none;
}

@keyframes akp-fade {
    from { opacity: 0; transform: translateY(10px); }
}

@keyframes akp-wheel {
    0% { transform: translateY(0); opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}

@media (max-width: 767px) {
    .akp-hero {
        height: 275svh;
    }

    .akp-hero__mid {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 10px;
    }

    .akp-hero__label {
        display: none;
    }

    .akp-hero__foot {
        justify-content: center;
    }
}

/* --------------------------------------------------------------- Manifeste */
/*
 * Carte réduite qui monte sur le hero collé et reprend toute la largeur
 * au moment où elle atteint le haut de l’écran (--grow : 0 → 1).
 */
.akp-manifesto-frame {
    --g: calc(var(--grow, 0) * var(--grow, 0) * (3 - 2 * var(--grow, 0)));
    --shrink: .26;
    position: relative;
    z-index: 3;
    margin-top: -109svh;
}

.akp-manifesto {
    position: relative;
    padding: clamp(120px, 11.8vw, 220px) 0 clamp(64px, 5.6vw, 110px);
    min-height: min(860px, 100svh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--akp-radius-xl) var(--akp-radius-xl) calc((1 - var(--g)) * var(--akp-radius-xl)) calc((1 - var(--g)) * var(--akp-radius-xl));
    background: var(--akp-paper);
    color: var(--akp-ink);
    box-shadow: 0 -40px 90px rgba(0, 0, 0, calc(.45 + .25 * (1 - var(--g))));
    transform: scale(calc(1 - var(--shrink) * (1 - var(--g))));
    transform-origin: 50% 0%;
    will-change: transform;
}

.akp-manifesto > .akp-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(56px, 8vw, 140px);
}

.akp-manifesto__glow {
    position: absolute;
    right: -160px;
    top: -200px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 154, 61, .35), rgba(255, 45, 138, .18) 55%, transparent);
    filter: blur(30px);
}

.akp-manifesto__forma {
    position: absolute;
    right: clamp(16px, 3.9vw, 72px);
    top: clamp(24px, 3vw, 56px);
    font-size: clamp(40px, 5.5vw, 88px);
    color: var(--akp-ink);
    pointer-events: none;
}

.akp-manifesto__text {
    max-width: 16.5em;
    font-family: var(--akp-display);
    font-size: clamp(34px, 5vw, 104px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.akp-word {
    display: inline-block;
    opacity: calc(.14 + .86 * clamp(0, calc(var(--p, 0) * var(--n) * 1.1 - var(--i)), 1));
    transition: opacity .25s linear;
}

.akp-word--blue { color: var(--akp-blue); }
.akp-word--violet { color: #9b2de0; }
.akp-word--pink { color: #e0247a; }
.akp-word--orange { color: #e0701f; }

.akp-manifesto__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(11, 12, 16, .18);
}

.akp-manifesto__points li {
    display: flex;
    gap: 18px;
    font-size: clamp(16px, 1.32vw, 22px);
    line-height: 1.45;
    font-weight: 500;
}

.akp-chip-shape {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
}

.akp-chip-shape--blue { background: linear-gradient(135deg, var(--akp-blue), var(--akp-violet)); }
.akp-chip-shape--pink { border-radius: 22px; background: linear-gradient(135deg, var(--akp-pink), var(--akp-orange)); }
.akp-chip-shape--yellow { border-radius: 14px 22px; background: linear-gradient(135deg, var(--akp-yellow), var(--akp-orange)); }

@media (max-width: 767px) {
    .akp-manifesto-frame {
        --shrink: .14;
        margin-top: -100svh;
    }
}

@media (max-width: 899px) {
    .akp-manifesto__points {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .akp-chip-shape {
        width: 36px;
        height: 36px;
    }
}

/* ------------------------------------------------------- Vitrine des écrans */
.akp-showcase {
    position: relative;
    height: calc(100svh + var(--count, 5) * 56svh);
    background: var(--akp-deep);
}

.akp-showcase__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
}

.akp-showcase__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(2, 4, 12, .3) 30%, rgba(2, 4, 12, .8) 100%);
    pointer-events: none;
}

.akp-showcase__grid {
    position: relative;
    height: 100%;
    max-width: var(--akp-max);
    margin-inline: auto;
    padding: clamp(96px, 13svh, 150px) var(--akp-pad) clamp(24px, 3.3svh, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        'title feats'
        'mock mock'
        'tabs tabs';
    row-gap: clamp(20px, 3svh, 36px);
    column-gap: 48px;
}

.akp-showcase__title {
    grid-area: title;
    max-width: 9.5em;
    font-size: clamp(36px, 4.17vw, 84px);
}

.akp-showcase__feats {
    grid-area: feats;
    position: relative;
    justify-self: end;
    width: min(420px, 100%);
    min-height: 120px;
}

.akp-showcase__feat {
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s, transform .8s var(--akp-ease);
}

.akp-showcase__feat.is-before {
    transform: translateY(-20px);
}

.akp-showcase__feat.is-active {
    opacity: 1;
    transform: none;
}

.akp-showcase__feat h3 {
    font-family: var(--akp-display);
    font-size: clamp(24px, 2.08vw, 40px);
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--tone);
}

.akp-showcase__feat p {
    margin-top: 8px;
    font-size: clamp(15px, 1.11vw, 19px);
    color: rgba(255, 255, 255, .75);
}

.akp-showcase__mock {
    grid-area: mock;
    align-self: center;
    justify-self: center;
    width: min(1100px, 100%, calc((100svh - 360px) * 1.825));
    min-width: min(100%, 320px);
    perspective: 1600px;
}

.akp-browser {
    padding: 8px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8), 0 50px 110px -60px var(--tone, var(--akp-blue));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: rotateX(calc(22deg * (1 - var(--se, 1)))) scale(calc(.9 + .1 * var(--se, 1)));
    transform-origin: 50% 100%;
    transition: box-shadow .6s;
}

.akp-browser__bar {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 15px 15px 0 0;
    background: #ecebe8;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.akp-browser__bar > span:not(.akp-browser__url) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5f57;
}

.akp-browser__bar > span:nth-child(2) { background: #febc2e; }
.akp-browser__bar > span:nth-child(3) { background: #28c840; }

.akp-browser__url {
    margin: 0 auto;
    padding: 3px clamp(16px, 4vw, 60px);
    border-radius: 6px;
    background: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(0, 0, 0, .5);
}

.akp-browser__view {
    position: relative;
    aspect-ratio: 1522 / 784;
    overflow: hidden;
    border-radius: 0 0 15px 15px;
    background: #f6f5f3;
}

.akp-showcase__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0;
    transform: translateX(60px) scale(1.03);
    transition: opacity .7s var(--akp-ease), transform 1s var(--akp-ease);
}

.akp-showcase__shot.is-before {
    transform: translateX(-60px) scale(1.03);
}

.akp-showcase__shot.is-active {
    opacity: 1;
    transform: none;
}

.akp-showcase__tabs {
    grid-area: tabs;
    justify-self: center;
    display: flex;
    gap: 6px;
    max-width: 100%;
    padding: 6px;
    overflow-x: auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
}

.akp-showcase__tabs::-webkit-scrollbar {
    display: none;
}

.akp-showcase__tab {
    position: relative;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .4s, color .4s, opacity .4s;
}

.akp-showcase__tab.is-active {
    background: #ffffff;
    color: var(--akp-ink);
}

.akp-showcase__tick {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--local, 0) * 100%);
    height: 2px;
    background: var(--tone);
    opacity: 0;
}

.akp-showcase__tab.is-active .akp-showcase__tick {
    opacity: 1;
}

@media (max-width: 899px) {
    .akp-showcase {
        height: calc(100svh + var(--count, 5) * 48svh);
    }

    .akp-showcase__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'title' 'feats' 'mock' 'tabs';
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        padding-top: 92px;
        row-gap: 18px;
    }

    .akp-showcase__feats {
        justify-self: start;
        width: 100%;
        min-height: 104px;
    }

    .akp-showcase__mock {
        width: 100%;
    }

    .akp-showcase__tabs {
        justify-self: stretch;
        border-radius: 26px;
    }
    .akp-browser {
        padding: 6px;
        border-radius: 18px;
    }

    .akp-browser__view {
        aspect-ratio: 4 / 3;
    }
}

/* ------------------------------------------------------ Plateforme (bento) */
.akp-platform {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 9.7vw, 180px) 0 clamp(96px, 9.7vw, 180px);
    background: var(--akp-paper);
    color: var(--akp-ink);
}

.akp-platform__scene {
    position: absolute;
    inset: 0 0 auto;
    height: min(78vh, 860px);
    overflow: hidden;
    pointer-events: none;
}

.akp-platform__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 72% 58% at 50% 38%, rgba(236, 235, 232, 0) 0%, rgba(236, 235, 232, .62) 58%, var(--akp-paper) 90%),
        linear-gradient(180deg, rgba(236, 235, 232, .08) 0%, var(--akp-paper) 78%);
}

.akp-platform > .akp-wrap {
    position: relative;
    z-index: 1;
}

.akp-platform__line {
    display: inline-block;
    opacity: clamp(0, calc(var(--p, 0) * 1.6), 1);
    transition: transform .5s var(--akp-ease);
}

.akp-platform__line--a {
    transform: translateX(calc(-260px * (1 - var(--pe, 0))));
}

.akp-platform__line--b {
    transform: translateX(calc(260px * (1 - var(--pe, 0))));
}

.akp-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(240px, 18.3vw, 340px), auto);
    gap: 16px;
    margin-top: clamp(40px, 4.4vw, 80px);
    perspective: 1600px;
    perspective-origin: 50% 0%;
}

.akp-slot {
    --amp: 1;
    display: flex;
}

.akp-slot--agenda {
    grid-column: span 2;
    grid-row: span 2;
}

.akp-slot--wide {
    grid-column: span 2;
}

.akp-tile {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2vw, 36px);
    border-radius: 30px;
    overflow: hidden;
    opacity: clamp(0, calc(var(--p, 0) * 2.2), 1);
    transform:
        translate3d(calc(var(--fx) * var(--amp) * (1 - var(--pe, 0)) * 1px), calc(var(--fy) * var(--amp) * (1 - var(--pe, 0)) * 1px), 0)
        rotateX(calc(var(--rx) * (1 - var(--pe, 0)) * 1deg))
        rotate(calc(var(--rz) * (1 - var(--pe, 0)) * 1deg))
        scale(calc(.78 + .22 * var(--pe, 0)));
    transition: transform .6s var(--akp-ease);
    will-change: transform;
}

.akp-slot.is-done .akp-tile {
    will-change: auto;
}

.akp-slot.is-done .akp-tile:hover {
    transform: scale(.985);
}

.akp-tile__kicker {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
}

.akp-tile__title {
    position: relative;
    margin-top: 8px;
    max-width: 18em;
    font-family: var(--akp-display);
    font-size: clamp(22px, 1.8vw, 32px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.akp-tile__title--lg {
    font-size: clamp(24px, 2.2vw, 40px);
    line-height: 1;
}

.akp-tile__title--xl {
    max-width: 12em;
    font-size: clamp(28px, 2.64vw, 48px);
    line-height: 1;
}

.akp-tile__foot {
    position: relative;
    margin-top: auto;
    padding-top: 20px;
}

.akp-zoom {
    transition: transform .8s var(--akp-ease);
}

.akp-slot.is-done .akp-tile:hover .akp-zoom {
    transform: scale(1.04) rotate(-1deg);
}

.akp-tile--agenda {
    background: linear-gradient(145deg, #1b2a8a 0%, var(--akp-blue) 55%, var(--akp-violet) 100%);
    color: #ffffff;
}

.akp-tile--pricing {
    background: linear-gradient(160deg, #e0106f, #ff3d8f);
    color: #ffffff;
}

.akp-tile--company {
    background: var(--akp-yellow);
}

.akp-tile--survey {
    background: linear-gradient(160deg, var(--akp-orange), #ff6a2e);
}

.akp-tile--trainers {
    background: var(--akp-sky);
}

.akp-tile--elearning {
    background: linear-gradient(120deg, var(--akp-violet) 0%, var(--akp-pink) 70%, var(--akp-orange) 100%);
    color: #ffffff;
}

.akp-tile--io {
    background: var(--akp-ink);
    color: #ffffff;
}

.akp-tile__glow {
    position: absolute;
    right: -80px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(61, 107, 255, .55), transparent);
    filter: blur(20px);
}

/* Micro-animations déclenchées quand la tuile est en place (.is-done). */
.akp-pop {
    opacity: 0;
    transform: translateY(14px) scale(.94);
    transition: opacity .6s var(--akp-ease), transform .8s var(--akp-ease);
    transition-delay: var(--d, 0s);
}

.akp-slot.is-done .akp-pop {
    opacity: 1;
    transform: none;
}

.akp-agenda {
    margin-top: auto;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.akp-tile--agenda .akp-agenda {
    margin-top: auto;
}

.akp-tile--agenda {
    gap: 24px;
}

.akp-agenda__days,
.akp-agenda__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.akp-agenda__days {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

.akp-agenda__grid {
    height: clamp(180px, 16vw, 300px);
    margin-top: 10px;
}

.akp-agenda__col {
    position: relative;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

.akp-ev {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--t);
    height: var(--h);
    padding: 8px;
    overflow: hidden;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(14px) scale(.94);
    transition: opacity .6s var(--akp-ease), transform .8s var(--akp-ease);
    transition-delay: var(--d, 0s);
}

.akp-slot.is-done .akp-ev {
    opacity: 1;
    transform: none;
}

.akp-slot.is-done .akp-ev.akp-float {
    animation: akp-float 5s ease-in-out 1.2s infinite;
}

.akp-ev--yellow { background: var(--akp-yellow); color: var(--akp-ink); }
.akp-ev--white { background: #ffffff; color: #1b2a8a; }
.akp-ev--pink { background: var(--akp-pink); color: #ffffff; }
.akp-ev--violet { background: rgba(255, 255, 255, .92); color: #7a22c2; }
.akp-ev--orange { background: var(--akp-orange); color: var(--akp-ink); }
.akp-ev--sky { background: var(--akp-sky); color: var(--akp-ink); }

@keyframes akp-float {
    50% { transform: translateY(-8px); }
}

.akp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.akp-pills span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 800;
}

.akp-pills .is-on {
    background: #ffffff;
    color: #c22e82;
}

.akp-pills--outline span {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
}

.akp-siret {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.akp-siret__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.akp-type {
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
}

.akp-slot.is-done .akp-type {
    width: 13.6ch;
    transition: width 1.3s steps(17) .5s;
}

.akp-caret {
    width: 2px;
    height: 16px;
    background: var(--akp-ink);
    animation: akp-blink 1.4s ease-in-out infinite;
}

.akp-siret__found {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
}

.akp-siret__ok {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--akp-ink);
    color: var(--akp-yellow);
    font-size: 11px;
}

.akp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.akp-bars > span {
    height: 8px;
    border-radius: 8px;
}

.akp-bars > span:first-child {
    background: rgba(11, 12, 16, .14);
    overflow: hidden;
}

.akp-barloop {
    display: block;
    height: 8px;
    border-radius: 8px;
    background: var(--akp-ink);
    animation: akp-bar 4s ease-in-out infinite;
}

@keyframes akp-bar {
    0%, 100% { width: 22%; }
    50% { width: 78%; }
}

.akp-grow {
    width: var(--w);
    background: rgba(11, 12, 16, .25);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--akp-ease);
    transition-delay: var(--d, 0s);
}

.akp-slot.is-done .akp-grow {
    transform: none;
}

.akp-docs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.akp-docs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.akp-docs__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.akp-docs__dot--ok { background: var(--akp-green); }
.akp-docs__dot--warn { background: #e0701f; }

.akp-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.akp-steps__step {
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .25);
    font-size: 13px;
    font-weight: 800;
}

.akp-steps__step.is-on {
    background: #ffffff;
}

.akp-steps__step--violet { color: #7a22c2; }
.akp-steps__step--pink { color: #c4135f; }

.akp-steps__arrow {
    display: flex;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.akp-progress {
    position: relative;
    display: block;
    height: 4px;
    margin-top: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

.akp-progress span {
    position: absolute;
    inset: 0;
    background: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
}

.akp-slot.is-done .akp-progress span {
    animation: akp-progress 3.4s cubic-bezier(.6, 0, .2, 1) .7s both;
}

@keyframes akp-progress {
    to { transform: scaleX(1); }
}

@media (max-width: 1099px) {
    .akp-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .akp-slot {
        --amp: .45;
    }
}

@media (max-width: 699px) {
    .akp-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 12px;
    }

    .akp-slot--agenda,
    .akp-slot--wide {
        grid-column: auto;
        grid-row: auto;
    }

    .akp-slot {
        --amp: .2;
    }

    .akp-tile {
        min-height: 220px;
        border-radius: 26px;
    }

    .akp-platform__line--a,
    .akp-platform__line--b {
        transform: translateX(calc(80px * (1 - var(--pe, 0)) * var(--dir, 1)));
    }

    .akp-platform__line--a {
        --dir: -1;
    }
}

/* ---------------------------------------------------------------- Espaces */
.akp-spaces-pin {
    position: relative;
    z-index: 2;
    padding-bottom: 70svh;
    margin-bottom: -70svh;
}

.akp-spaces {
    position: sticky;
    bottom: 0;
    overflow: hidden;
    padding: clamp(96px, 9.7vw, 180px) 0 clamp(80px, 7vw, 140px);
    background: var(--akp-night);
}

.akp-spaces__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 62% 0%, rgba(177, 61, 255, .25), transparent 70%),
        linear-gradient(180deg, rgba(5, 6, 10, .7) 0%, rgba(5, 6, 10, .35) 45%, rgba(5, 6, 10, .45) 100%);
    pointer-events: none;
}

.akp-roles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(40px, 4.4vw, 80px);
}

.akp-role {
    --tone: var(--akp-blue);
    --tone-ink: #ffffff;
    position: relative;
    min-height: clamp(360px, 29vw, 480px);
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow: hidden;
    border-radius: 28px;
    background: #0f111a;
    border: 1px solid rgba(255, 255, 255, .1);
    opacity: 0;
    transform: translateY(60px);
    transition: opacity .9s var(--akp-ease) var(--delay, 0s), transform 1s var(--akp-ease) var(--delay, 0s);
}

.akp-roles.is-in .akp-role {
    opacity: 1;
    transform: none;
}

.akp-roles.is-in .akp-role:hover {
    transform: translateY(-8px);
}

.akp-role--violet { --tone: var(--akp-violet); }
.akp-role--pink { --tone: var(--akp-pink); }
.akp-role--orange { --tone: var(--akp-orange); --tone-ink: var(--akp-ink); }

.akp-role__glow {
    position: absolute;
    left: -40px;
    top: -80px;
    width: 320px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 45%, transparent), transparent);
    filter: blur(10px);
}

.akp-role__icon {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--tone);
    color: var(--tone-ink);
    font-size: 24px;
}

.akp-role h3 {
    position: relative;
    margin-top: auto;
    padding-top: 48px;
    font-family: var(--akp-display);
    font-size: clamp(26px, 2.08vw, 36px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.035em;
}

.akp-role p {
    position: relative;
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, .68);
}

.akp-role__items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14px;
    font-weight: 600;
}

.akp-role__items li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.akp-role__items li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tone);
}

@media (max-width: 1099px) {
    .akp-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .akp-roles {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .akp-role {
        min-height: 0;
    }

    .akp-role h3 {
        padding-top: 32px;
    }
}

/* ------------------------------------------------------------------ Parcours */
.akp-journey-frame {
    --inset: calc((1 - var(--pin, 1)) * var(--inset-max, 64px));
    --radius: calc((1 - var(--pin, 1)) * 56px);
    position: relative;
    z-index: 3;
    background: var(--akp-night);
    box-shadow: 0 -40px 80px rgba(0, 0, 0, .28);
}

.akp-journey {
    position: relative;
    height: calc(100svh + var(--count, 6) * 34svh);
    background: var(--akp-navy);
    clip-path: inset(0 var(--inset) round var(--radius));
}

.akp-journey__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    padding-top: clamp(96px, 14.4svh, 160px);
    overflow: hidden;
}

.akp-journey__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(177, 61, 255, .45), transparent 45%),
        radial-gradient(circle at 95% 105%, rgba(255, 45, 138, .38), transparent 45%),
        radial-gradient(circle at 75% 0%, rgba(255, 229, 102, .14), transparent 35%),
        linear-gradient(180deg, rgba(0, 15, 159, .35), rgba(0, 15, 159, .6) 55%, rgba(0, 15, 159, .75));
    pointer-events: none;
}

.akp-journey .akp-head {
    width: 100%;
}

.akp-journey .akp-h2 {
    font-size: min(var(--akp-h2), 10.5svh);
}

.akp-journey__viewport {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: clamp(24px, 4svh, 64px);
    padding-bottom: 72px;
}

.akp-journey__track {
    --card-w: min(clamp(280px, 27.8vw, 480px), max(260px, calc((100svh - 420px) * 1.11)));
    display: flex;
    gap: 24px;
    padding-inline: var(--akp-pad);
    transform: translate3d(calc(var(--p, 0) * var(--shift, 0) * -1px), 0, 0);
    will-change: transform;
}

.akp-step {
    --bg: rgba(255, 255, 255, .08);
    --ink: #ffffff;
    --tag-bg: var(--akp-yellow);
    --tag-ink: var(--akp-ink);
    position: relative;
    flex-shrink: 0;
    width: var(--card-w);
    aspect-ratio: 400 / 360;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--ink);
    transition: transform .5s var(--akp-ease);
}

.akp-step:hover {
    transform: translateY(-8px);
}

.akp-step--yellow { --bg: var(--akp-yellow); --ink: var(--akp-ink); --tag-bg: var(--akp-ink); --tag-ink: var(--akp-yellow); }
.akp-step--orange { --bg: var(--akp-orange); --ink: var(--akp-ink); --tag-bg: var(--akp-ink); --tag-ink: var(--akp-orange); }
.akp-step--pink { --bg: #e0157a; --tag-bg: #ffffff; --tag-ink: #c22e82; }
.akp-step--violet { --bg: var(--akp-violet); --tag-bg: #ffffff; --tag-ink: #7c3aed; }
.akp-step--glass:nth-child(5) { --tag-bg: var(--akp-sky); }

.akp-step__shape {
    position: absolute;
    right: 6px;
    top: 2px;
    width: 40%;
    height: auto;
    aspect-ratio: 1;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .22));
}

.akp-step__phase {
    position: relative;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--tag-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.akp-step__index {
    position: relative;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .55;
}

.akp-step__title {
    position: relative;
    margin-top: auto;
    font-family: var(--akp-display);
    font-size: clamp(30px, 2.78vw, 48px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.045em;
}

.akp-step__desc {
    position: relative;
    margin-top: 12px;
    font-size: clamp(15px, 1.11vw, 18px);
    opacity: .82;
}

.akp-journey__progress {
    position: absolute;
    left: var(--akp-pad);
    right: var(--akp-pad);
    bottom: clamp(32px, 6svh, 56px);
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .18);
}

.akp-journey__progress span {
    display: block;
    width: calc(var(--p, 0) * 100%);
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--akp-yellow), var(--akp-orange), var(--akp-pink), var(--akp-violet));
}

/* Mobile : défilement horizontal natif, sans section collante. */
@media (max-width: 767px) {
    .akp-journey-frame {
        --inset-max: 16px;
    }

    .akp-journey {
        height: auto;
    }

    .akp-journey__stage {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 96px 0 56px;
    }

    .akp-journey__viewport {
        margin-top: 32px;
        padding-bottom: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .akp-journey__viewport::-webkit-scrollbar {
        display: none;
    }

    .akp-journey__track {
        --card-w: min(82vw, 340px);
        transform: none;
        padding-right: var(--akp-pad);
    }

    .akp-step {
        scroll-snap-align: start;
        scroll-margin-left: var(--akp-pad);
        aspect-ratio: auto;
        min-height: 340px;
    }

    .akp-journey__progress {
        display: none;
    }
}

/* ------------------------------------------------------------------ Qualiopi */
.akp-qualiopi {
    position: relative;
    z-index: 4;
    overflow: hidden;
    padding: clamp(96px, 9.7vw, 180px) 0 clamp(96px, 9.7vw, 180px);
    border-radius: 0 0 var(--akp-radius-xl) var(--akp-radius-xl);
    background: var(--akp-paper);
    color: var(--akp-ink);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35);
}

.akp-qualiopi__glow {
    position: absolute;
    left: -200px;
    bottom: -300px;
    width: 700px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(61, 107, 255, .22), rgba(177, 61, 255, .12) 55%, transparent);
    filter: blur(30px);
}

.akp-qualiopi__forma {
    position: absolute;
    right: clamp(16px, 4vw, 72px);
    top: clamp(16px, 2vw, 40px);
    font-size: clamp(36px, 4.6vw, 72px);
    color: var(--akp-ink);
    pointer-events: none;
}

.akp-qualiopi__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    align-items: center;
    gap: clamp(40px, 4.4vw, 96px);
}

.akp-qualiopi .akp-lead {
    margin-top: clamp(24px, 2.8vw, 44px);
    color: rgba(11, 12, 16, .75);
}

.akp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.akp-tag {
    padding: 9px 16px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.akp-tag--blue { background: var(--akp-blue); }
.akp-tag--violet { background: #9b2ff0; }
.akp-tag--pink { background: #e0106f; }

.akp-audit {
    position: relative;
    padding: clamp(16px, 2vw, 30px);
    overflow: hidden;
    border-radius: 40px;
}

.akp-audit__card {
    position: relative;
    padding: clamp(20px, 2vw, 28px);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 60px -30px rgba(11, 12, 16, .4);
}

.akp-audit__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(11, 12, 16, .08);
}

.akp-audit__name {
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 800;
    letter-spacing: -.02em;
}

.akp-audit__badge {
    display: grid;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
}

.akp-audit__badge > span {
    grid-area: 1 / 1;
    padding: 6px 12px;
    border-radius: 999px;
    text-align: center;
    transition: opacity .5s 1.9s;
}

.akp-audit__pending { background: #fdf1de; color: #b45309; }
.akp-audit__ready { background: #e5f6ea; color: var(--akp-green); opacity: 0; }
.akp-audit.is-in .akp-audit__pending { opacity: 0; }
.akp-audit.is-in .akp-audit__ready { opacity: 1; }

.akp-audit__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(11, 12, 16, .06);
}

.akp-check {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1.5px solid rgba(11, 12, 16, .2);
    color: transparent;
    font-size: 14px;
    transition: background-color .5s, border-color .5s, color .3s;
    transition-delay: var(--d, 0s);
}

.akp-audit.is-in .akp-check {
    background: var(--akp-green);
    border-color: var(--akp-green);
    color: #ffffff;
}

.akp-audit__label {
    flex-grow: 1;
    font-size: clamp(15px, 1.11vw, 16px);
    font-weight: 600;
}

.akp-phase {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--akp-ink);
}

.akp-phase--yellow { background: var(--akp-yellow); }
.akp-phase--pink { background: #ff9ac8; }
.akp-phase--sky { background: var(--akp-sky); }

@media (max-width: 1099px) {
    .akp-qualiopi__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .akp-audit {
        max-width: 640px;
    }
}

@media (max-width: 599px) {
    .akp-qualiopi__forma {
        display: none;
    }

    .akp-audit {
        border-radius: 28px;
    }

    .akp-audit__card {
        border-radius: 20px;
    }

    .akp-audit__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------- Pied de page */
/*
 * Comme la maquette : le pied de page glisse sous l’arrondi de Qualiopi ; le dégradé animé
 * et le grand logo 3D (WebGL, mode « footer ») remplissent le cadre. Le contrôleur de scroll
 * écrit --f / --fe (0 → 1 pendant l’entrée) : parallaxe du fond, voile qui s’efface,
 * contenu qui monte et grandit légèrement.
 */
#main-content {
    position: relative;
    z-index: 2;
}

.akp-footer {
    --fe: 1;
    position: relative;
    z-index: 1;
    min-height: var(--akp-footer-h);
    margin-top: calc(-1 * var(--akp-radius-xl));
    overflow: hidden;
    background: #0a0f3a;
}

.akp-footer__bg {
    position: absolute;
    inset: 0;
    transform: translate3d(0, calc((1 - var(--fe)) * -320px), 0);
    will-change: transform;
}

.akp-footer__fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #ffe566 0%, #ff9a3d 14%, #ff2d8a 30%, #b13dff 48%, #3d6bff 64%, #000f9f 80%, #000c21 100%);
}

.akp-footer__scene {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.akp.is-nogl .akp-footer__scene,
.akp.is-nogl .akp-footer__forma3d {
    display: none;
}

.akp-footer__dim {
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: calc(0.7 * (1 - var(--fe)));
    pointer-events: none;
}

.akp-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding-top: calc(var(--akp-radius-xl) + clamp(56px, 4.2vw, 80px));
    /* Laisse voir le grand logo 3D sous le contenu. */
    padding-bottom: clamp(220px, 24vw, 340px);
    opacity: calc(0.2 + 0.8 * var(--fe));
    transform: translate3d(0, calc((1 - var(--fe)) * 120px), 0) scale(calc(0.94 + 0.06 * var(--fe)));
    transform-origin: 50% 0;
}

.akp-footer__forma3d {
    width: 220px;
    height: 100px;
    margin: -30px 0 -30px -18px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .akp-footer__forma3d {
        width: 160px;
        height: 73px;
        margin: -22px 0 -22px -12px;
    }
}

/* Le mot « FORMA » en texte ne s’affiche que sans WebGL. */
.akp-footer__forma {
    display: none;
}

.akp.is-nogl .akp-footer__forma {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .akp-footer {
        --fe: 1 !important;
    }
}

.akp-footer__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.akp-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.akp-footer__logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.akp-footer__akyos {
    height: 40px;
    color: #ffffff;
}

.akp-footer__forma {
    font-size: 44px;
    color: #ffffff;
}

.akp-footer__brand p {
    max-width: 21em;
    font-size: clamp(17px, 1.39vw, 22px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
}

.akp-pill {
    min-height: 76px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 22px;
    padding: 0 10px 0 30px;
    border-radius: 38px;
    background: #ffffff;
    color: var(--akp-night) !important;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    transition: transform .35s;
}

.akp-pill:hover {
    transform: scale(1.02);
}

.akp-pill__circle {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--akp-night);
    color: #ffffff;
    font-size: 22px;
    transition: transform .45s var(--akp-ease);
}

.akp-pill:hover .akp-pill__circle {
    transform: rotate(-45deg);
}

.akp-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}

.akp-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 90px;
}

.akp-footer__cols div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.akp-footer__cols h2 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.akp-footer__cols a {
    transition: opacity .2s;
}

.akp-footer__cols a:hover {
    opacity: .6;
}

.akp-footer__copy {
    align-self: flex-end;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 767px) {
    .akp-footer__top,
    .akp-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .akp-footer__akyos {
        height: 30px;
    }

    .akp-footer__forma {
        font-size: 32px;
    }

    .akp-pill {
        width: 100%;
        min-height: 64px;
        justify-content: space-between;
        font-size: 18px;
    }

    .akp-pill__circle {
        width: 46px;
        height: 46px;
    }

    .akp-footer__cols {
        gap: 28px 48px;
    }

    .akp-footer__copy {
        align-self: flex-start;
    }
}

/* ------------------------------------------------------- Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .akp *,
    .akp *::before,
    .akp *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .akp-reveal,
    .akp-role,
    .akp-pop,
    .akp-ev {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .akp-tile,
    .akp-platform__line {
        opacity: 1;
        transform: none;
    }

    .akp-grow,
    .akp-progress span {
        transform: none;
    }

    .akp-type {
        width: auto;
    }

    .akp-manifesto {
        transform: none;
        border-radius: var(--akp-radius-xl) var(--akp-radius-xl) 0 0;
    }
}