/* ═══════════════════════════════════════
   PAGE ATELIER — page de vente d'un atelier du Cockpit (modèle : /cockpit-marketing/ateliers/cerveau-de-marque/)
   Repose sur les composants du site : charger main.css, home.css (logos, témoignages, réassurance, faq),
   demarrer.css (formulaires, pied de page), cockpit-page.css (héros, visionneuse, CTA final) et
   offer-cards.css (cartes d'offre) avant cette feuille.
   Elle n'ajoute que le propre d'une page atelier : barre du haut avec bouton, scène produit du héros,
   bande de chiffres, grilles bordées problème et méthode (mini interfaces), mosaïque de réalisations,
   programme à onglets, offre dominante avec formulaire d'ouverture, bascule vente / préinscription.
   Angles nets, croix corner-plus, un seul accent doré par écran.
   ═══════════════════════════════════════ */

:root { --ap-line: rgba(124, 152, 179, 0.12); }

/* ── bascule vente / préinscription (posée par le script selon LIEN_PAIEMENT) ── */
html[data-mode="attente"] [data-si="vente"],
html[data-mode="vente"] [data-si="attente"] { display: none !important; }

/* ── HÉROS ── */
.ap-hero { padding-top: calc(var(--space-2xl) - 1.5rem); }
.ap-hero-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center; position: relative; z-index: 2; }
@media (min-width: 900px) { .ap-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(3rem, 5vw, 5.5rem); } }
.ck-hero.ap-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1.04; }
.ap-hero .ck-hero-sub { max-width: 460px; margin-bottom: 2.2rem; }
.ap-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.8rem; opacity: 0; animation: fadeUp 0.8s 0.6s forwards; }
.ap-hero-actions .btn-secondary { padding: 0.6rem 0; }

/* preuve sociale sous le CTA : visages réels + marques */
.ap-social { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.8rem; opacity: 0; animation: fadeUp 0.8s 0.75s forwards; }
.ap-avatars { display: flex; }
.ap-avatars img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--midnight); box-shadow: 0 0 0 1px rgba(249, 220, 92, 0.35); }
.ap-avatars img + img { margin-left: -10px; }
.ap-social p { font-size: 0.82rem; line-height: 1.45; color: var(--soft-blue); max-width: 30ch; }
.ap-social p b { color: var(--off-white); font-weight: 700; }

/* scène produit : les slides des modules, une réalisation client, le contrôle de marque */
.ap-scene { position: relative; margin: 1.5rem 1.8rem 5.5rem 0; opacity: 0; animation: fadeUp 1s 0.5s forwards; }
.ap-scene > .corner-plus { z-index: 4; }
.ap-thumb-wrap .dm-thumb { box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.ap-float { position: absolute; z-index: 3; margin: 0; }
.ap-float-check { width: 50%; max-width: 270px; left: -7%; bottom: -30%; padding: 1rem 1.1rem 0.9rem; background: rgba(13, 27, 42, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(249, 220, 92, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.ap-check-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; color: var(--off-white); margin-bottom: 0.65rem; }
.ap-check-title svg { width: 16px; height: 16px; stroke: var(--golden); flex: none; }
.ap-float-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.38rem; }
.ap-float-check li { position: relative; padding-left: 1.25rem; font-size: 0.76rem; color: var(--light-blue); line-height: 1.35; }
.ap-float-check li::before { content: '\2713'; position: absolute; left: 0; color: var(--golden); font-weight: 700; }
.ap-check-foot { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid var(--ap-line); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--golden); }
@keyframes apFlotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.ap-float-check { animation: apFlotte 7s ease-in-out 2.2s infinite; }

/* bande de chiffres : ce que contient l'atelier */
.ap-facts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(4.5rem, 8vw, 6.5rem); border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); }
.ap-fact { display: flex; align-items: center; gap: 1rem; padding: 1.7rem 1.4rem; border-right: 1px solid var(--ap-line); }
.ap-fact:last-of-type { border-right: none; }
.ap-fact b { font-family: var(--font-display); font-weight: 400; color: var(--golden); font-size: clamp(2.3rem, 3.3vw, 2.9rem); line-height: 1; white-space: nowrap; }
.ap-fact span { font-size: 0.86rem; color: var(--light-blue); line-height: 1.45; max-width: 17ch; }
/* ── titres et chapeaux des sections propres à la page ── */
.ap-probleme .section-title, .ap-methode .section-title, .ap-work .section-title, .ap-programme .section-title, .ap-libre .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.ap-lead { font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--light-blue); line-height: 1.7; max-width: 620px; margin-bottom: var(--space-lg); }

/* ── LE PROBLÈME : texte épinglé à gauche, 7 exemples réels de contenus « moyens » qui défilent à droite ── */
.ap-probleme { position: relative; padding: var(--space-xl) 0; overflow-x: clip; background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 12%, var(--midnight-light) 88%, var(--midnight) 100%); }
.ap-probleme::before { content: ''; position: absolute; width: 760px; height: 760px; left: -260px; top: 20%; background: radial-gradient(circle, rgba(249, 220, 92, 0.06) 0%, transparent 62%); pointer-events: none; }
.ap-pb-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ap-pb-gauche { position: sticky; top: 7.5rem; }
.ap-pb-gauche .ap-lead { margin-bottom: 0; }
.ap-pb-nav { list-style: none; margin: 2.4rem 0 0; padding: 0 0 0 1.4rem; border-left: 1px solid rgba(124, 152, 179, 0.22); display: grid; gap: 0.3rem; }
.ap-pb-nav li { position: relative; padding: 0.55rem 0; transition: opacity 0.3s; opacity: 0.55; }
.ap-pb-nav li::before { content: ''; position: absolute; left: calc(-1.4rem - 5px); top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--midnight-light); border: 1px solid rgba(124, 152, 179, 0.5); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.ap-pb-nav li.on { opacity: 1; }
.ap-pb-nav li.on::before { background: var(--golden); border-color: var(--golden); box-shadow: 0 0 14px rgba(249, 220, 92, 0.6); }
.ap-pb-nav b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--off-white); }
.ap-pb-nav span { font-size: 0.8rem; color: var(--soft-blue); }
.ap-pb-droite { display: flex; flex-direction: column; gap: 2.8rem; padding: 1rem 0 2rem; }
.ap-tic { position: relative; padding: 1.6rem 1.6rem 1.7rem; background: var(--midnight); border: 1px solid rgba(124, 152, 179, 0.16); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3); }
.ap-tic > .ap-tic-titre { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--off-white); margin-bottom: 1rem; }
.ap-tic-demo { position: relative; margin: 1.4rem 0 1.1rem; }
.ap-tampon { position: absolute; right: 0.8rem; top: -1rem; z-index: 2; padding: 0.35rem 0.7rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--golden); background: rgba(13, 27, 42, 0.9); border: 2px solid var(--golden); transform: rotate(-8deg) scale(1.8); opacity: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s, opacity 0.25s 0.35s; }
.ap-tic.in .ap-tampon { transform: rotate(-8deg) scale(1); opacity: 1; }
.ap-tic > .ap-tic-pourquoi { font-size: 0.92rem; color: var(--soft-blue); line-height: 1.6; }
.ap-tic > .ap-tic-remede { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ap-line); font-size: 0.92rem; color: var(--light-blue); line-height: 1.55; }
.ap-tic-remede b { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--golden); }
/* les maquettes : un traitement de texte, un post, deux interfaces violettes, une photo de banque d'images */
.ap-doc { padding: 1.3rem 1.4rem; background: #F7F7F5; color: #23272C; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.65; }
.ap-doc mark, .ap-post mark { background: rgba(229, 72, 77, 0.1); color: inherit; text-decoration: underline wavy #E5484D; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ap-doc-gros p { font-family: Arial, Helvetica, sans-serif; font-size: 1.55rem; font-weight: 700; line-height: 1.35; }
.ap-post { padding: 1rem 1.15rem 1.1rem; background: #FFFFFF; color: #1D2226; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; font-size: 0.94rem; line-height: 1.5; border-radius: 8px; }
.ap-post p { margin: 0 0 0.35rem; }
.ap-post-tete { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem !important; }
.ap-post-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #C9D1DB, #8D99A8); flex: none; }
.ap-post-tete b { display: block; font-size: 0.9rem; }
.ap-post-tete small { display: block; font-size: 0.76rem; color: #666; }
.ap-post mark:has(.ap-emo) { text-decoration: none; padding: 0.05rem 0.1rem; border-radius: 4px; }
.ap-emo { width: 18px; height: 18px; vertical-align: -3px; }
.ap-slop { overflow: hidden; border-radius: 14px; font-family: Inter, system-ui, -apple-system, sans-serif; }
.ap-slop-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding: 1rem; background: #F5F3FF; }
.ap-slop-cartes > div { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem 0.8rem; background: #FFFFFF; border-radius: 12px; border-left: 4px solid #7C3AED; box-shadow: 0 6px 18px rgba(124, 58, 237, 0.14); }
.ap-slop-cartes > div:nth-child(2) { border-left-color: #6366F1; }
.ap-slop-cartes > div:nth-child(3) { border-left-color: #A855F7; }
.ap-slop-cartes i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #7C3AED, #6366F1); }
.ap-slop-cartes b { font-size: 0.84rem; font-weight: 700; color: #1E1B4B; }
.ap-slop-cartes span { height: 6px; border-radius: 3px; background: #E4E1F5; }
.ap-slop-cartes span + span { width: 70%; }
.ap-slop-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.8rem 1.2rem 1.5rem; text-align: center; color: #FFFFFF; background: radial-gradient(ellipse at 50% 0%, #7C3AED 0%, #312E81 48%, #0F0B2E 100%); }
.ap-slop-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; font-size: 0.72rem; font-weight: 600; border-radius: 100px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); }
.ap-slop-badge svg { width: 12px; height: 12px; color: #C4B5FD; }
.ap-slop-hero b { max-width: 20ch; font-size: 1.3rem; font-weight: 800; line-height: 1.2; background: linear-gradient(90deg, #FFFFFF, #C4B5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-slop-sous { width: 68%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.ap-slop-btns { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.ap-slop-btns i { width: 88px; height: 30px; border-radius: 9px; background: linear-gradient(90deg, #8B5CF6, #6366F1); box-shadow: 0 0 24px rgba(139, 92, 246, 0.55); }
.ap-slop-btns i + i { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: none; }
.ap-stock { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; color: rgba(255, 255, 255, 0.92); background: linear-gradient(135deg, #A9BCD0 0%, #6584A8 55%, #3F5F86 100%); }
.ap-stock-mains svg { width: 150px; height: auto; }
.ap-stock-filigrane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; transform: rotate(-22deg); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.26); }
.ap-stock small { position: absolute; left: 0.7rem; bottom: 0.55rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); }

/* chapitres de la colonne de droite, verbatim et chiffre de confiance */
.ap-pb-chap, .ap-pb-chap-stat > p:first-child { display: flex; align-items: center; gap: 0.9rem; margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--golden); }
.ap-pb-chap::after, .ap-pb-chap-stat > p:first-child::after { content: ''; flex: 1; height: 1px; background: rgba(249, 220, 92, 0.3); }
.ap-pb-chap-stat { display: block; margin-top: 1.5rem; }
.ap-pb-chap-stat::after { display: none; }
.ap-pb-stat { margin-top: 1.1rem; padding: 1.4rem 1.5rem; border: 1px solid rgba(249, 220, 92, 0.3); background: linear-gradient(160deg, rgba(249, 220, 92, 0.08), rgba(249, 220, 92, 0.01) 70%), var(--midnight); }
.ap-pb-stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--golden); }
.ap-pb-stat span { display: block; margin-top: 0.5rem; font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: var(--off-white); }
.ap-pb-stat small { display: block; margin-top: 0.7rem; font-size: 0.74rem; color: var(--soft-blue); }
.ap-tic > .ap-tic-verbatim { margin: -0.4rem 0 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; color: var(--golden); }
.ap-tic-verbatim .gq { font-family: var(--font-body); font-weight: 500; font-size: 0.8em; }
/* maquettes du vécu : historique de brouillons, conversation qui se répète, nuancier, trois versions */
.ap-fichiers { padding: 0.9rem 1rem 1rem; background: #F4F5F7; color: #1F2328; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; border-radius: 8px; }
.ap-fichiers-tete { margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6B7280; }
.ap-fichiers ul { list-style: none; margin: 0; padding: 0; }
.ap-fichiers li { display: flex; align-items: center; gap: 0.6rem; padding: 0.34rem 0.45rem; font-size: 0.9rem; border-radius: 5px; }
.ap-fichiers li::before { content: ''; flex: none; width: 13px; height: 16px; border-radius: 2px; background: #2B579A; }
.ap-fichiers li.x { color: #9AA1A9; text-decoration: line-through; }
.ap-fichiers li.x::before { opacity: 0.45; }
.ap-fichiers li.ici { background: #DCE8FB; font-weight: 700; }
.ap-chat { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem; background: #F2F1EC; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; border-radius: 10px; }
.ap-chat p { align-self: flex-end; max-width: 88%; padding: 0.55rem 0.8rem; font-size: 0.9rem; line-height: 1.4; color: #222; background: #FFFFFF; border: 1px solid #E3E1DA; border-radius: 14px 14px 4px 14px; }
.ap-chat p:nth-child(1) { opacity: 0.5; } .ap-chat p:nth-child(2) { opacity: 0.72; }
.ap-chat small { display: block; margin-bottom: 0.15rem; font-size: 0.68rem; color: #8A8780; }
.ap-nuancier { padding: 1rem 1.1rem; background: #F7F7F5; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; border-radius: 8px; }
.ap-nuancier > div { display: flex; align-items: center; gap: 0.5rem; }
.ap-nuancier > div + div { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed #D6D6D2; }
.ap-nuancier p { flex: none; width: 9.5rem; font-size: 0.82rem; font-weight: 700; color: #3A3F45; }
.ap-nuancier > div + div p { color: #B42318; }
.ap-nuancier span { width: 44px; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.ap-equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0.9rem; background: #F7F7F5; border-radius: 8px; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; }
.ap-equipe > div { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem; background: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.ap-equipe b { font-size: 0.72rem; font-weight: 700; color: #444; }
.ap-equipe span { height: 6px; border-radius: 3px; background: #E3E3E3; }
.ap-equipe .t1 { height: 10px; width: 80%; background: #1E5AA8; } .ap-equipe .t2 { height: 10px; width: 62%; background: #E4572E; } .ap-equipe .t3 { height: 10px; width: 90%; background: #2E9E6A; }
.ap-equipe .c1, .ap-equipe .c2, .ap-equipe .c3 { height: 38px; border-radius: 5px; }
.ap-equipe .c1 { background: linear-gradient(135deg, #1E5AA8, #38BDF8); } .ap-equipe .c2 { background: linear-gradient(135deg, #E4572E, #F3A712); } .ap-equipe .c3 { background: linear-gradient(135deg, #2E9E6A, #A3E635); }

/* ── LA MÉTHODE : fond quadrillé, 3 temps en escalier accrochés à un rail doré qui se trace ── */
.ap-methode { position: relative; padding: var(--space-xl) 0; background-image: linear-gradient(rgba(124, 152, 179, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 152, 179, 0.045) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; }
.ap-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; padding-top: 2.4rem; }
.ap-steps-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(124, 152, 179, 0.16); }
.ap-steps-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--golden), rgba(249, 220, 92, 0.35)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.ap-methode.in .ap-steps-line::after { transform: scaleX(1); }
.ap-step { --chute: 2.4rem; position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.7rem 2rem; background: var(--midnight); border: 1px solid rgba(124, 152, 179, 0.16); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3); }
.ap-step:nth-of-type(2) { margin-top: 56px; --chute: calc(2.4rem + 56px); }
.ap-step:nth-of-type(3) { margin-top: 112px; --chute: calc(2.4rem + 112px); }
.ap-step::before { content: ''; position: absolute; left: 2.2rem; top: calc(-1 * var(--chute)); height: var(--chute); border-left: 1px dashed rgba(249, 220, 92, 0.45); }
.ap-step::after { content: ''; position: absolute; left: calc(2.2rem - 6px); top: calc(-1 * var(--chute) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--golden); box-shadow: 0 0 18px rgba(249, 220, 92, 0.6); transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ap-methode.in .ap-step::after { transform: scale(1); }
.ap-methode.in .ap-step:nth-of-type(1)::after { transition-delay: 0.3s; }
.ap-methode.in .ap-step:nth-of-type(2)::after { transition-delay: 1s; }
.ap-methode.in .ap-step:nth-of-type(3)::after { transition-delay: 1.7s; }
.ap-step > p { font-size: 0.92rem; color: var(--soft-blue); line-height: 1.6; }
.ap-ui { position: relative; height: 200px; margin-bottom: 1.7rem; padding: 1rem 1.1rem; overflow: hidden; background: rgba(8, 18, 29, 0.75); border: 1px solid rgba(124, 152, 179, 0.16); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.74rem; color: var(--light-blue); }
.ap-ui-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; color: var(--off-white); font-weight: 600; }
.ap-ui-head::before { content: ''; width: 13px; height: 10px; border: 1.5px solid var(--golden); border-radius: 2px; }
.ap-files { list-style: none; margin: 0 0 0 0.35rem; padding: 0 0 0 1rem; border-left: 1px solid rgba(124, 152, 179, 0.25); display: grid; gap: 0.42rem; }
.ap-files li { position: relative; }
.ap-files li::before { content: ''; position: absolute; left: -1rem; top: 50%; width: 0.7rem; border-top: 1px solid rgba(124, 152, 179, 0.25); }
.ap-files li:first-child { color: var(--golden); }
.ap-ui-task { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--ap-line); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--off-white); }
.ap-ui-task span { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--midnight); background: var(--golden); padding: 0.22rem 0.55rem; border-radius: 100px; }
.ap-ui-sub { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft-blue); margin-bottom: 0.55rem; }
.ap-reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ap-reads li { display: flex; align-items: center; gap: 0.55rem; }
.ap-reads li::before { content: '\2713'; color: var(--golden); font-family: var(--font-body); font-weight: 700; }
.ap-term p { margin: 0 0 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-term i { font-style: normal; color: var(--golden); }
.ap-term-cmd { color: var(--off-white); margin-bottom: 0.8rem !important; }
.ap-term-cmd::before { content: '$ '; color: var(--golden); }
.ap-term-end { margin-top: 0.75rem !important; padding-top: 0.6rem; border-top: 1px solid var(--ap-line); color: var(--off-white); }
/* les lignes s'écrivent quand la carte entre à l'écran */
.ap-methode .ap-files li, .ap-methode .ap-reads li, .ap-methode .ap-term p { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s, transform 0.4s; }
.ap-methode .visible .ap-files li, .ap-methode .visible .ap-reads li, .ap-methode .visible .ap-term p { opacity: 1; transform: none; }
.ap-methode .visible li:nth-child(2), .ap-methode .visible .ap-term p:nth-child(2) { transition-delay: 0.45s; }
.ap-methode .visible li:nth-child(3), .ap-methode .visible .ap-term p:nth-child(3) { transition-delay: 0.6s; }
.ap-methode .visible li:nth-child(4), .ap-methode .visible .ap-term p:nth-child(4) { transition-delay: 0.75s; }
.ap-methode .visible li:nth-child(5), .ap-methode .visible .ap-term p:nth-child(5) { transition-delay: 0.9s; }
.ap-methode .visible li:nth-child(6) { transition-delay: 1.05s; }
.ap-methode .visible li:first-child, .ap-methode .visible .ap-term p:first-child { transition-delay: 0.3s; }
.ap-step-num { font-family: var(--font-display); font-size: 2.5rem !important; line-height: 1 !important; color: var(--golden) !important; margin-bottom: 0.35rem; }
.ap-steps h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; }

/* ── LIBERTÉ : le dossier au centre, les agents interchangeables ── */
.ap-libre { position: relative; padding: var(--space-lg) 0 var(--space-xl); }
.ap-libre::after { content: ''; position: absolute; width: 700px; height: 700px; right: -240px; top: 10%; background: radial-gradient(circle, rgba(27, 73, 101, 0.35) 0%, transparent 65%); pointer-events: none; z-index: -1; }
.ap-libre-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.ap-libre-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-line); }
.ap-libre-points li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--ap-line); }
.ap-libre-points b { font-size: 0.98rem; font-weight: 800; color: var(--off-white); }
.ap-libre-points span { font-size: 0.92rem; color: var(--soft-blue); line-height: 1.6; }
.ap-libre-schema { display: grid; grid-template-columns: minmax(0, 1.1fr) 3.5rem minmax(0, 0.9fr); align-items: center; }
.ap-libre-dossier { position: relative; padding: 1.3rem 1.3rem 1.4rem; background: rgba(8, 18, 29, 0.75); border: 1px solid rgba(249, 220, 92, 0.35); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--light-blue); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.ap-libre-dossier .ap-files li:nth-child(2) { color: var(--golden); }
.ap-libre-fils { position: relative; height: 72%; display: flex; flex-direction: column; justify-content: space-between; }
.ap-libre-fils span { display: block; height: 1px; background: linear-gradient(90deg, rgba(249, 220, 92, 0.6), rgba(124, 152, 179, 0.35)); }
.ap-libre-fils span:nth-child(1) { transform: rotate(-14deg); transform-origin: left; }
.ap-libre-fils span:nth-child(3) { transform: rotate(14deg); transform-origin: left; }
.ap-libre-agents { display: flex; flex-direction: column; gap: 0.9rem; }
.ap-libre-agents p { display: flex; flex-direction: column; padding: 0.85rem 1rem; border: 1px solid rgba(124, 152, 179, 0.22); background: var(--midnight); }
.ap-libre-agents b { font-size: 0.95rem; font-weight: 800; color: var(--off-white); }
.ap-libre-agents small { font-size: 0.74rem; color: var(--soft-blue); margin-top: 0.15rem; }
.ap-libre-agents p.on { border-color: rgba(249, 220, 92, 0.55); box-shadow: 0 0 40px rgba(249, 220, 92, 0.1); }
.ap-libre-agents p.on small { color: var(--golden); }
.ap-libre-agents p.next { border-style: dashed; }
.ap-libre-agents p.next b { color: var(--light-blue); }
.ap-libre-agents p { transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s; }
.ap-libre-agents p.on { transform: translateX(-6px); }
.ap-libre-agents p.on b { color: var(--off-white); }
.ap-libre-fils span { transition: background 0.4s, box-shadow 0.4s; }
.ap-libre-fils span.lit { background: var(--golden); box-shadow: 0 0 12px rgba(249, 220, 92, 0.7); }
.ap-inverse .ap-libre-schema { order: -1; }


/* ── CE QUE VOUS PRODUIREZ : composant ck-mq de la page Cockpit, titre centré ── */
.ap-produirez { padding: var(--space-lg) 0 var(--space-lg); background: transparent; }
.ap-produirez .section-title { text-align: center; margin: 0 auto var(--space-sm); max-width: 1000px; }
.ap-lead-centre { margin: 0 auto var(--space-sm); text-align: center; }

/* ── PLAN INCLINÉ : de vraies productions défilent sur un plan en perspective, le cerveau de marque au centre ── */
.p3d { --k: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: clamp(640px, 58vw, 860px); padding: 150px 24px; margin: 0 0 var(--space-md); overflow: hidden; isolation: isolate; }
.p3d-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.38) 16%, rgba(0, 0, 0, 0.72) 25%, #000 34%, #000 66%, rgba(0, 0, 0, 0.72) 75%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.12) 92%, transparent 100%), linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.5) 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.38) 16%, rgba(0, 0, 0, 0.72) 25%, #000 34%, #000 66%, rgba(0, 0, 0, 0.72) 75%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.12) 92%, transparent 100%), linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.5) 94%, transparent 100%);
    mask-composite: intersect; }
.p3d.in .p3d-scene { opacity: 1; }
.p3d-plan { --col: 320px; --gap: 20px; position: absolute; left: 50%; top: 50%; display: flex; gap: var(--gap); width: calc(var(--col) * 6 + var(--gap) * 5); height: calc(var(--col) * 6 + var(--gap) * 5); transform: translate(-50%, -50%) scale(calc(var(--k) * 1.06)) perspective(2600px) rotateX(50deg) rotateZ(-36deg); transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1); }
.p3d.in .p3d-plan { transform: translate(-50%, -50%) scale(var(--k)) perspective(2600px) rotateX(50deg) rotateZ(-36deg); }
.p3d-col { flex: 0 0 var(--col); min-width: 0; }
.p3d-piste { display: flex; flex-direction: column; gap: var(--gap); animation: p3dPiste var(--v, 70s) linear var(--dl, 0s) infinite; animation-play-state: paused; will-change: transform; }
.p3d.vu .p3d-piste { animation-play-state: running; }
.p3d-col:nth-child(even) .p3d-piste { animation-direction: reverse; }
.p3d-set { display: flex; flex-direction: column; gap: var(--gap); }
.p3d-t { position: relative; margin: 0; background: var(--midnight-light); border: 1px solid rgba(124, 152, 179, 0.22); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.5); }
.p3d-t img, .p3d-t video { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; object-position: top; }
.p3d-t figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: baseline; gap: 8px; padding: 6px 11px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--light-blue); background: rgba(13, 27, 42, 0.9); border: 1px solid rgba(124, 152, 179, 0.28); white-space: nowrap; }
.p3d-t figcaption b { font-size: 13px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--golden); }
/* voile : le centre s'assombrit pour que la carte se lise, les bords restent vivants */
.p3d::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 46% 56% at 50% 50%, rgba(13, 27, 42, 0.9) 0%, rgba(13, 27, 42, 0.6) 58%, rgba(13, 27, 42, 0.14) 100%); }
.p3d-demo { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: min(920px, 100%); background: linear-gradient(160deg, rgba(27, 73, 101, 0.62), rgba(13, 27, 42, 0.96) 58%); border: 1px solid rgba(249, 220, 92, 0.45); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 100px rgba(249, 220, 92, 0.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 0.8s ease 0.4s, transform 1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s; }
.p3d.in .p3d-demo { opacity: 1; transform: none; }
.p3d-demo-g { min-width: 0; display: flex; flex-direction: column; padding: 1.5rem 1.6rem 1.6rem; }
.p3d-barre { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.3rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(124, 152, 179, 0.16); font-size: 0.82rem; font-weight: 700; color: var(--light-blue); }
.p3d-barre i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #5BD69A; box-shadow: 0 0 0 0 rgba(91, 214, 154, 0.6); animation: p3dPouls 2s ease-out infinite; }
.p3d-dossier { position: relative; flex: 0 0 auto; width: 18px; height: 13px; margin-top: 4px; border: 2px solid var(--golden); border-radius: 2px; }
.p3d-dossier::before { content: ''; position: absolute; left: -2px; top: -6px; width: 9px; height: 4px; border: 2px solid var(--golden); border-bottom: none; border-radius: 2px 2px 0 0; }
.p3d-lbl { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft-blue); }
.p3d-demande { min-height: 4.4em; margin: 0 0 1.4rem; padding: 0.85rem 1rem; font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--off-white); background: rgba(8, 18, 29, 0.7); border: 1px solid rgba(124, 152, 179, 0.22); }
.p3d-curseur { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--golden); animation: p3dCurseur 1s steps(1) infinite; }
.p3d-formats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.p3d-f { position: relative; overflow: hidden; min-height: 36px; white-space: nowrap; padding: 0.4rem 0.8rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--light-blue); background: transparent; border: 1px solid rgba(124, 152, 179, 0.28); border-radius: 100px; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s; }
.p3d-f:hover { color: var(--off-white); border-color: rgba(249, 220, 92, 0.5); }
.p3d-f.on { color: var(--midnight); background: var(--golden); border-color: var(--golden); }
.p3d-f.on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(13, 27, 42, 0.45); transform-origin: left; animation: p3dTemps var(--duree, 5s) linear forwards; }
.p3d-demo.pause .p3d-f.on::after { animation-play-state: paused; }
.p3d-rendu { position: relative; min-width: 0; display: flex; flex-direction: column; margin: 0; padding: 1.2rem; background: rgba(8, 18, 29, 0.55); border-left: 1px solid rgba(124, 152, 179, 0.16); }
.p3d-rendu-media { position: relative; flex: 1; min-height: 340px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(27, 73, 101, 0.5), transparent 70%); }
.p3d-rendu-media img, .p3d-rendu-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease; }
.p3d-rendu-media .long { object-fit: cover; object-position: top; animation: p3dDefile 9s ease-in-out 0.6s infinite alternate; }
.p3d-rendu.attente .p3d-rendu-media > * { opacity: 0.55; transform: scale(0.97); filter: blur(9px) saturate(0.7); }
.p3d-rendu.nouveau .p3d-rendu-media > * { opacity: 0; transition: none; }
.p3d-rendu figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.9rem; font-size: 0.9rem; color: var(--off-white); transition: opacity 0.4s; }
.p3d-rendu.attente figcaption, .p3d-rendu.nouveau figcaption { opacity: 0.25; }
.p3d-rendu figcaption small { font-size: 0.8rem; color: var(--soft-blue); }
.p3d-ok { position: relative; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--golden); }
.p3d-ok::after { content: ''; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid var(--midnight); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes p3dPiste { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
@keyframes p3dPouls { 70% { box-shadow: 0 0 0 7px rgba(91, 214, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 214, 154, 0); } }
@keyframes p3dCurseur { 50% { opacity: 0; } }
@keyframes p3dTemps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes p3dDefile { 0%, 12% { object-position: 50% 0; } 88%, 100% { object-position: 50% 100%; } }
@media (min-width: 1600px) { .p3d { --k: 1.15; } }
@media (max-width: 1100px) { .p3d { --k: 0.8; } }
@media (max-width: 760px) {
    .p3d-demo { grid-template-columns: minmax(0, 1fr); }
    .p3d-rendu { border-left: none; border-top: 1px solid rgba(124, 152, 179, 0.16); }
    .p3d-rendu-media { min-height: 260px; }
}
@media (max-width: 640px) {
    .p3d { --k: 0.52; padding: 110px 16px; }
    .p3d-t figcaption { display: none; }
    .p3d::before { background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(13, 27, 42, 0.9) 0%, rgba(13, 27, 42, 0.6) 65%, rgba(13, 27, 42, 0.2) 100%); }
    .p3d-demo-g { padding: 1.2rem 1.1rem 1.2rem; }
    .p3d-demande { font-size: 0.98rem; min-height: 4.2em; }
    .p3d-formats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1.1rem; padding: 0 1.1rem 0.3rem; scrollbar-width: none; }
    .p3d-formats::-webkit-scrollbar { display: none; }
    .p3d-f { flex: 0 0 auto; min-height: 40px; }
    .p3d-rendu { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .p3d-piste, .p3d-barre i, .p3d-curseur, .p3d-rendu-media .long { animation: none; }
    .p3d-scene, .p3d-plan, .p3d-demo { transition: none; }
}

/* ── RÉALISATIONS : le mur (colonnes rangées par le script, filtres par format, dépliage) ── */
.ap-work { padding: var(--space-xl) 0; background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 100%); }
.mw-filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.8rem; }
.mw-filtre { min-height: 44px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--light-blue); background: transparent; border: 1px solid rgba(124, 152, 179, 0.25); border-radius: 100px; padding: 0.5rem 0.95rem; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.mw-filtre span { font-weight: 500; color: var(--soft-blue); margin-left: 0.2rem; }
.mw-filtre:hover { border-color: rgba(249, 220, 92, 0.5); color: var(--off-white); }
.mw-filtre[aria-pressed="true"] { background: var(--golden); border-color: var(--golden); color: var(--midnight); }
.mw-filtre[aria-pressed="true"] span { color: rgba(13, 27, 42, 0.65); }
.mw-wall { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.mw-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.mw-wall.mw-replie { max-height: 1500px; overflow: hidden; }
.mw-wall.mw-replie::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(180deg, rgba(17, 34, 64, 0) 0%, var(--midnight-light) 92%); pointer-events: none; z-index: 2; }
.mw-more { display: flex; justify-content: center; margin-top: 1.6rem; position: relative; z-index: 3; }
.mw-more button { font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--golden); background: transparent; border: 1px solid rgba(249, 220, 92, 0.55); border-radius: 100px; padding: 0.85rem 1.6rem; transition: background 0.25s, color 0.25s; }
.mw-more button:hover { background: var(--golden); color: var(--midnight); }
/* le script masque le bouton une fois le mur déplié : sans cette règle, le display:flex ci-dessus l'emporte sur l'attribut hidden */
.mw-more[hidden] { display: none; }
.mw-item[hidden] { display: none !important; }
.mw-item, .mw-item.ck-proof-item { position: relative; display: block; width: 100%; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: none; background: var(--midnight); border: 1px solid rgba(124, 152, 179, 0.14); opacity: 1; transform: none; transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.mw-item:hover { border-color: rgba(249, 220, 92, 0.45); transform: translateY(-3px); }
.mw-media { position: relative; display: block; overflow: hidden; background: #0A1622; }
.mw-media img, .mw-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-media img[src$=".gif"] { image-rendering: pixelated; }
.mw-scroll { aspect-ratio: 4 / 5; }
.mw-scroll img { object-position: 50% 0; transition: object-position 8s cubic-bezier(0.45, 0, 0.55, 1); }
.mw-item:hover .mw-scroll img { object-position: 50% 100%; }
.mw-cap { display: block; padding: 0.8rem 0.95rem 0.9rem; border-top: 1px solid rgba(124, 152, 179, 0.12); }
.mw-cap small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft-blue); margin-bottom: 0.25rem; }
.mw-cap b { display: block; font-size: 0.88rem; font-weight: 700; color: var(--off-white); line-height: 1.35; }
.mw-cap i { display: inline-flex; margin-top: 0.4rem; font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--golden); opacity: 0; transform: translateY(3px); transition: opacity 0.25s, transform 0.25s; }
.mw-cap i::after { content: '\2192'; margin-left: 0.35rem; }
.mw-item:hover .mw-cap i, .mw-item:focus-visible .mw-cap i { opacity: 1; transform: none; }
@media (hover: none) { .mw-cap i { opacity: 1; transform: none; } }

/* bouton lecture (vidéos, témoignage) */
.ap-play { position: absolute; left: 1rem; bottom: 1rem; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--golden); background: rgba(13, 27, 42, 0.6); border: 1px solid rgba(249, 220, 92, 0.6); box-shadow: 0 0 40px rgba(249, 220, 92, 0.2); transition: transform 0.3s; }
.ap-play svg { width: 20px; height: 20px; margin-left: 3px; }

/* ── AVIS : citation épinglée à gauche avec la vidéo, les 13 avis qui défilent à droite ── */
.ap-testimonials { background: linear-gradient(180deg, var(--midnight-light) 0%, var(--midnight) 60%); }
.tw-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.tw-side { position: sticky; top: 6.5rem; }
.ap-testimonials .tw-side .section-title { text-align: left; margin: 0 0 1.8rem; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.tw-pull { margin: 0 0 1.8rem; padding: 0.4rem 0 0.4rem 1.4rem; border-left: 3px solid var(--golden); }
.tw-pull blockquote { font-family: var(--font-display); font-size: clamp(2rem, 3.1vw, 2.7rem); line-height: 1.15; color: var(--off-white); }
.tw-pull figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.tw-pull figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tw-pull figcaption span { font-size: 0.78rem; color: var(--soft-blue); line-height: 1.4; }
.tw-pull figcaption b { display: block; font-size: 0.88rem; color: var(--off-white); }
.tw-wall { position: relative; columns: 2; column-gap: 18px; }
.tw-wall > * { break-inside: avoid; margin-bottom: 18px; }
.tw-wall.tw-replie > .tw-card:nth-child(n+7) { display: none; }
.tw-wall.tw-replie::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(13, 27, 42, 0) 0%, var(--midnight) 90%); pointer-events: none; }
.tw-card.testimonial-card { position: relative; display: block; width: 100%; grid-column: auto; grid-row: auto; }
.tw-result { display: inline-block; margin-bottom: 0.9rem; font-size: 0.78rem; font-weight: 800; color: var(--midnight); background: var(--golden); padding: 0.3rem 0.7rem; border-radius: 100px; }
.tw-video.ck-proof-item { display: block; width: 100%; padding: 0; font: inherit; color: inherit; text-align: left; opacity: 1; transform: none; background: var(--midnight); border: 1px solid rgba(249, 220, 92, 0.35); }
.tw-video-media { position: relative; display: block; }
.tw-video-media img { display: block; width: 100%; height: auto; }
.tw-video-cap { display: block; padding: 1rem 1.2rem 1.15rem; }
.tw-video-cap b { display: block; font-size: 1rem; font-weight: 800; color: var(--off-white); }
.tw-video-cap small { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--soft-blue); }
.tw-video:hover .ap-play { transform: scale(1.08); }

@media (pointer: coarse) { .tw-card .testimonial-linkedin { width: 44px; height: 44px; } }

/* ── PROGRAMME : onglets (pilules) puis liste numérotée et aperçu ── */
.ap-programme { padding: var(--space-xl) 0; }
.ap-tabs { display: inline-flex; gap: 0.3rem; padding: 0.3rem; margin: 0.8rem 0 2.6rem; border: 1px solid rgba(124, 152, 179, 0.22); border-radius: 100px; }
.ap-tabs button { font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--light-blue); background: transparent; border: 0; padding: 0.72rem 1.35rem; border-radius: 100px; transition: background 0.25s, color 0.25s; }
.ap-tabs button:hover { color: var(--off-white); }
.ap-tabs button[aria-selected="true"] { background: var(--golden); color: var(--midnight); }
.ap-tabs button:focus-visible { outline: 2px solid var(--golden); outline-offset: 2px; }
.ap-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; animation: fadeUp 0.5s both; }
.ap-panel[hidden] { display: none; }
.ap-list { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-line); }
.ap-list::before, .ap-list::after { content: ''; position: absolute; left: calc(0.5rem + 1.5rem); top: 0; width: 1px; }
.ap-list::before { bottom: 0; background: rgba(124, 152, 179, 0.16); }
.ap-list::after { height: var(--p, 0%); background: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.5); transition: height 0.15s linear; }
.ap-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--ap-line); transition: background 0.25s; }
.ap-list li:hover { background: rgba(27, 73, 101, 0.12); }
.ap-list b { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1.3; color: var(--golden); text-align: center; background: var(--midnight); }
.ap-list h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.2rem; }
.ap-list p { font-size: 0.88rem; color: var(--soft-blue); line-height: 1.5; }
.ap-list span { font-size: 0.74rem; font-weight: 700; color: var(--light-blue); white-space: nowrap; border: 1px solid rgba(124, 152, 179, 0.25); border-radius: 100px; padding: 0.3rem 0.7rem; }
.ap-panel-side { position: sticky; top: 6.5rem; }
.ap-panel-side > .corner-plus { z-index: 4; }
.ap-shot { position: relative; display: block; width: 100%; padding: 0; font: inherit; color: inherit; background: var(--midnight-light); border: 1px solid rgba(124, 152, 179, 0.2); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); overflow: hidden; transition: border-color 0.3s; }
.ap-shot:hover { border-color: rgba(249, 220, 92, 0.4); }
.ap-shot img { display: block; width: 100%; height: auto; }
.ap-shot .ck-proof-hint { opacity: 1; transform: none; }
.ap-shot-cap { font-size: 0.82rem; color: var(--soft-blue); margin-top: 0.85rem; }
.ap-kit-shots { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1rem; align-items: end; }
.ap-kit-shots figure { margin: 0; }
.ap-kit-shots img { display: block; width: 100%; height: auto; border: 1px solid rgba(124, 152, 179, 0.2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.ap-kit-shots figcaption { font-size: 0.78rem; color: var(--soft-blue); margin-top: 0.7rem; }

/* ── OFFRE : la carte de l'atelier domine, l'accès fondateur en alternative ── */
.ck-pricing.ap-offer { padding-bottom: var(--space-lg); }
.ap-offer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .ap-offer-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 1.8rem; align-items: center; } }
.ap-main-offer.oc-card { padding: clamp(2rem, 3vw, 2.8rem); }
.ap-offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ap-line); }
.ap-offer-head .oc-note { margin-bottom: 0; }
.ap-price { font-size: clamp(3rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.04em; color: var(--off-white); line-height: 1; margin-bottom: 0.5rem; }
.ap-price-alt { font-size: clamp(2.2rem, 3.4vw, 2.8rem); }
.ap-offer-thumb { width: 44%; max-width: 230px; flex: none; border: 1px solid rgba(124, 152, 179, 0.22); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); transform: rotate(2.5deg); }
.ap-checks { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: 0.75rem; flex: 1; }
.ap-checks li { position: relative; padding-left: 1.9rem; font-size: 0.93rem; color: var(--light-blue); line-height: 1.45; }
.ap-checks li::before { content: ''; position: absolute; left: 0; top: 0.08rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--golden-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9DC5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.ap-alt-offer .ap-checks li { font-size: 0.88rem; }
.ap-offer .oc-btn { width: 100%; justify-content: center; }
.ap-form-row { display: flex; gap: 0.6rem; }
.ap-form-row .dm-input { flex: 1; min-width: 0; }
.ap-form-row .btn-primary { flex: none; white-space: nowrap; padding: 0.9rem 1.4rem; }
.ap-form .dm-consent { margin-top: 0.8rem; }
.ap-form-note { font-size: 0.8rem; color: var(--soft-blue); margin-top: 0.7rem; }
.ap-form-thanks { display: none; align-items: center; gap: 0.7rem; padding: 1rem 1.1rem; background: var(--golden-dim); border: 1px solid rgba(249, 220, 92, 0.25); color: var(--off-white); font-size: 0.92rem; line-height: 1.5; }
.ap-form-thanks svg { width: 22px; height: 22px; stroke: var(--golden); flex: none; }
#notifier.sent .ap-form { display: none; }
#notifier.sent .ap-form-thanks { display: flex; }
#notifier.focus .dm-input { border-color: var(--golden); box-shadow: 0 0 0 3px var(--golden-dim); }
.ap-offer + .dm-faq-section { background: linear-gradient(180deg, var(--midnight-light) 0%, var(--midnight) 70%); }


/* ── POUR QUI : deux cartes décalées, l'une teintée ── */
.ap-pourqui { padding: var(--space-lg) 0 var(--space-xl); }
.ap-pourqui .section-title { margin-bottom: var(--space-md); }
.ap-pq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ap-pq { position: relative; padding: 2rem 2rem 2.2rem; border: 1px solid rgba(124, 152, 179, 0.16); background: var(--midnight); }
.ap-pq-oui { background: linear-gradient(160deg, rgba(249, 220, 92, 0.09), rgba(249, 220, 92, 0.02) 60%), var(--midnight); border-color: rgba(249, 220, 92, 0.3); }
.ap-pq-prevoir { margin-top: 48px; }
.ap-pq-titre { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--golden); margin-bottom: 1.2rem; }
.ap-pq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ap-pq-oui li { position: relative; padding-left: 2rem; font-size: 1.02rem; font-weight: 600; color: var(--off-white); line-height: 1.5; }
.ap-pq-oui li::before { content: ''; position: absolute; left: 0; top: 0.12rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--golden-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9DC5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.ap-pq-prevoir li { font-size: 0.9rem; color: var(--soft-blue); line-height: 1.55; padding-bottom: 1rem; border-bottom: 1px solid var(--ap-line); }
.ap-pq-prevoir li:last-child { border-bottom: none; padding-bottom: 0; }
.ap-pq-prevoir li b { display: block; font-size: 0.98rem; color: var(--off-white); margin-bottom: 0.15rem; }
.ap-social-link { display: inline-block; margin-top: 0; font-weight: 700; color: var(--golden); border-bottom: 1px solid rgba(249, 220, 92, 0.4); }

/* ── QUI VOUS GUIDE : texte centré, 6 photos de terrain flottantes autour (principe du héros de l'accueil) ── */
.ap-about { position: relative; padding: var(--space-lg) 0 var(--space-xl); background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 45%, var(--midnight) 100%); overflow: hidden; }
.ap-about-stage { position: relative; padding: var(--space-lg) 0; min-height: 760px; display: flex; align-items: center; }
.ap-about-stage > .container { position: relative; z-index: 2; width: 100%; }
.ap-about-center { max-width: 660px; margin: 0 auto; text-align: center; }
.ap-about-center .section-title { margin: 0 auto 1.5rem; font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
.ap-about-center > p { font-size: 1.05rem; color: var(--light-blue); line-height: 1.75; margin-bottom: 0.9rem; }
.ap-about-photos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ap-fl { position: absolute; object-fit: cover; border-radius: 12px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45); border: 1px solid rgba(250, 250, 250, 0.1); opacity: 0; scale: 0.85; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: translate; }
.ap-about-stage.in .ap-fl { opacity: 1; scale: 1; }
.ap-fl.p1 { top: 3%;  left: 2.5%; width: 280px; height: 210px; rotate: -5deg; transition-delay: 0.1s; }
.ap-fl.p2 { top: 37%; left: 13%;  width: 150px; height: 200px; rotate: 4deg;  transition-delay: 0.35s; }
.ap-fl.p3 { top: 68%; left: 3.5%; width: 240px; height: 180px; rotate: -3deg; transition-delay: 0.6s; }
.ap-fl.p4 { top: 2%;  right: 5%;  width: 190px; height: 238px; rotate: 5deg;  transition-delay: 0.2s; }
.ap-fl.p5 { top: 42%; right: 1.5%; width: 240px; height: 180px; rotate: -4deg; transition-delay: 0.45s; }
.ap-fl.p6 { top: 70%; right: 13%; width: 150px; height: 200px; rotate: 3deg;  transition-delay: 0.7s; }
/* couloir de lecture : les photos restent hors de la colonne de texte (660 px au centre) */
@media (min-width: 1400px) {
    .ap-fl.p1 { left: min(2.5%, calc(50% - 680px)); } .ap-fl.p3 { left: min(3.5%, calc(50% - 660px)); }
    .ap-fl.p2 { left: min(13%, calc(50% - 520px)); } .ap-fl.p6 { right: min(13%, calc(50% - 520px)); }
}
@media (max-width: 1399px) { .ap-fl.p2, .ap-fl.p6 { display: none; } .ap-fl.p1, .ap-fl.p3, .ap-fl.p4, .ap-fl.p5 { width: 200px; height: 150px; } .ap-fl.p4 { height: 250px; width: 190px; } }
@media (max-width: 1199px) { .ap-fl.p1, .ap-fl.p3, .ap-fl.p5 { width: 150px; height: 112px; } .ap-fl.p4 { width: 140px; height: 176px; } .ap-fl.p1, .ap-fl.p3 { left: 1.2%; } .ap-fl.p4, .ap-fl.p5 { right: 1.2%; } }
.ap-sign { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; }
.ap-sign-svg { display: block; width: 250px; height: auto; overflow: visible; }
.ap-sign-t { font-family: var(--font-display); font-size: 66px; fill: var(--off-white); opacity: 0; transition: opacity 0.9s 0.9s; }
.ap-sign-trait { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.ap-sign.visible .ap-sign-trait { stroke-dashoffset: 0; }
.ap-sign.visible .ap-sign-t { opacity: 1; }
.ap-sign > span { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--soft-blue); }
.ap-about-stats { display: flex; justify-content: center; gap: 2.8rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ap-line); }
.ap-about-stats b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--golden); }
.ap-about-stats span { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--soft-blue); }
.ap-reco { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--space-lg); border-top: 1px solid var(--ap-line); border-left: 1px solid var(--ap-line); }
.ap-reco > div { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.2rem; border-right: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); transition: background 0.3s; }
.ap-reco > div:hover { background: rgba(27, 73, 101, 0.14); }
.ap-reco-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 7px; background: #FFFFFF; }
.ap-reco-logo.wide { width: 108px; }
.ap-reco-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ap-reco p { font-size: 0.82rem; color: var(--soft-blue); line-height: 1.4; }
.ap-reco p b { display: block; font-size: 0.92rem; font-weight: 800; color: var(--off-white); margin-bottom: 0.1rem; }

/* ── responsive ── */
@media (max-width: 899px) {
    .ap-hero-copy { text-align: center; }
    .ap-hero .ck-hero-sub { margin-left: auto; margin-right: auto; }
    .ap-hero-actions, .ap-social { justify-content: center; }
    .ap-scene { margin: 1rem 1rem 4rem; }
        .ap-float-check { left: -3%; bottom: -20%; width: 58%; }
    .ap-facts { grid-template-columns: repeat(2, 1fr); }
    .ap-fact:nth-of-type(2) { border-right: none; }
    .ap-fact:nth-of-type(-n+2) { border-bottom: 1px solid var(--ap-line); }
    .ap-facts .reassurance-plus { display: none; }
    .ap-social { flex-direction: column; text-align: center; gap: 0.75rem; }
    .ap-social p { max-width: 34ch; }
    .ap-social-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
    .ck-pricing.ap-offer { padding-bottom: 2.5rem; }
    .ap-offer + .dm-faq-section { padding-top: 3rem; }
    .ap-produirez { padding-bottom: 1.5rem; }
    .ap-pb-grid, .tw-layout { grid-template-columns: 1fr; }
    .ap-pb-gauche { position: relative; top: auto; }
    .ap-pb-nav { display: none; }
    .ap-pb-droite { gap: 1.6rem; padding-top: 0; }
    .ap-nuancier p { width: 7.2rem; font-size: 0.76rem; }
    .ap-nuancier span { width: 34px; height: 34px; }
    .ap-equipe { gap: 0.4rem; padding: 0.6rem; }
    .ap-equipe > div { padding: 0.5rem; }
    .ap-tic > .ap-tic-verbatim { font-size: 1.45rem; }
    .ap-steps { grid-template-columns: 1fr; padding-top: 0; }
    .ap-steps-line, .ap-step::before, .ap-step::after { display: none; }
    .ap-step:nth-of-type(n) { margin-top: 0; }
    .tw-side { position: relative; top: auto; }
    .ap-reco { grid-template-columns: repeat(2, 1fr); }
    .ap-about-stage { flex-direction: column; min-height: 0; padding-top: 0; }
    .ap-about-photos { position: relative; inset: auto; display: flex; gap: 12px; overflow-x: auto; padding: 1rem 1.5rem 2rem; margin-bottom: 1rem; scrollbar-width: none; pointer-events: auto; width: 100%; }
    .ap-about-photos::-webkit-scrollbar { display: none; }
    .ap-fl, .ap-fl.p1, .ap-fl.p2, .ap-fl.p3, .ap-fl.p4, .ap-fl.p5, .ap-fl.p6 { position: relative; display: block; flex: none; top: auto; left: auto; right: auto; width: 170px; height: 200px; }
    .ap-pq-grid { grid-template-columns: 1fr; }
    .ap-pq-prevoir { margin-top: 0; }
    .tw-wall { columns: 2; }
    .ap-libre-grid { grid-template-columns: 1fr; }
    .ap-panel { grid-template-columns: 1fr; }
    .ap-panel-side { position: relative; top: auto; }
}
@media (max-width: 640px) {
    .ap-fact { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.3rem 1rem; }
    .tw-wall { columns: 1; }
    .mw-filtres { flex-wrap: nowrap; overflow-x: auto; margin-left: -1.5rem; margin-right: -1.5rem; padding: 0 1.5rem 0.3rem; scrollbar-width: none; }
    .mw-filtres::-webkit-scrollbar { display: none; }
    .mw-filtre { flex: none; }
    .mw-wall, .mw-col { gap: 10px; }
    .mw-wall.mw-replie { max-height: 1300px; }
    .mw-cap { padding: 0.65rem 0.7rem 0.75rem; }
    .mw-cap b { font-size: 0.8rem; }
    .tw-wall { columns: 1; }
    .ap-reco { grid-template-columns: 1fr; }
    .ap-about-stats { gap: 1.4rem; }
    .ap-about-stats b { font-size: 2rem; }
    .ap-libre-points li { grid-template-columns: 1fr; gap: 0.3rem; }
    .ap-libre-schema { grid-template-columns: 1fr; gap: 14px; }
    .ap-libre-fils { display: none; }
    .ap-libre-agents { flex-direction: row; gap: 8px; }
    .ap-libre-agents p { flex: 1; min-width: 0; padding: 0.75rem 0.7rem; }
    .ap-libre-agents b { font-size: 0.85rem; }
    .ap-libre-agents p.on { transform: translateY(-4px); }
    .ap-libre-dossier { font-size: 0.78rem; padding: 1.1rem 1.2rem; }
        .ap-tabs { display: flex; }
    .ap-tabs button { flex: 1; padding: 0.7rem 0.6rem; font-size: 0.8rem; }
    .ap-list li { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .ap-list li > span { grid-column: 2; justify-self: start; }
    .ap-offer-thumb { display: none; }
    .ap-form-row { flex-direction: column; }
    .ap-scene { margin: 0.5rem 0.4rem 9.5rem; }
        .ap-float-check { left: -2%; bottom: -64%; width: 66%; }
}
@media (prefers-reduced-motion: reduce) {
        .ap-tampon, .ap-sign-trait, .ap-sign-t, .ap-steps-line::after, .ap-step::after { transition: none; }
    .ap-methode .ap-files li, .ap-methode .ap-reads li, .ap-methode .ap-term p { opacity: 1; transform: none; transition: none; }
}