/* Apps & Extensions — pastel Y2K kawaii */

body.page-apps {
    --apps-radius: 26px;
    --apps-radius-sm: 14px;
    --apps-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Layout page — largeur / gutters : .shop_content global (index.css), pas de width ici */
body.page-apps .shop_content {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: none;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 1024px) {
    body.page-apps .shop_content {
        gap: 0;
    }
}

body.page-apps .shop_content > .menu {
    position: relative;
    z-index: 3;
}

body.page-apps .shop_content > .page-flower-bg {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    overflow: visible;
}

/* ── Page shell ── */

/* Même gutter horizontal que les autres pages (ex. neodex : 2%) */
.apps-page {
    width: 100%;
    margin: 0;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    padding: clamp(1rem, 2vw, 1.5rem) 2% clamp(2.75rem, 5.5vw, 4.25rem);
    box-sizing: border-box;
    overflow: visible;
}

/* ── Header ── */

.apps-page__header {
    position: relative;
    margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.apps-page__header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100%, 320px);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        color-mix(in srgb, var(--accent) 55%, #63eafc) 42%,
        color-mix(in srgb, var(--accent) 35%, transparent) 100%
    );
    opacity: 0.85;
}

.apps-page__title {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.02em;
    background: linear-gradient(
        118deg,
        var(--text-ink) 0%,
        color-mix(in srgb, var(--text-ink) 82%, var(--accent)) 55%,
        color-mix(in srgb, var(--accent) 45%, var(--text-ink)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.apps-page__intro {
    margin: clamp(0.9rem, 2vw, 1.2rem) 0 0;
    max-width: 52ch;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Sections ── */

.apps-section {
    --section-accent: var(--accent);
}

.apps-section:first-of-type {
    --section-accent: #FF4D9A;
}

.apps-section:last-of-type {
    --section-accent: #F0A060;
}

.apps-section + .apps-section {
    margin-top: 0;
    padding-top: clamp(3rem, 6.5vw, 4.75rem);
}

.apps-section + .apps-section::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 0 clamp(2.25rem, 4.5vw, 3.25rem);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--section-accent) 28%, var(--border-soft)) 18%,
        color-mix(in srgb, var(--section-accent) 18%, var(--border-soft)) 50%,
        color-mix(in srgb, var(--section-accent) 28%, var(--border-soft)) 82%,
        transparent 100%
    );
}

body.page-apps .apps-section__title.text_4 {
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    padding: 0.1rem 0 0.1rem 0.9rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: color-mix(in srgb, var(--text-ink) 72%, var(--text-muted));
    border-left: 3px solid var(--section-accent);
}

/* ── Card grid ── */

.apps-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(1.85rem, 4.2vw, 2.65rem);
    overflow: visible;
}

/* 2 colonnes uniquement quand chaque carte a assez de place (sinon texte écrasé par l’image) */
@media (min-width: 1500px) {
    .apps-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1.25rem, 2vw, 2rem);
        align-items: stretch;
    }
}

.apps-card__heading {
    display: block;
}

/* En colonne : le wrapper surface est transparent pour le layout */
@media (max-width: 1499.98px) {
    .apps-card__surface {
        display: contents;
    }
}

/* Y2K sticker badge — coin haut-droit, au-dessus de tout */
.apps-card__badge {
    --badge-tilt: -7deg;

    position: absolute;
    top: -0.55rem;
    right: clamp(0.85rem, 2.2vw, 1.35rem);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.34rem 0.72rem;
    border-radius: 8px;
    background: var(--apps-accent);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(0.68rem, 1.5vw, 0.78rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    transform: rotate(var(--badge-tilt));
    transform-origin: center center;
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--apps-accent-deep) 88%, black),
        0 4px 14px -4px color-mix(in srgb, var(--apps-accent) 45%, transparent);
}

html[data-theme="dark"] .apps-card__badge {
    color: #fff;
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--apps-accent-deep) 75%, black),
        0 4px 16px -4px color-mix(in srgb, var(--apps-accent) 55%, transparent);
}

/* ── Cards ── */

.apps-card {
    --apps-accent: var(--accent);
    --apps-accent-deep: var(--accent-dark);
    --apps-accent-pastel: color-mix(in srgb, var(--apps-accent) 18%, #fff);
    --apps-accent-glow: color-mix(in srgb, var(--apps-accent) 32%, transparent);
    --apps-media-size: clamp(220px, 30vw, 300px);
    --apps-media-out: clamp(40px, 5vw, 56px);
    --apps-media-inset: clamp(1.75rem, 4vw, 2.5rem);
    --apps-pad-block: clamp(1.25rem, 2.6vw, 1.75rem);
    --apps-pad-inline-start: clamp(1.25rem, 2.6vw, 1.75rem);
    --apps-pad-inline-end: calc(var(--apps-media-size) - var(--apps-media-out) + var(--apps-media-inset) + 1.35rem);
    --apps-img-tilt: 0deg;
    --apps-blob-bg: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        color-mix(in srgb, var(--apps-accent) 18%, transparent) 0%,
        color-mix(in srgb, var(--apps-accent) 9%, transparent) 32%,
        color-mix(in srgb, var(--apps-accent) 3%, transparent) 52%,
        transparent 74%
    );
    --apps-blob-mask: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        #000 12%,
        rgba(0, 0, 0, 0.55) 38%,
        transparent 80%
    );

    position: relative;
    display: block;
    min-height: 210px;
    padding: var(--apps-pad-block) var(--apps-pad-inline-end) var(--apps-pad-block) var(--apps-pad-inline-start);
    border-radius: var(--apps-radius);
    border: 1.5px solid color-mix(in srgb, #fff 72%, var(--apps-accent) 28%);
    background:
        linear-gradient(
            168deg,
            color-mix(in srgb, #fff 88%, var(--apps-accent-pastel)) 0%,
            color-mix(in srgb, var(--apps-accent-pastel) 55%, var(--bg-surface)) 38%,
            color-mix(in srgb, var(--apps-accent) 6%, var(--bg-surface)) 100%
        );
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
        0 14px 36px -18px var(--apps-accent-glow),
        0 4px 12px -6px color-mix(in srgb, var(--text-ink) 8%, transparent);
    box-sizing: border-box;
    overflow: visible;
    isolation: isolate;
    transition:
        transform 0.32s var(--apps-ease),
        box-shadow 0.32s var(--apps-ease);
}

/* Glossy top shine */
.apps-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #fff 42%, transparent) 0%,
        transparent 42%
    );
    pointer-events: none;
    z-index: 0;
}

/* Soft accent blob — aligné sur la zone image */
.apps-card::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--apps-media-inset) - var(--apps-media-out));
    width: var(--apps-media-size);
    height: var(--apps-media-size);
    border-radius: 50%;
    background: var(--apps-blob-bg);
    pointer-events: none;
    z-index: 0;
    transform: translateY(-50%);
    filter: blur(8px);
    -webkit-mask-image: var(--apps-blob-mask);
    mask-image: var(--apps-blob-mask);
}

.apps-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
        0 20px 44px -16px var(--apps-accent-glow),
        0 6px 16px -8px color-mix(in srgb, var(--text-ink) 10%, transparent);
}

/* Per-card pastel palettes */
.apps-card--phone {
    --apps-accent: #FF4D9A;
    --apps-accent-deep: #E12478;
    --apps-accent-pastel: #FFD6EA;
    --apps-img-tilt: -5deg;
}

.apps-card--desktop {
    --apps-accent: #8B6FE8;
    --apps-accent-deep: #6E51C8;
    --apps-accent-pastel: #E4DCFF;
    --apps-img-tilt: 4deg;
}

.apps-card--widget {
    --apps-accent: #F0A060;
    --apps-accent-deep: #E07A30;
    --apps-accent-pastel: #FFE8D4;
    --apps-img-tilt: -3.5deg;
}

.apps-card--extensions {
    --apps-accent: #48B8F5;
    --apps-accent-deep: #2498D8;
    --apps-accent-pastel: #D4EFFA;
    --apps-img-tilt: 5.5deg;
}

html[data-theme="dark"] .apps-card {
    border-color: color-mix(in srgb, var(--apps-accent) 22%, var(--border-neutral));
    background:
        linear-gradient(
            168deg,
            color-mix(in srgb, var(--apps-accent) 12%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--apps-accent) 6%, var(--bg-surface)) 45%,
            color-mix(in srgb, var(--apps-accent) 3%, var(--bg-page)) 100%
        );
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
        0 14px 36px -18px color-mix(in srgb, var(--apps-accent) 25%, transparent),
        0 4px 12px -6px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .apps-card::before {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #fff 8%, transparent) 0%,
        transparent 38%
    );
}

html[data-theme="dark"] .apps-section + .apps-section::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--section-accent) 22%, var(--border-neutral)) 18%,
        color-mix(in srgb, var(--section-accent) 14%, var(--border-neutral)) 50%,
        color-mix(in srgb, var(--section-accent) 22%, var(--border-neutral)) 82%,
        transparent 100%
    );
}

/* ── Card content ── */

.apps-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 100%;
    min-width: 0;
}

.apps-card__title {
    margin: 0;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--text-ink);
}

.apps-card__desc {
    margin: 0;
    line-height: 1.58;
    color: var(--text-muted);
    max-width: 42ch;
}

.apps-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0.55rem;
}

/* ── Visual (images dépassant) ── */

.apps-card__visual {
    position: absolute;
    top: 50%;
    right: calc(var(--apps-media-inset) - var(--apps-media-out));
    z-index: 2;
    width: var(--apps-media-size);
    pointer-events: none;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.38s var(--apps-ease);
}

.apps-card:hover .apps-card__visual {
    transform: translateY(calc(-50% - 4px));
}

.apps-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center center;
    transform: rotate(var(--apps-img-tilt));
    filter:
        drop-shadow(0 14px 24px color-mix(in srgb, var(--apps-accent) 22%, transparent))
        drop-shadow(0 4px 8px color-mix(in srgb, var(--text-ink) 6%, transparent));
    transition:
        transform 0.38s var(--apps-ease),
        filter 0.38s var(--apps-ease);
}

.apps-card:hover .apps-card__img {
    transform: rotate(var(--apps-img-tilt)) scale(1.02);
    filter:
        drop-shadow(0 18px 30px color-mix(in srgb, var(--apps-accent) 28%, transparent))
        drop-shadow(0 6px 10px color-mix(in srgb, var(--text-ink) 8%, transparent));
}

/* ── Buttons ── */

.apps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 1000px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    text-decoration: none !important;
    transition:
        transform 0.18s var(--apps-ease),
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.apps-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apps-btn__icon svg {
    width: 17px;
    height: 17px;
}

.apps-btn--primary {
    background: var(--apps-accent);
    color: #fff !important;
}

.apps-btn--primary:hover {
    background: var(--apps-accent-deep);
}

.apps-btn--primary:active {
    background: color-mix(in srgb, var(--apps-accent-deep) 80%, black);
}

.apps-btn--primary .apps-btn__icon {
    color: #fff;
}

.apps-btn--outline {
    background: color-mix(in srgb, var(--apps-accent-pastel) 45%, var(--bg-surface));
    border: 2px solid color-mix(in srgb, var(--apps-accent) 35%, var(--border-neutral));
    color: var(--apps-accent-deep) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset;
}

.apps-btn--outline:hover {
    background: color-mix(in srgb, var(--apps-accent-pastel) 65%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--apps-accent) 50%, var(--border-neutral));
    transform: translateY(-1px);
}

.apps-btn--outline:active {
    background: color-mix(in srgb, var(--apps-accent) 12%, var(--bg-surface));
    transform: translateY(0);
}

.apps-btn--outline .apps-btn__icon {
    color: var(--apps-accent);
}

html[data-theme="dark"] .apps-btn--outline {
    background: color-mix(in srgb, var(--apps-accent) 10%, var(--bg-surface));
    border-color: color-mix(in srgb, var(--apps-accent) 28%, var(--border-neutral));
    box-shadow: none;
}

html[data-theme="dark"] .apps-btn--outline:hover {
    background: color-mix(in srgb, var(--apps-accent) 16%, var(--bg-surface));
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .apps-page {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 720px) {
    .apps-page__header::after {
        width: min(100%, 220px);
    }

    /* Colonne : titre → description → boutons → image */
    .apps-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 1.05rem 0.9rem;
        border-radius: 22px;
    }

    .apps-card__content {
        gap: 0.45rem;
    }

    .apps-card__desc {
        max-width: none;
        font-size: 0.92rem;
    }

    .apps-card__actions {
        margin-top: 0.55rem;
    }

    .apps-card::after {
        top: auto;
        bottom: clamp(0.75rem, 2vw, 1rem);
        left: 50%;
        right: auto;
        width: min(280px, 75%);
        height: min(280px, 75%);
        transform: translateX(-50%);
    }

    .apps-card__visual {
        position: relative;
        z-index: 2;
        width: min(280px, 75%);
        max-width: 100%;
        margin: clamp(1rem, 3vw, 1.35rem) auto 0;
        transform: none;
    }

    .apps-btn {
        padding: 9px 16px;
        font-size: 0.86rem;
    }

    .apps-card:hover {
        transform: none;
    }

    .apps-card:hover .apps-card__visual {
        transform: none;
    }

    .apps-card:hover .apps-card__img {
        transform: rotate(var(--apps-img-tilt));
    }

    @media (prefers-reduced-motion: reduce) {
        .apps-card:hover .apps-card__visual {
            transform: none;
        }
    }
}

@media (max-width: 480px) {
    .apps-card__visual {
        width: min(240px, 80%);
    }

    body.page-apps .apps-section__title.text_4 {
        padding-left: 0.75rem;
        border-left-width: 2.5px;
    }
}

@keyframes apps-btn-cta-pop {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
            0 2px 8px -3px color-mix(in srgb, var(--apps-accent) 16%, transparent);
    }

    50% {
        transform: translateY(-5px) scale(1.07);
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
            0 12px 24px -8px color-mix(in srgb, var(--apps-accent) 38%, transparent),
            0 4px 10px -4px color-mix(in srgb, var(--text-ink) 10%, transparent);
    }
}

/* ── Mode ligne (2 cartes côte à côte) : fond court pleine largeur + boutons hors fond ── */
@media (min-width: 1500px) {
    .apps-card {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .apps-card::before,
    .apps-card::after {
        display: none;
    }

    .apps-card:hover {
        box-shadow: none;
    }

    html[data-theme="dark"] .apps-card {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .apps-card__content {
        gap: clamp(1.25rem, 2.2vw, 1.75rem);
        min-height: calc(210px - 2 * var(--apps-pad-block));
    }

    /* Fond : pleine largeur de la carte, hauteur = titre + description uniquement */
    .apps-card__surface {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        margin-top: calc(-1 * var(--apps-pad-block));
        margin-left: calc(-1 * var(--apps-pad-inline-start));
        margin-right: calc(-1 * var(--apps-pad-inline-end));
        padding:
            var(--apps-pad-block)
            var(--apps-pad-inline-end)
            clamp(1.15rem, 2.4vw, 1.65rem)
            var(--apps-pad-inline-start);
        border-radius: var(--apps-radius);
        border: 1.5px solid color-mix(in srgb, #fff 72%, var(--apps-accent) 28%);
        background:
            linear-gradient(
                168deg,
                color-mix(in srgb, #fff 88%, var(--apps-accent-pastel)) 0%,
                color-mix(in srgb, var(--apps-accent-pastel) 55%, var(--bg-surface)) 38%,
                color-mix(in srgb, var(--apps-accent) 6%, var(--bg-surface)) 100%
            );
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
            0 14px 36px -18px var(--apps-accent-glow),
            0 4px 12px -6px color-mix(in srgb, var(--text-ink) 8%, transparent);
        isolation: isolate;
        overflow: visible;
        transition: box-shadow 0.32s var(--apps-ease);
    }

    .apps-card__surface::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
            155deg,
            color-mix(in srgb, #fff 42%, transparent) 0%,
            transparent 42%
        );
        pointer-events: none;
        z-index: 0;
    }

    .apps-card__surface::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(var(--apps-media-inset) - var(--apps-media-out) - var(--apps-pad-inline-end));
        width: var(--apps-media-size);
        height: var(--apps-media-size);
        border-radius: 50%;
        background: var(--apps-blob-bg);
        pointer-events: none;
        z-index: 0;
        transform: translateY(calc(-50% + clamp(2rem, 4vw, 3rem)));
        filter: blur(8px);
        -webkit-mask-image: var(--apps-blob-mask);
        mask-image: var(--apps-blob-mask);
    }

    .apps-card__heading,
    .apps-card__desc {
        position: relative;
        z-index: 1;
    }

    .apps-card:hover .apps-card__surface {
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
            0 20px 44px -16px var(--apps-accent-glow),
            0 6px 16px -8px color-mix(in srgb, var(--text-ink) 10%, transparent);
    }

    html[data-theme="dark"] .apps-card__surface {
        border-color: color-mix(in srgb, var(--apps-accent) 22%, var(--border-neutral));
        background:
            linear-gradient(
                168deg,
                color-mix(in srgb, var(--apps-accent) 12%, var(--bg-surface)) 0%,
                color-mix(in srgb, var(--apps-accent) 6%, var(--bg-surface)) 45%,
                color-mix(in srgb, var(--apps-accent) 3%, var(--bg-page)) 100%
            );
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
            0 14px 36px -18px color-mix(in srgb, var(--apps-accent) 25%, transparent),
            0 4px 12px -6px rgba(0, 0, 0, 0.35);
    }

    html[data-theme="dark"] .apps-card__surface::before {
        background: linear-gradient(
            155deg,
            color-mix(in srgb, #fff 8%, transparent) 0%,
            transparent 38%
        );
    }

    html[data-theme="dark"] .apps-card:hover .apps-card__surface {
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
            0 20px 44px -16px color-mix(in srgb, var(--apps-accent) 30%, transparent),
            0 6px 16px -8px rgba(0, 0, 0, 0.4);
    }

    .apps-card__actions {
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding-top: 0;
    }

    /* Tous les boutons : style outline (comme Windows .exe), taille réduite */
    .apps-card__actions .apps-btn {
        padding: 7px 15px;
        font-size: 0.84rem;
        gap: 5px;
        border-width: 1.5px;
        background: color-mix(in srgb, var(--apps-accent-pastel) 45%, var(--bg-surface));
        border-color: color-mix(in srgb, var(--apps-accent) 35%, var(--border-neutral));
        color: var(--apps-accent-deep) !important;
        box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset;
    }

    .apps-card__actions .apps-btn__icon svg {
        width: 14px;
        height: 14px;
    }

    .apps-card__actions .apps-btn__icon {
        color: var(--apps-accent);
    }

    .apps-card__actions .apps-btn:hover {
        background: color-mix(in srgb, var(--apps-accent-pastel) 65%, var(--bg-surface));
        border-color: color-mix(in srgb, var(--apps-accent) 50%, var(--border-neutral));
        transform: translateY(-1px);
    }

    .apps-card__actions .apps-btn:active {
        background: color-mix(in srgb, var(--apps-accent) 12%, var(--bg-surface));
        transform: translateY(0);
    }

    html[data-theme="dark"] .apps-card__actions .apps-btn {
        background: color-mix(in srgb, var(--apps-accent) 10%, var(--bg-surface));
        border-color: color-mix(in srgb, var(--apps-accent) 28%, var(--border-neutral));
        box-shadow: none;
    }

    html[data-theme="dark"] .apps-card__actions .apps-btn:hover {
        background: color-mix(in srgb, var(--apps-accent) 16%, var(--bg-surface));
    }

    /* CTA idle : premier bouton pulse au survol de la carte */
    .apps-card__actions .apps-btn:first-child {
        transform-origin: center center;
    }

    .apps-card:hover .apps-card__actions .apps-btn:first-child {
        animation: apps-btn-cta-pop 2.4s var(--apps-ease) infinite;
        z-index: 2;
    }

    .apps-card:hover .apps-card__actions .apps-btn:first-child:hover {
        animation: none;
        transform: translateY(-6px) scale(1.08);
        border-color: color-mix(in srgb, var(--apps-accent) 58%, var(--border-neutral));
        box-shadow:
            0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset,
            0 14px 28px -8px color-mix(in srgb, var(--apps-accent) 42%, transparent),
            0 6px 12px -5px color-mix(in srgb, var(--text-ink) 12%, transparent);
    }

    html[data-theme="dark"] .apps-card:hover .apps-card__actions .apps-btn:first-child {
        animation: apps-btn-cta-pop 2.4s var(--apps-ease) infinite;
    }

    html[data-theme="dark"] .apps-card:hover .apps-card__actions .apps-btn:first-child:hover {
        box-shadow:
            0 14px 28px -8px color-mix(in srgb, var(--apps-accent) 45%, transparent),
            0 6px 12px -5px rgba(0, 0, 0, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apps-card,
    .apps-btn,
    .apps-card__visual,
    .apps-card__img,
    .apps-card__surface {
        transition: none;
    }

    .apps-card:hover .apps-card__actions .apps-btn:first-child {
        animation: none;
    }

    .apps-card:hover {
        transform: none;
    }

    .apps-card:hover .apps-card__visual {
        transform: translateY(-50%);
    }

    .apps-card__img,
    .apps-card:hover .apps-card__img {
        transform: rotate(var(--apps-img-tilt));
    }
}