/* ═══════════════════════════════════════
   PAGE /cockpit-marketing/
   Curseurs design : VARIANCE 7 · MOTION 5 · DENSITY 3
   ═══════════════════════════════════════ */

/* ── Hero ── */
.ck-hero {
    position: relative;
    padding: calc(var(--space-2xl) + 2rem) 0 var(--space-lg);
    overflow: hidden;
}

.ck-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: center;
    position: relative;
    z-index: 2;
}
/* mobile : texte, puis vidéo, puis CTA centré */
.ck-hero-cta { display: flex; justify-content: center; }
@media (min-width: 900px) {
    .ck-hero-grid {
        grid-template-columns: 1fr 1.1fr;
        grid-template-areas:
            "copy video"
            "cta video";
        gap: 0 clamp(2.5rem, 4vw, 4rem);
        align-items: center;
    }
    .ck-hero-copy { grid-area: copy; align-self: end; }
    .ck-video { grid-area: video; }
    .ck-hero-cta { grid-area: cta; align-self: start; justify-content: flex-start; margin-top: 2.25rem; }
}

.ck-hero-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 1.25rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.15s forwards;
}
.ck-hero h1 {
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.3s forwards;
}
.ck-hero h1 em {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    color: var(--golden);
    font-size: 1.15em;
    white-space: nowrap;
}
.ck-hero-sub {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    color: var(--light-blue);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 2.25rem;
    opacity: 0;
    animation: fadeUp 0.8s 0.45s forwards;
}
.ck-hero-cta {
    opacity: 0;
    animation: fadeUp 0.8s 0.6s forwards;
}

/* Hublot vidéo */
.ck-video {
    position: relative;
    opacity: 0;
    animation: fadeUp 1s 0.5s forwards;
}
.ck-video-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(27, 73, 101, 0.45), rgba(13, 27, 42, 0.2) 70%),
        var(--midnight-light);
    border: 1px solid rgba(124, 152, 179, 0.14);
    overflow: hidden;
    transition: border-color 0.3s;
}
.ck-video:hover .ck-video-frame { border-color: rgba(249, 220, 92, 0.35); }
.ck-video-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    opacity: 0.5;
}
.ck-video .corner-plus { position: absolute; z-index: 3; width: 22px; height: 22px; color: rgba(249, 220, 92, 0.55); }
.ck-video .corner-plus.tl { top: -11px; left: -11px; }
.ck-video .corner-plus.tr { top: -11px; right: -11px; }
.ck-video .corner-plus.bl { bottom: -11px; left: -11px; }
.ck-video .corner-plus.br { bottom: -11px; right: -11px; }

.ck-play {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.ck-play-btn {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 220, 92, 0.12);
    border: 1px solid rgba(249, 220, 92, 0.5);
    box-shadow: 0 0 40px rgba(249, 220, 92, 0.18);
    transition: transform 0.3s, background 0.3s;
}
.ck-video:hover .ck-play-btn {
    transform: scale(1.08);
    background: rgba(249, 220, 92, 0.2);
}
.ck-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.ck-play-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--light-blue);
    letter-spacing: 0.02em;
}

/* Variante sans vidéo : l'illustration console en majesté */
.ck-hero-art { cursor: default; }
.ck-hero-art .ck-video-frame { aspect-ratio: 16 / 10; }
.ck-hero-art .ck-video-frame img {
    opacity: 1;
    padding: 4%;
}

/* Bande de preuve */
.ck-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin-top: var(--space-lg);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(124, 152, 179, 0.15);
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: fadeUp 0.8s 0.8s forwards;
}
.ck-proof span {
    font-size: 0.85rem;
    color: var(--soft-blue);
    font-weight: 500;
}
.ck-proof .dot-sep { color: rgba(124, 152, 179, 0.4); }

/* ── Citation parlée (bascule, transparence) ── */
.ck-quote-section {
    padding: clamp(6rem, 10vw, 9rem) 0;
}
.ck-quote {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 32px;
}
.ck-quote-text {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    line-height: 1.75;
    color: var(--light-blue);
}
.ck-quote-text::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--golden);
    line-height: 0.5;
    display: block;
    margin-bottom: 1rem;
}
.ck-quote-text strong { color: var(--off-white); font-weight: 700; }

/* Révélation mot à mot pilotée par le scroll */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ck-quote-text .w {
            display: inline-block;
            animation: ck-word-in linear both;
            animation-timeline: view();
            animation-range: cover calc(14% + var(--i) * 0.85%) cover calc(22% + var(--i) * 0.85%);
        }
    }
}
@keyframes ck-word-in {
    from { opacity: 0.12; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ── Preuves : scrollytelling ── */
.ck-proofs {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%);
}
.ck-proofs .section-title { text-align: center; margin: 0 auto var(--space-xl); }

.ck-proofs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 900px) {
    /* pas de align-items: start ici : la colonne du panneau doit s'étirer
       sur toute la hauteur de la grille pour que le sticky puisse voyager */
    .ck-proofs-grid { grid-template-columns: 1.35fr 1fr; gap: clamp(2.5rem, 4vw, 4.5rem); }
}

.ck-proofs-media {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) {
    .ck-proofs-media { gap: clamp(8rem, 14vw, 13rem); }
}
.ck-proof-item {
    position: relative;
    display: block;
    border: 1px solid rgba(124, 152, 179, 0.14);
    background: var(--midnight);
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.5s, border-color 0.3s, transform 0.5s;
    transform: scale(0.985);
}
.ck-proof-item.active {
    opacity: 1;
    transform: none;
    border-color: rgba(249, 220, 92, 0.35);
}
.ck-proof-item img {
    display: block;
    width: 100%;
    height: auto;
}
.ck-proof-item.ck-narrow { width: 88%; margin-left: auto; }
.ck-proof-item.ck-portrait { width: 52%; margin-left: auto; }

.ck-proof-hint {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--midnight);
    background: var(--golden);
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.ck-proof-item:hover .ck-proof-hint,
.ck-proof-item.active .ck-proof-hint { opacity: 1; transform: none; }

.ck-proofs-panel { display: none; }
@media (min-width: 900px) {
    .ck-proofs-panel { display: block; }
    .ck-panel {
        position: sticky;
        top: 110px;
        background: var(--midnight);
        border: 1px solid rgba(124, 152, 179, 0.12);
        padding: 2.25rem 2rem;
    }
    .ck-panel .corner-plus { position: absolute; width: 22px; height: 22px; color: rgba(249, 220, 92, 0.55); }
    .ck-panel .corner-plus.tl { top: -11px; left: -11px; }
    .ck-panel .corner-plus.br { bottom: -11px; right: -11px; }
    .ck-panel.swap .ck-panel-title,
    .ck-panel.swap .ck-panel-desc,
    .ck-panel.swap .ck-panel-time,
    .ck-panel.swap .ck-panel-cta {
        animation: ck-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .ck-panel.swap .ck-panel-desc { animation-delay: 0.05s; }
    .ck-panel.swap .ck-panel-time { animation-delay: 0.1s; }
    .ck-panel.swap .ck-panel-cta { animation-delay: 0.15s; }
}
@keyframes ck-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.ck-panel-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--off-white);
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}
.ck-panel-desc {
    font-size: 0.92rem;
    color: var(--soft-blue);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.ck-panel-time {
    font-size: 0.85rem;
    color: var(--light-blue);
    margin-bottom: 0.5rem;
}
.ck-panel-time em {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--golden);
    font-size: 1.5em;
    margin-left: 0.25rem;
}
.ck-panel-cta {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--golden);
}

/* Légendes mobiles : le panneau n'existe pas, l'info vit sous chaque média */
@media (max-width: 899px) {
    .ck-proof-item { opacity: 1; transform: none; }
    .ck-proof-item.ck-narrow, .ck-proof-item.ck-portrait { width: 100%; margin: 0; }
}

/* ── Visionneuse ── */
.ck-viewer {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(7, 14, 22, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
}
.ck-viewer.open { display: flex; }
.ck-viewer-stage {
    max-width: min(1100px, 88vw);
    max-height: 84vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ck-viewer-stage img,
.ck-viewer-stage video {
    max-width: 100%;
    max-height: 84vh;
    border: 1px solid rgba(124, 152, 179, 0.2);
}
.ck-viewer-close {
    position: absolute;
    top: 1.5rem;
    right: 1.75rem;
    background: none;
    border: none;
    color: var(--off-white);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.ck-viewer-close:hover { opacity: 1; }
.ck-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(249, 220, 92, 0.4);
    background: rgba(13, 27, 42, 0.6);
    color: var(--golden);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}
.ck-viewer-nav:hover { background: rgba(249, 220, 92, 0.15); }
.ck-viewer-nav.ck-prev { left: 2vw; }
.ck-viewer-nav.ck-next { right: 2vw; }
.ck-viewer-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: var(--soft-blue);
}

/* ── Comment ça marche : 6 étapes, point voyageur ── */
.ck-steps-wrap {
    /* timeline stable portée par le wrapper : le point et les cases s'y réfèrent */
    view-timeline-name: --cksteps;
    view-timeline-axis: block;
}
.ck-steps {
    padding: var(--space-2xl) 0;
    background: var(--midnight-light);
}
.ck-steps .section-title { text-align: center; margin: 0 auto var(--space-xl); }

/* L'ampoule : un point dédié clignote dans son verre, plus lumineux ;
   le point voyageur prend le relais par fondu croisé au départ */
.ck-bulb {
    width: 74px;
    margin: 0 auto 3.5rem;
    position: relative;
    z-index: 40; /* le trait du verre passe devant le point */
    pointer-events: none;
}
.ck-bulb img { display: block; width: 100%; height: auto; }
.ck-bulb-dot {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--golden);
    box-shadow:
        0 0 18px var(--golden),
        0 0 44px rgba(249, 220, 92, 0.85),
        0 0 90px rgba(249, 220, 92, 0.45);
    animation: ck-dot-blink 0.9s infinite alternate;
    z-index: -1; /* derrière le trait du verre */
}

.ck-steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-left: 1px solid rgba(124, 152, 179, 0.1);
    border-top: 1px solid rgba(124, 152, 179, 0.1);
}
@media (min-width: 768px) {
    .ck-steps-grid { grid-template-columns: repeat(3, 1fr); }
    /* rangée 2 inversée visuellement : le point circule en continu 1→6 */
    .ck-r2c1 { grid-row: 2; grid-column: 1; }
    .ck-r2c2 { grid-row: 2; grid-column: 2; }
    .ck-r2c3 { grid-row: 2; grid-column: 3; }
}

.ck-step {
    position: relative;
    background: var(--midnight);
    border-right: 1px solid rgba(124, 152, 179, 0.1);
    border-bottom: 1px solid rgba(124, 152, 179, 0.1);
    padding: clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
    min-height: 220px;
    overflow: visible; /* les croix d'angle dépassent des cases */
}
.ck-step-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--golden);
    line-height: 1;
    margin-bottom: 1rem;
}
.ck-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.ck-step p {
    font-size: 0.88rem;
    color: var(--soft-blue);
    line-height: 1.65;
}

/* halo doré : uniquement pendant le passage du point */
.ck-step::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(340px 340px at 50% 50%, rgba(249, 220, 92, 0.13), transparent 70%);
    opacity: 0;
    pointer-events: none;
}

/* Le point voyageur */
.ck-dot {
    display: none;
    position: absolute;
    z-index: 30; /* au-dessus des cases et de leurs croix */
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    pointer-events: none;
}
.ck-dot-core {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--golden);
    box-shadow: 0 0 14px var(--golden), 0 0 34px rgba(249, 220, 92, 0.5);
    animation: ck-dot-blink 0.9s infinite alternate;
}
@keyframes ck-dot-blink {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.45; transform: scale(0.8); }
}

/* Chorégraphie liée au scroll (navigateurs compatibles, desktop, motion ok).
   Repères sur la timeline de section : la case p est traversée
   autour de cover (25 + p×10)%. */
@supports (animation-timeline: view()) {
    @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
        /* Pin scrubbé : la section colle à l'écran pendant que le scroll
           fait avancer le point ; la plage contain = exactement la phase épinglée */
        .ck-steps-wrap { height: 300vh; }
        .ck-steps {
            position: sticky;
            top: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--space-lg) 0;
        }
        .ck-dot {
            display: block;
            animation: ck-dot-path linear both;
            animation-timeline: --cksteps;
            animation-range: contain 0% contain 100%;
        }
        .ck-bulb-dot { display: none; }
        /* une fois le point sorti du bulbe, la vue descend doucement pour
           que la rangée 4-6 soit pleinement lisible à son passage */
        .ck-steps .container {
            animation: ck-steps-pan linear both;
            animation-timeline: --cksteps;
            animation-range: contain 20% contain 100%;
        }
        /* halo renforcé tant que le point habite l'ampoule, puis normal */
        .ck-dot-core {
            animation: ck-dot-blink 0.9s infinite alternate, ck-dot-glow linear both;
            animation-timeline: auto, --cksteps;
            animation-range: normal, contain 10% contain 22%;
        }
        /* texte éteint avant le passage, normal après (réversible) */
        .ck-step .ck-step-num,
        .ck-step h3,
        .ck-step p {
            opacity: 0.3; /* état de base : éteint tant que le point n'est pas passé */
            animation: ck-step-text linear both;
            animation-timeline: --cksteps;
            animation-range: contain calc(20% + var(--p) * 11%) contain calc(24% + var(--p) * 11%);
        }
        /* halo allumé pendant l'arrêt magnétique du point */
        .ck-step::after {
            animation: ck-step-glow linear both;
            animation-timeline: --cksteps;
            animation-range: contain calc(20% + var(--p) * 11%) contain calc(28% + var(--p) * 11%);
        }
    }
}

/* Coordonnées relatives à la grille ; les valeurs négatives de top
   placent le point au-dessus (couture de section, puis gauche du titre) */
@keyframes ck-dot-path {
    0%     { left: var(--bulb-x, 50%); top: var(--bulb-y, -50%); }
    12%    { left: var(--bulb-x, 50%); top: var(--bulb-y, -50%); }
    16%    { left: var(--bulb-x, 50%); top: calc(var(--bulb-y, -50%) - 10%); }
    20%    { left: 16.66%;  top: 25%; }
    27%    { left: 16.66%;  top: 25%; }
    31%    { left: 50%;     top: 25%; }
    38%    { left: 50%;     top: 25%; }
    42%    { left: 83.33%;  top: 25%; }
    49%    { left: 83.33%;  top: 25%; }
    53%    { left: 83.33%;  top: 75%; }
    60%    { left: 83.33%;  top: 75%; }
    64%    { left: 50%;     top: 75%; }
    71%    { left: 50%;     top: 75%; }
    75%    { left: 16.66%;  top: 75%; }
    84%    { left: 16.66%;  top: 75%; opacity: 1; }
    96%    { left: -18%;    top: 75%; opacity: 1; }
    100%   { left: -18%;    top: 75%; opacity: 0; }
}
@keyframes ck-step-text {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}
@keyframes ck-step-glow {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes ck-dot-glow {
    from {
        box-shadow:
            0 0 18px var(--golden),
            0 0 44px rgba(249, 220, 92, 0.85),
            0 0 90px rgba(249, 220, 92, 0.45);
    }
    to {
        box-shadow: 0 0 14px var(--golden), 0 0 34px rgba(249, 220, 92, 0.5);
    }
}

@keyframes ck-steps-pan {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-240px); }
    80%  { transform: translateY(-240px); }
    100% { transform: translateY(-30px); }
}

/* ── CTA des étapes (dans la section épinglée) ── */
.ck-steps-btn {
    display: flex;
    justify-content: center;
    margin-top: 8rem;
}

/* ── Fonctionnalités : marquee pleine largeur ── */
.ck-features {
    padding: var(--space-2xl) 0 var(--space-lg);
    background: var(--midnight);
    overflow: hidden;
}
.ck-features .section-title { text-align: center; margin: 0 auto var(--space-xl); }

.ck-mq {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ck-mq-row {
    display: flex;
    overflow: hidden;
}
.ck-mq-track {
    display: flex;
    width: max-content;
    flex-shrink: 0;
}
.ck-mq-set {
    display: flex;
    gap: 12px;
    padding-right: 12px;
}
.ck-pill {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-blue);
    border: 1px solid rgba(124, 152, 179, 0.22);
    background: rgba(27, 73, 101, 0.12);
    border-radius: 100px;
    padding: 0.65rem 1.25rem;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    cursor: default;
}
.ck-pill.gold {
    color: var(--golden);
    border-color: rgba(249, 220, 92, 0.4);
}
.ck-pill:hover {
    background: var(--golden);
    color: var(--midnight);
    border-color: var(--golden);
}

.ck-features-more {
    text-align: center;
    margin-top: var(--space-lg);
    color: var(--soft-blue);
    font-size: 0.95rem;
}
.ck-features-more em {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--golden);
    font-size: 1.35em;
}

/* Défilement : uniquement si le mouvement est accepté */
@media (prefers-reduced-motion: no-preference) {
    .ck-mq-track { animation: ck-mq-scroll 55s linear infinite; }
    .ck-mq-reverse .ck-mq-track { animation-direction: reverse; animation-duration: 62s; }
    .ck-mq-row:nth-child(3) .ck-mq-track { animation-duration: 58s; }
    .ck-mq:hover .ck-mq-track { animation-play-state: paused; }
}
@keyframes ck-mq-scroll {
    to { transform: translateX(-50%); }
}
/* Sans mouvement : tout est visible, en lignes enveloppées */
@media (prefers-reduced-motion: reduce) {
    .ck-mq-track { width: auto; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
    .ck-mq-set[aria-hidden="true"] { display: none; }
    .ck-mq-set { flex-wrap: wrap; justify-content: center; padding: 0 24px; }
}

/* Le hublot est un bouton (lecteur direct, sans capture) */
button.ck-video {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* ── Transparence : portrait + citation (épinglée le temps de la lecture) ── */
.ck-trust-wrap {
    view-timeline-name: --cktrust;
    view-timeline-axis: block;
}
.ck-trust {
    padding: var(--space-2xl) 0;
    background: var(--midnight-light);
}
@supports (animation-timeline: view()) {
    @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
        .ck-trust-wrap {
            height: 200vh;
            /* le fond clair vit sur le wrapper : continuité pendant l'épinglage,
               et la section garde sa hauteur naturelle (pas de vide sous la signature) */
            background: var(--midnight-light);
        }
        .ck-trust {
            position: sticky;
            top: 0;
            padding: clamp(4rem, 9vh, 6rem) 0 var(--space-lg);
        }
        /* les mots se révèlent pendant l'épinglage, sur la timeline du wrapper */
        .ck-trust .ck-quote-text .w {
            animation-timeline: --cktrust;
            animation-range: contain calc(4% + var(--i) * 1.05%) contain calc(11% + var(--i) * 1.05%);
        }
    }
}
.ck-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 820px) {
    .ck-trust-grid { grid-template-columns: 0.65fr 1.35fr; gap: clamp(2.5rem, 4vw, 4rem); }
}
.ck-trust-portrait {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}
.ck-trust-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(124, 152, 179, 0.16);
}
.ck-trust-portrait .corner-plus { position: absolute; }
.ck-quote-left {
    text-align: left;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.ck-quote-left::before { margin-left: 0; text-align: left; }
.ck-trust-sign {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--soft-blue);
}

/* ── FAQ (styles repris de la home) ── */
.ck-faq {
    padding: var(--space-xl) 0;
    background: var(--midnight-light);
}
.faq-grid {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-items { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(124, 152, 179, 0.1); }
.faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--off-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.3s;
}
.faq-question:hover { color: var(--golden); }
.faq-question svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--soft-blue);
    transition: transform 0.3s, stroke 0.3s;
}
.faq-item.open .faq-question svg { transform: rotate(45deg); stroke: var(--golden); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer-inner {
    padding-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--soft-blue);
    line-height: 1.7;
}
.faq-answer-inner strong { color: var(--light-blue); }

/* ── CTA final : bloc diagnostic (repris de la home) ── */
.final-cta {
    text-align: center;
    padding: var(--space-2xl) 0;
    position: relative;
    overflow: hidden;
    background: var(--midnight);
}
.final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(249, 220, 92, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
.final-cta .container { position: relative; z-index: 2; }
.test-block {
    max-width: 640px;
    margin: 0 auto;
    background: var(--midnight);
    border: 1px solid rgba(124, 152, 179, 0.1);
    padding: clamp(2rem, 4vw, 3rem);
    text-align: left;
    position: relative;
}
.test-block .corner-plus { position: absolute; }
.test-block h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.test-block-kicker {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 0.75rem;
}
.test-block-sub {
    font-size: 0.88rem;
    color: var(--soft-blue);
    margin-bottom: var(--space-md);
}
.test-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
    padding: 0;
}
.test-list li {
    font-size: 0.88rem;
    color: var(--light-blue);
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.test-list li::before {
    content: '\2713';
    color: var(--golden);
    font-weight: 700;
    flex-shrink: 0;
}
.test-block .btn-primary { width: 100%; justify-content: center; }
.test-note {
    font-size: 0.75rem;
    color: var(--soft-blue);
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
}

/* ── Comment démarrer : les 3 paliers ── */
.ck-pricing {
    padding: var(--space-xl) 0;
    /* même progression que le haut de page : du midnight vers le bleu clair */
    background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%);
}
.ck-pricing .section-title { text-align: center; margin: 0 auto var(--space-xl); }

.ck-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .ck-pricing-grid { grid-template-columns: 1fr 1.08fr 1fr; gap: 0 22px; }
}

.ck-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--midnight);
    border: 1px solid rgba(124, 152, 179, 0.14);
    padding: clamp(1.75rem, 2.5vw, 2.5rem);
    overflow: visible;
}
.ck-price-card .corner-plus { position: absolute; }

.ck-price-featured {
    border-color: rgba(249, 220, 92, 0.4);
    box-shadow: 0 0 60px rgba(249, 220, 92, 0.07);
}
@media (min-width: 900px) {
    .ck-price-featured { transform: translateY(-16px); padding-bottom: calc(clamp(1.75rem, 2.5vw, 2.5rem) + 16px); }
}
.ck-price-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--midnight);
    background: var(--golden);
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    white-space: nowrap;
}

.ck-price-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--golden);
    margin-bottom: 1rem;
}
.ck-price-amount {
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--off-white);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.ck-price-amount small {
    font-size: 0.45em;
    font-weight: 600;
    color: var(--soft-blue);
    letter-spacing: 0;
}
.ck-price-from {
    display: block;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.3rem;
}
.ck-price-note {
    font-size: 0.78rem;
    color: var(--soft-blue);
    margin-bottom: 1.25rem;
}
.ck-price-desc {
    font-size: 0.9rem;
    color: var(--light-blue);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.ck-price-list {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.ck-price-list li {
    font-size: 0.85rem;
    color: var(--soft-blue);
    line-height: 1.5;
    padding-left: 1.2rem;
    position: relative;
}
.ck-price-list li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--golden);
    font-weight: 700;
}
.ck-price-btn {
    margin-top: auto;
    text-align: center;
    justify-content: center;
}

.ck-pricing-asso {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: 0.9rem;
    color: var(--soft-blue);
}
.ck-pricing-asso a {
    color: var(--golden);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Ajustements responsive ── */
@media (max-width: 767px) {
    .ck-steps-btn { margin-top: 3rem; }
    .ck-more-2 { display: block; margin-top: 0.3rem; }
}