/* ═══════════════════════════════════════
   LANDING « MARKETEUR FULL STACK » (/marketeur-full-stack/)
   Les sections reprises de la landing « Le cerveau de marque » gardent leur balisage et leurs
   styles d'origine (main.css, home.css, demarrer.css, cockpit-page.css, offer-cards.css,
   atelier.css, formations.css pour le bloc qualité) : cette feuille ne les surcharge pas.
   Elle n'ajoute que le propre de la page : le profil en T, le frontend et le backend et leurs logos,
   le parcours jour par jour, l'espace apprenants, le simulateur de retour, et Jessy en pixel art,
   la mascotte qui suit la visite et répond aux questions.
   Fonds : chaque section finit sur la couleur où commence la suivante (midnight, midnight-light).
   ═══════════════════════════════════════ */

/* ── HÉROS : la vignette du pitch est un bouton (rendu de .dm-thumb), lecture au centre ── */
.ap-hero button.dm-thumb { display: block; width: 100%; padding: 0; font: inherit; color: inherit; }
.ap-hero button.dm-thumb img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ap-hero button.dm-thumb:hover img { transform: scale(1.02); }
.ap-hero button.dm-thumb:focus-visible { outline: 2px solid var(--golden); outline-offset: 3px; }
.ap-hero .dm-thumb .ap-play { left: 50%; top: 50%; bottom: auto; width: 74px; height: 74px; translate: -50% -50%; }
.ap-hero .dm-thumb .ap-play svg { width: 26px; height: 26px; margin-left: 4px; }
.ap-hero button.dm-thumb:hover .ap-play { transform: scale(1.08); }
.mf-video-on iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* la bande de chiffres de atelier.css en compte 4 : ici 3, le troisième sur toute la largeur en 2 colonnes */
.ap-facts.mf-facts-3 { grid-template-columns: repeat(3, 1fr); }

/* ── LE PROFIL EN T ── */
.mf-t-sec { position: relative; }
.mf-t-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(124, 152, 179, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 152, 179, 0.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 100%); }
.mf-t-sec .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.mf-t { position: relative; max-width: 1180px; margin: 3.6rem auto 0; display: grid; grid-template-columns: 170px 1fr 280px 1fr; grid-template-areas: "lf rf rf rf" ". bar bar bar" "lb bg st bd" ". . st ."; column-gap: 1.6rem; }
.mf-t-leg { margin: 0; text-align: right; }
.mf-t-leg b { display: block; font-size: 1.15rem; font-weight: 800; }
.mf-t-leg span { display: block; font-size: 0.78rem; color: var(--soft-blue); margin-top: 0.15rem; }
.mf-t-leg.front { grid-area: lf; align-self: end; padding-bottom: 1.4rem; }
.mf-t-leg.front b { color: var(--golden); }
.mf-t-leg.back { grid-area: lb; padding-top: 1.4rem; }
.mf-t-leg.back b { color: var(--light-blue); }
.mf-t-row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 1rem; }
.mf-t-row li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.mf-t-row.back li { flex-direction: column-reverse; }
.mf-t-ic { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(249, 220, 92, 0.45); background: radial-gradient(circle at 50% 30%, rgba(249, 220, 92, 0.16), rgba(13, 27, 42, 0.92) 72%); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32); }
.mf-t-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--golden); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mf-t-row.back .mf-t-ic { border-color: rgba(172, 203, 225, 0.4); background: radial-gradient(circle at 50% 30%, rgba(172, 203, 225, 0.14), rgba(13, 27, 42, 0.92) 72%); }
.mf-t-row.back .mf-t-ic svg { stroke: var(--light-blue); }
.mf-t-row.front { grid-area: rf; padding-bottom: 1.4rem; }
.mf-t-row.front li { color: var(--off-white); }
.mf-t-row.front li::after { content: ''; position: absolute; left: 50%; top: 100%; margin-top: 0.4rem; width: 2px; height: 0.85rem; background: linear-gradient(rgba(249, 220, 92, 0.25), var(--golden)); }
.mf-t-bar { grid-area: bar; height: 12px; background: linear-gradient(90deg, #F9DC5C, #E0A93A 50%, #F9DC5C); box-shadow: 0 0 30px rgba(249, 220, 92, 0.4), 0 0 2px rgba(249, 220, 92, 0.9); }
.mf-t-row.back { padding-top: 1.4rem; justify-content: space-around; }
.mf-t-row.back li { color: var(--light-blue); }
.mf-t-row.back li::before { content: ''; position: absolute; left: 50%; bottom: 100%; margin-bottom: 0.4rem; width: 2px; height: 0.85rem; background: linear-gradient(rgba(172, 203, 225, 0.85), rgba(172, 203, 225, 0.2)); }
.mf-t-row.back.gauche { grid-area: bg; }
.mf-t-row.back.droite { grid-area: bd; }
.mf-t-stem { grid-area: st; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 1rem 1.8rem; background: linear-gradient(180deg, rgba(249, 220, 92, 0.3), rgba(249, 220, 92, 0.05)); box-shadow: inset 2px 0 0 var(--golden), inset -2px 0 0 var(--golden), inset 0 -2px 0 var(--golden); }
.mf-t-k { font-size: 0.85rem; font-weight: 700; color: var(--off-white); }
.mf-t-spec { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.05; color: var(--golden); }
.mf-t-or { font-size: 0.85rem; color: var(--light-blue); }
.mf-t-depth { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.85rem; font-weight: 700; color: var(--off-white); }
.mf-t-depth svg { width: 16px; height: 16px; color: var(--golden); }
/* l'animation, seulement quand le script l'a armée (sinon le T s'affiche fini) */
.mf-t.mf-anim .mf-t-bar { transform: scaleX(0); }
.mf-t.mf-anim .mf-t-leg, .mf-t.mf-anim .mf-t-row li, .mf-t.mf-anim .mf-t-stem > * { opacity: 0; transform: translateY(10px); }
.mf-t.mf-anim .mf-t-stem { transform: scaleY(0); transform-origin: 50% 0; }
.mf-t.mf-anim.in .mf-t-bar { transform: none; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.mf-t.mf-anim.in .mf-t-leg, .mf-t.mf-anim.in .mf-t-row li { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.mf-t.mf-anim.in .mf-t-leg { transition-delay: 0.45s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(1) { transition-delay: 0.55s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(2) { transition-delay: 0.63s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(3) { transition-delay: 0.71s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(4) { transition-delay: 0.79s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(5) { transition-delay: 0.87s; }
.mf-t.mf-anim.in .mf-t-row.back li { transition-delay: 1s; }
/* les icônes arrivent juste après leur libellé, l'une après l'autre */
.mf-t.mf-anim .mf-t-ic { opacity: 0; transform: scale(0.3) rotate(-14deg); }
.mf-t.mf-anim.in .mf-t-ic { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(1) .mf-t-ic { transition-delay: 0.8s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(2) .mf-t-ic { transition-delay: 0.94s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(3) .mf-t-ic { transition-delay: 1.08s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(4) .mf-t-ic { transition-delay: 1.22s; }
.mf-t.mf-anim.in .mf-t-row.front li:nth-child(5) .mf-t-ic { transition-delay: 1.36s; }
.mf-t.mf-anim.in .mf-t-row.back.gauche li:nth-child(1) .mf-t-ic { transition-delay: 1.5s; }
.mf-t.mf-anim.in .mf-t-row.back.gauche li:nth-child(2) .mf-t-ic { transition-delay: 1.64s; }
.mf-t.mf-anim.in .mf-t-row.back.droite li:nth-child(1) .mf-t-ic { transition-delay: 1.78s; }
.mf-t.mf-anim.in .mf-t-row.back.droite li:nth-child(2) .mf-t-ic { transition-delay: 1.92s; }
.mf-t.mf-anim.in .mf-t-row.back.droite li:nth-child(3) .mf-t-ic { transition-delay: 2.06s; }
.mf-t.mf-anim.in .mf-t-stem { transform: none; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s; }
.mf-t.mf-anim.in .mf-t-stem > * { opacity: 1; transform: none; transition: opacity 0.6s ease 2s, transform 0.6s ease 2s; }

/* ── FRONTEND, AGENTS, BACKEND ── */
.mf-stack-sec .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.mf-stack { display: grid; grid-template-columns: 1fr 230px 1fr; gap: 1.4rem; margin-top: 3rem; align-items: stretch; }
.mf-col { position: relative; padding: 2rem 2rem 2.2rem; border: 1px solid rgba(124, 152, 179, 0.18); background: var(--midnight); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3); }
.mf-col.front { box-shadow: inset 0 2px 0 var(--golden), 0 26px 60px rgba(0, 0, 0, 0.3); }
.mf-col.back { box-shadow: inset 0 2px 0 var(--light-blue), 0 26px 60px rgba(0, 0, 0, 0.3); }
.mf-col h3 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--off-white); letter-spacing: -0.01em; }
.mf-col h3 span { display: block; margin-top: 0.3rem; font-size: 0.92rem; font-weight: 500; color: var(--soft-blue); letter-spacing: 0; }
.mf-skills { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.mf-skills li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0 0.8rem 1.5rem; border-bottom: 1px solid var(--ap-line); font-size: 1rem; line-height: 1.45; color: var(--off-white); }
.mf-skills li::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.5); }
.mf-col.back .mf-skills li::before { background: var(--light-blue); box-shadow: 0 0 10px rgba(172, 203, 225, 0.45); }
.mf-skill { flex: 1; min-width: 0; }
.mf-logos { flex: none; display: flex; gap: 6px; }
/* un logo par outil (Simple Icons, assets/logos et assets/logos-outils), en jaune uni du site ; seul Claude Code, au centre, garde sa tuile et sa couleur */
.mf-logo { position: relative; flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; }
.mf-logo::before { content: ''; width: 82%; height: 82%; background: var(--golden); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background 0.4s; }
.mf-logos .mf-logo::after, .mf-core .mf-logo::after { content: attr(data-nom); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; padding: 0.28rem 0.55rem; background: var(--midnight); border: 1px solid rgba(249, 220, 92, 0.45); font-size: 0.68rem; font-weight: 700; line-height: 1.2; color: var(--off-white); white-space: nowrap; opacity: 0; translate: -50% 4px; pointer-events: none; transition: opacity 0.2s, translate 0.2s; }
.mf-logos .mf-logo:hover::after, .mf-core .mf-logo:hover::after { opacity: 1; translate: -50% 0; }
.mf-logo-xl { width: 58px; height: 58px; margin-bottom: 0.3rem; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(249, 220, 92, 0.5), 0 0 34px rgba(249, 220, 92, 0.22); }
.mf-logo-xl::before { width: 58%; height: 58%; background: var(--c); }
.lg-claude { --m: url('../logos-outils/si-claude.svg'); }
.lg-claudecode { --c: #D97757; --m: url('../logos-outils/si-claudecode.svg'); }
.lg-linkedin { --m: url('../logos/linkedin.svg'); }
.lg-instagram { --m: url('../logos/instagram.svg'); }
.lg-canva { --m: url('../logos/canva.svg'); }
.lg-figma { --m: url('../logos/figma.svg'); }
.lg-gemini { --m: url('../logos-outils/si-googlegemini.svg'); }
.lg-magnific { --m: url('../logos/magnific.svg'); }
.lg-higgsfield { --m: url('../logos/higgsfield.svg'); }
.lg-youtube { --m: url('../logos/youtube.svg'); }
.lg-tiktok { --m: url('../logos/tiktok.svg'); }
.lg-mailchimp { --m: url('../logos/mailchimp.svg'); }
.lg-wordpress { --m: url('../logos/wordpress.svg'); }
.lg-webflow { --m: url('../logos/webflow.svg'); }
.lg-googleanalytics { --m: url('../logos/googleanalytics.svg'); }
.lg-googlesheets { --m: url('../logos/googlesheets.svg'); }
.lg-similarweb { --m: url('../logos/similarweb.svg'); }
.lg-googleads { --m: url('../logos/googleads.svg'); }
.lg-meta { --m: url('../logos/facebook.svg'); }
.lg-semrush { --m: url('../logos/semrush.svg'); }
.lg-hubspot { --m: url('../logos/hubspot.svg'); }
.lg-salesforce { --m: url('../logos/salesforce.svg'); }
.lg-airtable { --m: url('../logos/airtable.svg'); }
.lg-n8n { --c: #EA4B71; --m: url('../logos/n8n.svg'); }
.lg-zapier { --m: url('../logos/zapier.svg'); }
.lg-brevo { --m: url('../logos/brevo.svg'); }
.lg-googledrive { --m: url('../logos-outils/googledrive.svg'); }
/* les tuiles se posent quand la colonne entre à l'écran (délais posés par le script) */
.mf-col.reveal-late .mf-logo { opacity: 0; transform: translateY(8px) scale(0.6); transition: opacity 0.35s ease var(--d, 0s), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s); }
.mf-col.reveal-late.visible .mf-logo { opacity: 1; transform: none; }
.mf-stack-note { margin: 1.6rem 0 0; text-align: center; font-size: 0.86rem; color: var(--soft-blue); }
.mf-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.8rem 1.2rem; border: 1px solid rgba(249, 220, 92, 0.38); background: radial-gradient(100% 70% at 50% 40%, rgba(249, 220, 92, 0.13), rgba(13, 27, 42, 0.6) 75%); }
.mf-core-titre { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--golden); }
.mf-core-n { margin: 0; display: flex; flex-direction: column; align-items: center; }
.mf-core-n b { font-family: var(--font-display); font-weight: 400; font-size: 3.8rem; line-height: 1; color: var(--golden); }
.mf-core-n span { font-size: 0.95rem; font-weight: 700; color: var(--off-white); }
.mf-core-note { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--light-blue); }

/* ═══════════════════════════════════════
   LE PARCOURS JOUR PAR JOUR
   Les étapes défilent à gauche, la scène reste à l'écran à droite. Fond quadrillé de la méthode
   (atelier.css), fondu en haut et en bas pour ne jamais marquer de bord.
   ═══════════════════════════════════════ */
.mf-parcours { position: relative; }
.mf-parcours::before { content: ''; position: absolute; inset: 0; pointer-events: none; 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; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.mf-parcours .container { position: relative; }
.mf-parcours .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.pj { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }

/* les étapes, accrochées à un rail qui se remplit */
.pj-etapes { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.4rem; }
.pj-etapes::before, .pj-etapes::after { content: ''; position: absolute; left: 0.5rem; top: 0.9rem; width: 1px; }
.pj-etapes::before { bottom: 0; background: rgba(124, 152, 179, 0.16); }
.pj-etapes::after { height: var(--p, 0%); background: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.5); transition: height 0.15s linear; }
.pj-etape { position: relative; padding: 0 0 2.8rem; }
.pj-etape::before { content: ''; position: absolute; left: calc(-2.4rem + 0.5rem - 5px); top: 0.75rem; width: 11px; height: 11px; border-radius: 50%; background: var(--midnight); border: 1px solid rgba(124, 152, 179, 0.5); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.pj-etape.on::before { background: var(--golden); border-color: var(--golden); box-shadow: 0 0 14px rgba(249, 220, 92, 0.6); }
.pj-quand { display: flex; align-items: baseline; gap: 0.65rem; margin: 0 0 0.55rem; font-size: 0.9rem; color: var(--soft-blue); }
.pj-quand b { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--golden); }
.pj-duree { margin-left: auto; align-self: center; 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; }
.pj-etape h3 { margin: 0 0 0.7rem; font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 800; letter-spacing: -0.01em; color: var(--off-white); }
.pj-etape h3 + p { margin: 0 0 1rem; max-width: 46ch; font-size: 1rem; line-height: 1.7; color: var(--light-blue); }
.pj-sortie { display: flex; gap: 0.6rem; max-width: 46ch; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--ap-line); font-size: 0.9rem; font-weight: 700; line-height: 1.45; color: var(--off-white); }
.pj-sortie::before { content: '\2713'; color: var(--golden); }
/* défilement armé par le script : une étape par écran, celle qu'on lit en pleine lumière */
@media (min-width: 900px) {
    .pj.js .pj-etape { min-height: 64vh; opacity: 0.32; transition: opacity 0.45s; }
    .pj.js .pj-etape.on { opacity: 1; }
    /* la dernière étape prolonge la colonne : la scène collante reste entière sous la barre du haut */
    .pj.js .pj-etape:last-child { min-height: 84vh; }
    .pj-etape .pj-fige { display: none; }
}

/* la scène */
.pj-scene { position: sticky; top: 6.5rem; }
/* la scène laisse 160 px sous elle : la mascotte s'y pose quand la scène reste épinglée */
.pj-cadre { position: relative; height: clamp(540px, calc(100vh - 9rem - 160px), 640px); padding: 1.15rem 1.3rem; background: linear-gradient(160deg, rgba(27, 73, 101, 0.42), rgba(13, 27, 42, 0.97) 58%); border: 1px solid rgba(249, 220, 92, 0.35); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 80px rgba(249, 220, 92, 0.06); }
.pj-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ap-line); }
.pj-tete b { font-size: 0.95rem; font-weight: 800; color: var(--off-white); }
.pj-tete span { font-size: 0.74rem; color: var(--soft-blue); text-align: right; }
.pj-exemple { position: absolute; left: 1.3rem; bottom: 0.75rem; margin: 0; font-size: 0.68rem; color: var(--soft-blue); }
.pj-couche { position: absolute; left: 1.3rem; right: 1.3rem; top: 3.9rem; bottom: 2.5rem; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.pj-cadre[data-etat="mur"] .pj-cartes, .pj-cadre[data-etat="tri"] .pj-cartes, .pj-cadre[data-etat="matrice"] .pj-cartes,
.pj-cadre[data-etat="systeme"] .pj-systeme, .pj-cadre[data-etat="chantiers"] .pj-chantiers, .pj-cadre[data-etat="specialite"] .pj-specialite { opacity: 1; visibility: visible; transition: opacity 0.55s ease 0.12s, visibility 0s; }

/* les cartes : une tâche par carte, bordure de gauche = nature du travail une fois triée */
.pj-mur, .pj-tri, .pj-matrice { position: absolute; inset: 0; }
.pj-mur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; align-content: start; }
.pj-tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.7rem; align-content: start; }
.pj-pile { display: flex; flex-direction: column; gap: 0.45rem; }
.pj-tri .pj-col[data-seg="c"] .pj-pile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-col-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 0 0 0.55rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(124, 152, 179, 0.22); font-size: 0.74rem; line-height: 1.25; }
.pj-col-h b { font-weight: 800; color: var(--off-white); }
.pj-col-h span { font-weight: 800; color: var(--golden); }
.pj-col-q { margin: -0.15rem 0 0.6rem; font-size: 0.68rem; line-height: 1.35; color: var(--soft-blue); }
.pj-tri .pj-col-h b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.45rem; vertical-align: 0.05em; }
.pj-tri .pj-col[data-seg="h"] .pj-col-h b::before { background: var(--light-blue); }
.pj-tri .pj-col[data-seg="c"] .pj-col-h b::before { background: rgba(249, 220, 92, 0.55); }
.pj-tri .pj-col[data-seg="a"] .pj-col-h b::before { background: var(--golden); box-shadow: 0 0 8px rgba(249, 220, 92, 0.6); }
.pj-mur .pj-col-h, .pj-tri .pj-col-h, .pj-tri .pj-col-q, .pj-mx > :not(.pj-points), .pj-leg { transition: opacity 0.4s ease; }
.pj-cadre:not([data-etat="mur"]) .pj-mur .pj-col-h,
.pj-cadre:not([data-etat="tri"]) .pj-tri .pj-col-h, .pj-cadre:not([data-etat="tri"]) .pj-tri .pj-col-q,
.pj-cadre:not([data-etat="matrice"]) .pj-mx > :not(.pj-points), .pj-cadre:not([data-etat="matrice"]) .pj-leg { opacity: 0; }
.pj-c { position: relative; display: flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0.42rem 0.6rem; font-size: 0.75rem; font-weight: 600; line-height: 1.22; color: var(--off-white); background: #12233A; border: 1px solid rgba(124, 152, 179, 0.24); border-left: 3px solid rgba(124, 152, 179, 0.55); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); transition: border-color 0.4s, background 0.4s, rotate 0.5s ease; }
/* au mur, chaque famille a sa couleur de bord, et les cartes tiennent un peu de travers comme des post-it */
.pj-c[data-fam="0"] { --fam: var(--golden); }
.pj-c[data-fam="1"] { --fam: var(--light-blue); }
.pj-c[data-fam="2"] { --fam: #E0A93A; }
.pj-c[data-fam="3"] { --fam: var(--off-white); }
.pj-cadre[data-etat="mur"] .pj-mur .pj-c { border-left-color: var(--fam, rgba(124, 152, 179, 0.55)); }
.pj-cadre[data-etat="mur"] .pj-mur .pj-c:nth-child(3n+1) { rotate: -1.4deg; }
.pj-cadre[data-etat="mur"] .pj-mur .pj-c:nth-child(3n+2) { rotate: 0.9deg; }
.pj-cadre[data-etat="mur"] .pj-mur .pj-c:nth-child(3n) { rotate: -0.4deg; }
.pj-c em { font-style: normal; }
.pj-c i { display: none; font-style: normal; }
.pj-cadre[data-etat="tri"] .pj-c[data-seg="h"] { border-left-color: var(--light-blue); }
.pj-cadre[data-etat="tri"] .pj-c[data-seg="c"] { border-left-color: rgba(249, 220, 92, 0.55); }
.pj-cadre[data-etat="tri"] .pj-c[data-seg="a"] { border-left-color: var(--golden); background: linear-gradient(90deg, rgba(249, 220, 92, 0.12), #12233A 70%); }
.pj-fantome { pointer-events: none; z-index: 3; }

/* la matrice impact et effort : les chantiers deviennent des pastilles, placées entre les bandes des libellés de quadrants */
.pj-matrice { display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; gap: 1.3rem; }
.pj-mx { position: relative; margin: 0 0 1.7rem 1.7rem; }
.pj-mx-fond { position: absolute; inset: 0; border-left: 1px solid rgba(124, 152, 179, 0.45); border-bottom: 1px solid rgba(124, 152, 179, 0.45); background: linear-gradient(rgba(249, 220, 92, 0.07), rgba(249, 220, 92, 0.07)) 0 0 / 50% 50% no-repeat; pointer-events: none; }
.pj-mx-fond::before, .pj-mx-fond::after { content: ''; position: absolute; }
.pj-mx-fond::before { left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(124, 152, 179, 0.3); }
.pj-mx-fond::after { top: 50%; left: 0; right: 0; border-top: 1px dashed rgba(124, 152, 179, 0.3); }
.pj-q { position: absolute; max-width: 46%; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--soft-blue); }
.pj-q.tl { left: 0.65rem; top: 0.55rem; color: var(--golden); }
.pj-q.tr { right: 0.65rem; top: 0.55rem; text-align: right; }
.pj-q.bl { left: 0.65rem; bottom: 0.55rem; }
.pj-q.br { right: 0.65rem; bottom: 0.55rem; text-align: right; }
.pj-ax { position: absolute; font-size: 0.68rem; font-weight: 600; color: var(--soft-blue); white-space: nowrap; }
.pj-ax-x { left: 0; right: 0; bottom: -1.45rem; text-align: center; }
.pj-ax-x::after { content: ' \2192'; }
.pj-ax-y { left: -0.95rem; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.pj-ax-y::after { content: ' \2192'; }
.pj-points { position: absolute; inset: 0; }
.pj-points .pj-c { rotate: none; box-shadow: none; position: absolute; left: calc(8% + var(--x) * 0.84%); top: calc(16% + (100 - var(--y)) * 0.66%); z-index: 2; width: 30px; height: 30px; min-height: 0; margin: -15px 0 0 -15px; padding: 0; justify-content: center; border: 1px solid rgba(172, 203, 225, 0.6); border-radius: 50%; background: var(--midnight); }
.pj-points .pj-c em { display: none; }
.pj-points .pj-c i { display: block; font-size: 0.78rem; font-weight: 800; color: var(--light-blue); }
.pj-points .pj-c[data-ok] { background: var(--golden); border-color: var(--golden); box-shadow: 0 0 18px rgba(249, 220, 92, 0.55); }
.pj-points .pj-c[data-ok] i { color: var(--midnight); }
.pj-leg { align-self: start; }
.pj-leg-t { margin: 0 0 0.7rem; font-size: 0.7rem; font-weight: 700; line-height: 1.4; color: var(--golden); }
.pj-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pj-legende li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; line-height: 1.3; color: var(--light-blue); }
.pj-legende i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(172, 203, 225, 0.55); font-style: normal; font-size: 0.64rem; font-weight: 800; }
.pj-legende li.ok { font-weight: 700; color: var(--off-white); }
.pj-legende li.ok i { background: var(--golden); border-color: var(--golden); color: var(--midnight); }
.pj-reserve[hidden] { display: none; }

/* jour 2 : le cockpit de l'équipe (même dossier que la section « liberté » de l'atelier) et ses outils */
.pj-systeme { display: flex; flex-direction: column; gap: 1rem; }
.pj-postes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; }
.pj-postes li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.7rem 0.3rem 0.55rem; border: 1px solid rgba(124, 152, 179, 0.22); background: var(--midnight); font-size: 0.7rem; font-weight: 700; color: var(--soft-blue); transition: border-color 0.4s, color 0.4s; }
.pj-postes i { position: relative; width: 26px; height: 17px; border: 2px solid rgba(124, 152, 179, 0.55); border-radius: 2px; transition: border-color 0.4s, box-shadow 0.4s; }
.pj-postes i::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 2px; margin-left: -5px; background: rgba(124, 152, 179, 0.55); transition: background 0.4s; }
.pj-postes li.lit { border-color: rgba(249, 220, 92, 0.45); color: var(--off-white); }
.pj-postes li.lit i { border-color: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.45); }
.pj-postes li.lit i::after { background: var(--golden); }
.pj-sys { flex: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); column-gap: 2.6rem; align-items: center; }
.pj-dossier { position: relative; padding: 1rem 1.1rem 1.1rem; 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.74rem; color: var(--light-blue); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.pj-dossier .ap-files li small { margin-left: 0.55rem; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; color: var(--golden); }
.pj-dossier .ap-files li:nth-last-child(-n+2) { color: var(--off-white); }
.pj-connecteurs { display: flex; flex-direction: column; gap: 0.55rem; }
.pj-con-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin: 0; font-size: 0.72rem; }
.pj-con-tete b { font-weight: 800; color: var(--off-white); }
.pj-con-tete span { color: var(--soft-blue); }
.pj-outils { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pj-outils li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem 0.4rem 0.45rem; border: 1px solid rgba(124, 152, 179, 0.22); background: var(--midnight); transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s; }
.pj-outils .mf-logo { width: 24px; height: 24px; }
.pj-outils li:not(.lit) .mf-logo::before { background: var(--soft-blue); }
.pj-outils li > b { font-size: 0.78rem; font-weight: 800; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-outils em { font-style: normal; font-size: 0.64rem; font-weight: 700; white-space: nowrap; }
.pj-outils em .a { color: var(--soft-blue); }
.pj-outils em .c { display: none; align-items: center; gap: 0.3rem; color: var(--golden); }
.pj-outils em .c::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--golden); box-shadow: 0 0 8px rgba(249, 220, 92, 0.85); }
.pj-outils li.lit em .a { display: none; }
.pj-outils li.lit em .c { display: inline-flex; }
.pj-outils li::before { content: ''; position: absolute; right: 100%; top: 50%; width: 2.6rem; height: 1px; background: linear-gradient(90deg, rgba(249, 220, 92, 0.45), rgba(124, 152, 179, 0.3)); transition: background 0.4s, box-shadow 0.4s; }
.pj-outils li.lit { border-color: rgba(249, 220, 92, 0.55); box-shadow: 0 0 30px rgba(249, 220, 92, 0.1); transform: translateX(-4px); }
.pj-outils li.lit::before { background: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.7); }
.pj-conf { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.7rem 0.9rem; border: 1px solid rgba(249, 220, 92, 0.3); background: rgba(249, 220, 92, 0.06); font-size: 0.78rem; font-weight: 700; color: var(--off-white); }
.pj-conf svg { flex: none; width: 16px; height: 16px; color: var(--golden); }

/* jour 3 : un atelier de 2 heures par chantier, chacun avec ce qu'il produit */
.pj-chantiers { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.pj-ch { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 12.5rem; gap: 0.9rem; align-items: center; padding: 0.8rem 0.9rem; border: 1px solid rgba(124, 152, 179, 0.2); background: rgba(8, 18, 29, 0.55); }
.pj-ch > i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-style: normal; font-size: 0.85rem; font-weight: 800; color: var(--midnight); background: var(--golden); box-shadow: 0 0 16px rgba(249, 220, 92, 0.45); }
.pj-ch b { display: block; font-size: 0.92rem; font-weight: 800; color: var(--off-white); }
.pj-ch-duree { display: inline-block; margin: 0.25rem 0 0.35rem; padding: 0.1rem 0.5rem; font-size: 0.64rem; font-weight: 700; color: var(--light-blue); border: 1px solid rgba(124, 152, 179, 0.25); border-radius: 100px; }
.pj-ch p { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--soft-blue); }
.pj-ui { align-self: stretch; min-height: 64px; padding: 0.55rem; border: 1px solid rgba(124, 152, 179, 0.18); background: rgba(13, 27, 42, 0.85); }
/* la synthèse du mois : les sources, la courbe qui se trace, le sens de chaque indicateur (aucun chiffre inventé) */
.pj-ui-rapport { display: flex; flex-direction: column; gap: 6px; }
.pj-r-tete { display: flex; align-items: center; gap: 4px; margin: 0; }
.pj-r-tete .mf-logo { width: 16px; height: 16px; }
.pj-r-tete b { margin-left: 4px; font-size: 0.62rem; font-weight: 800; color: var(--off-white); }
.pj-r-courbe { display: block; flex: 1; width: 100%; min-height: 24px; overflow: visible; }
.pj-r-courbe polyline { fill: none; stroke: var(--golden); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(249, 220, 92, 0.55)); }
.pj-r-kpi { display: flex; justify-content: space-between; gap: 4px; margin: 0; font-size: 0.56rem; font-weight: 700; color: var(--light-blue); }
.pj-r-kpi span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pj-r-kpi i { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.pj-r-kpi i.h { border-bottom: 6px solid var(--golden); }
.pj-r-kpi i.b { border-top: 6px solid var(--golden); }
/* un visuel validé, décliné dans les 4 formats des réseaux et des campagnes */
.pj-ui-formats { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.pj-ui-formats > span { position: relative; display: block; flex: none; overflow: hidden; border: 1px solid rgba(249, 220, 92, 0.6); background: #0B1A2B; }
.pj-ui-formats img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pj-ui-formats small { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; font-size: 0.5rem; font-weight: 800; line-height: 1.3; text-align: center; color: var(--midnight); background: rgba(249, 220, 92, 0.92); }
.pj-ui-formats .f916 { width: 32px; height: 57px; }
.pj-ui-formats .f45 { width: 40px; height: 50px; }
.pj-ui-formats .f11 { width: 44px; height: 44px; }
.pj-ui-formats .f169 { width: 54px; height: 30px; }
/* la newsletter : en-tête, illustration, titre, texte, bouton */
.pj-ui-mail { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pj-ui-mail span { display: block; height: 4px; background: rgba(172, 203, 225, 0.35); }
.pj-ui-mail img { display: block; width: 100%; height: 42px; object-fit: cover; border: 1px solid rgba(124, 152, 179, 0.25); }
.pj-ui-mail .m-logo { width: 28%; height: 6px; background: var(--golden); }
.pj-ui-mail .m-titre { width: 82%; height: 7px; background: var(--off-white); }
.pj-ui-mail .m-court { width: 58%; }
.pj-ui-mail .m-bouton { width: 40%; height: 10px; margin-top: 2px; background: var(--golden); }
/* les ateliers s'installent l'un après l'autre */
.pj-cadre .pj-ch { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pj-cadre[data-etat="chantiers"] .pj-ch { opacity: 1; transform: none; }
.pj-cadre[data-etat="chantiers"] .pj-ch:nth-child(2) { transition-delay: 0.15s; }
.pj-cadre[data-etat="chantiers"] .pj-ch:nth-child(3) { transition-delay: 0.3s; }
.pj-cadre:not([data-etat="chantiers"]) .pj-ui-rapport polyline { stroke-dashoffset: 300; }
.pj-cadre[data-etat="chantiers"] .pj-ui-rapport polyline { transition: stroke-dashoffset 1.6s ease 0.5s; }
.pj-cadre .pj-ui-formats > span { transform: scale(0.5); opacity: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; }
.pj-cadre[data-etat="chantiers"] .pj-ui-formats > span { transform: none; opacity: 1; }
.pj-cadre[data-etat="chantiers"] .pj-ui-formats > span:nth-child(1) { transition-delay: 0.55s; }
.pj-cadre[data-etat="chantiers"] .pj-ui-formats > span:nth-child(2) { transition-delay: 0.68s; }
.pj-cadre[data-etat="chantiers"] .pj-ui-formats > span:nth-child(3) { transition-delay: 0.81s; }
.pj-cadre[data-etat="chantiers"] .pj-ui-formats > span:nth-child(4) { transition-delay: 0.94s; }

/* jour 4 : la barre verticale du T, créative ou performance */
.pj-specialite { display: flex; flex-direction: column; gap: 1rem; }
.pj-sp { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.pj-voie { display: flex; flex-direction: column; padding: 1rem 1.1rem 1.15rem; border: 1px solid rgba(124, 152, 179, 0.22); background: rgba(8, 18, 29, 0.55); }
.pj-voie-k { margin: 0 0 0.75rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--golden); }
.pj-voie > b { display: block; margin-bottom: 0.7rem; font-size: 1rem; font-weight: 800; color: var(--off-white); }
/* parcours A : 3 créations réelles, en éventail (une animation, une publicité, un carrousel) */
.pj-eventail { position: relative; flex: 1; min-height: 120px; margin-bottom: 0.9rem; }
.pj-eventail img { position: absolute; left: 50%; bottom: 4px; width: auto; height: 90%; max-height: 210px; border: 1px solid rgba(249, 220, 92, 0.5); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); transform-origin: 50% 100%; translate: -50% 0; transition: translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.pj-eventail img:nth-child(2) { z-index: 2; }
.pj-cadre[data-etat="specialite"] .pj-eventail img:nth-child(1) { translate: -98% 0; rotate: -10deg; transition-delay: 0.3s; }
.pj-cadre[data-etat="specialite"] .pj-eventail img:nth-child(3) { translate: -2% 0; rotate: 10deg; transition-delay: 0.3s; }
/* parcours B : le budget par canal, réarbitré selon les résultats */
.pj-budget { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; min-height: 120px; margin-bottom: 0.9rem; padding: 0.7rem 0.75rem; border: 1px solid rgba(124, 152, 179, 0.2); background: rgba(13, 27, 42, 0.85); }
.pj-b-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 0 0 0.15rem; font-size: 0.62rem; }
.pj-b-tete span { font-weight: 800; color: var(--off-white); }
.pj-b-tete em { font-style: normal; font-weight: 700; color: var(--golden); }
.pj-budget > p:not(.pj-b-tete) { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.pj-budget .mf-logo { width: 20px; height: 20px; }
.pj-barre { position: relative; flex: 1; height: 10px; background: rgba(124, 152, 179, 0.14); }
.pj-barre::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--a); background: linear-gradient(90deg, rgba(249, 220, 92, 0.4), var(--golden)); box-shadow: 0 0 10px rgba(249, 220, 92, 0.3); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; }
.pj-cadre[data-etat="specialite"] .pj-barre::before { width: var(--b); }
.pj-budget .pj-r-courbe { flex: none; height: 26px; margin-top: 0.2rem; }
.pj-cadre:not([data-etat="specialite"]) .pj-budget polyline { stroke-dashoffset: 300; }
.pj-cadre[data-etat="specialite"] .pj-budget polyline { transition: stroke-dashoffset 1.6s ease 0.7s; }
.pj-voie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.38rem; }
.pj-voie li { position: relative; padding-left: 1.15rem; font-size: 0.78rem; line-height: 1.4; color: var(--light-blue); }
.pj-voie li::before { content: '\2713'; position: absolute; left: 0; font-weight: 700; color: var(--golden); }
.pj-groupe { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--ap-line); font-size: 0.85rem; font-weight: 700; color: var(--off-white); }
.pj-groupe b { font-family: var(--font-display); font-weight: 400; font-size: 2.6rem; line-height: 0.9; color: var(--golden); }
.pj-sieges { display: inline-flex; gap: 5px; margin-left: auto; align-self: center; }
.pj-sieges i { position: relative; width: 16px; height: 19px; }
.pj-sieges i::before, .pj-sieges i::after { content: ''; position: absolute; background: var(--golden); }
.pj-sieges i::before { left: 4px; top: 0; width: 8px; height: 8px; border-radius: 50%; }
.pj-sieges i::after { left: 0; bottom: 0; width: 16px; height: 8px; border-radius: 8px 8px 0 0; }

/* le lien vers les slides du pitch */
.pj-pitch { margin: 1.5rem 0 0; text-align: center; }
.pj-pitch .ap-slides { padding: 0.35rem 0; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--golden); background: none; border: 0; border-bottom: 1px solid rgba(249, 220, 92, 0.45); transition: border-color 0.3s; }
.pj-pitch .ap-slides:hover { border-bottom-color: var(--golden); }

/* mobile : chaque étape reçoit sa scène, figée dans son état, sans calques superposés */
.pj-cadre.pj-fige { height: auto; margin-top: 1.4rem; padding-bottom: 2.4rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.pj-cadre.pj-fige .pj-couche { position: relative; inset: auto; display: none; margin-top: 1rem; opacity: 1; visibility: visible; transition: none; }
.pj-cadre.pj-fige[data-etat="mur"] .pj-cartes, .pj-cadre.pj-fige[data-etat="tri"] .pj-cartes, .pj-cadre.pj-fige[data-etat="matrice"] .pj-cartes { display: block; }
.pj-cadre.pj-fige[data-etat="systeme"] .pj-systeme, .pj-cadre.pj-fige[data-etat="specialite"] .pj-specialite { display: flex; }
.pj-cadre.pj-fige[data-etat="chantiers"] .pj-chantiers { display: grid; }
.pj-cadre.pj-fige .pj-mur, .pj-cadre.pj-fige .pj-tri, .pj-cadre.pj-fige .pj-matrice { position: relative; inset: auto; display: none; }
.pj-cadre.pj-fige[data-etat="mur"] .pj-mur, .pj-cadre.pj-fige[data-etat="tri"] .pj-tri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pj-cadre.pj-fige[data-etat="matrice"] .pj-matrice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
.pj-cadre.pj-fige .pj-pile, .pj-cadre.pj-fige .pj-tri .pj-col[data-seg="c"] .pj-pile { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
.pj-cadre.pj-fige .pj-mx { justify-self: stretch; width: auto; aspect-ratio: 1 / 0.86; }
.pj-cadre.pj-fige .pj-sys { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
.pj-cadre.pj-fige .pj-postes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-cadre.pj-fige .pj-outils { grid-template-columns: minmax(0, 1fr); }
.pj-cadre.pj-fige .pj-outils li::before { display: none; }
.pj-cadre.pj-fige .pj-chantiers { grid-template-rows: none; }
.pj-cadre.pj-fige .pj-ch { grid-template-columns: 2rem minmax(0, 1fr); opacity: 1; transform: none; }
.pj-cadre.pj-fige .pj-ui { grid-column: 2; min-height: 56px; }
.pj-cadre.pj-fige .pj-ui-formats { justify-content: flex-start; }
.pj-cadre.pj-fige .pj-ui-formats > span { transform: none; opacity: 1; }
.pj-cadre.pj-fige .pj-sp { grid-template-columns: minmax(0, 1fr); }
.pj-cadre.pj-fige .pj-eventail { flex: none; height: 170px; }
.pj-cadre.pj-fige .pj-eventail img:nth-child(1) { translate: -98% 0; rotate: -10deg; }
.pj-cadre.pj-fige .pj-eventail img:nth-child(3) { translate: -2% 0; rotate: 10deg; }
.pj-cadre.pj-fige .pj-barre::before { width: var(--b); transition: none; }
.pj-cadre.pj-fige polyline { stroke-dashoffset: 0; }
.pj-cadre.pj-fige .pj-exemple { bottom: 0.8rem; }

/* ═══════════════════════════════════════
   L'ESPACE APPRENANTS : visite guidée des captures réelles. À gauche les 4 vues, une seule dépliée
   avec sa légende numérotée ; à droite la capture et ses repères aux mêmes numéros. La capture se
   règle sur la hauteur de l'écran pour tenir entière sous le titre de la section.
   ═══════════════════════════════════════ */
.mf-espace { position: relative; background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-light) 45%, var(--midnight) 100%); }
.mf-espace .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.es-visite { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); column-gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
.es-vues { border-top: 1px solid var(--ap-line); }
.es-vue { position: relative; border-bottom: 1px solid var(--ap-line); }
.es-vue::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--golden); transform: scaleY(0); transform-origin: top; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.es-vue.est-active::before { transform: scaleY(1); }
.es-vue h3 { margin: 0; font: inherit; }
.es-vue-btn { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 1rem 0.6rem 1rem 1.1rem; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: left; color: var(--light-blue); background: transparent; border: 0; cursor: pointer; transition: color 0.25s, background 0.25s; }
.es-vue-btn:hover { color: var(--off-white); background: rgba(27, 73, 101, 0.14); }
.es-vue-btn:focus-visible { outline: 2px solid var(--golden); outline-offset: -2px; }
.es-vue-btn svg { flex: none; width: 20px; height: 20px; color: var(--golden); opacity: 0.55; transition: opacity 0.25s; }
.es-vue-btn .px-tete { width: 26px; height: 26px; margin: 0; border-width: 1px; background-position: -8.67px -2.67px; background-size: 394px 94px; opacity: 0.7; transition: opacity 0.25s; }
.es-vue.est-active .es-vue-btn { color: var(--off-white); }
.es-vue.est-active .es-vue-btn svg, .es-vue.est-active .es-vue-btn .px-tete { opacity: 1; }
/* la légende se déplie en douceur (rangée de grille 0fr → 1fr) ; repliée, elle sort de l'arbre d'accessibilité */
.es-cles-cadre { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.45s; }
.es-vue.est-active .es-cles-cadre { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.es-cles { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0.6rem 0 1.1rem; }
.es-cles li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 0.75rem; align-items: start; margin-bottom: 0.7rem; font-size: 0.9rem; line-height: 1.5; color: var(--soft-blue); transition: color 0.2s; }
.es-cles li:last-child { margin-bottom: 1.15rem; }
.es-cles li::before { content: attr(data-repere); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.05rem; border-radius: 50%; font-size: 0.72rem; font-weight: 800; line-height: 1; color: var(--midnight); background: var(--golden); }
.es-cles li:hover { color: var(--off-white); }
.es-ecrans { position: relative; width: 100%; max-width: calc((100vh - 15rem) * 1.6); max-width: calc((100svh - 15rem) * 1.6); }
.es-ecrans > .corner-plus { z-index: 4; }
.es-ecran[hidden] { display: none; }
/* écran large : la visite reste collée à l'écran pendant que le défilement passe d'une vue à l'autre (piste et hauteur posées par le script) */
.es-piste.defile .es-visite { position: sticky; }
.es-ecran { animation: esFondu 0.45s both; }
.es-ecran .ap-shot.ck-proof-item { opacity: 1; transform: none; }
/* les repères : posés en % de la capture, ils apparaissent l'un après l'autre à chaque vue */
.es-repere { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; font-size: 0.8rem; font-weight: 800; line-height: 1; color: var(--midnight); background: var(--golden); box-shadow: 0 0 0 4px rgba(249, 220, 92, 0.22), 0 6px 18px rgba(0, 0, 0, 0.45); pointer-events: none; animation: esRepere 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.25s + var(--i) * 0.09s); transition: scale 0.25s, box-shadow 0.25s; }
.es-repere.allume { scale: 1.25; box-shadow: 0 0 0 7px rgba(249, 220, 92, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45); }
@keyframes esFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes esRepere { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
/* la mascotte se pose dans la marge de droite quand la visite est posée sur la page (constante SCENE du script) */
@media (min-width: 900px) and (min-height: 800px) {
    .es-visite { margin-right: 7.5rem; }
}
.es-points { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ap-line); border-left: 1px solid var(--ap-line); }
.es-points li { position: relative; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.3rem 1.2rem 1.4rem; border-right: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); transition: background 0.3s; }
.es-points li:hover { background: rgba(27, 73, 101, 0.14); }
.es-points svg { width: 22px; height: 22px; margin-bottom: 0.35rem; color: var(--golden); }
.es-points b { font-size: 0.98rem; font-weight: 800; line-height: 1.3; color: var(--off-white); }
.es-points li > span:last-child { font-size: 0.86rem; line-height: 1.55; color: var(--soft-blue); }
.es-note { margin: 1rem 0 0; font-size: 0.78rem; color: var(--soft-blue); }

/* ── LA COMMUNAUTÉ WHATSAPP : capture réelle retravaillée (noms, numéros et photos floutés), repères
   numérotés comme la visite, qui apparaissent quand le bloc entre à l'écran ── */
.es-com { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: center; margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--ap-line); }
.es-com-shot { position: relative; }
.es-com-shot > .corner-plus { z-index: 4; }
.es-com-shot .ap-shot.ck-proof-item { opacity: 1; transform: none; }
.es-com-note { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--soft-blue); }
.es-com-titre { margin: 0 0 1rem; font-size: clamp(1.7rem, 2.7vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--off-white); }
.es-com-titre em { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 1.18em; color: var(--golden); }
.es-com-texte > p { margin: 0 0 1.5rem; max-width: 46ch; font-size: 1rem; line-height: 1.6; color: var(--light-blue); }
.es-com-cles { padding: 0; }
.es-com-cles li { font-size: 0.95rem; }
.es-com .es-repere { animation: none; opacity: 0; }
.es-com.visible .es-repere { opacity: 1; animation: esRepere 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.4s + var(--i) * 0.12s); }

/* le visage de Jessy en pixel art, découpé dans le sprite (liste de l'espace, tiroir de conversation) */
.px-tete, .jx-face { display: block; flex: none; width: 40px; height: 40px; border: 2px solid rgba(249, 220, 92, 0.45); background: #132A42 url('../marketeur-full-stack/jessy-sprite.png') -13px -4px / 591px 141px no-repeat; image-rendering: pixelated; }
.px-tete { margin-bottom: 0.35rem; }

/* ── OFFRE : le prix par personne, deux boutons, le simulateur de retour ── */
.mf-par-tete { margin: 0.4rem 0 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; color: var(--golden); white-space: nowrap; }
.ap-main-offer .oc-btn + .oc-btn { margin-top: 0.75rem; }
/* ombre courte et marge basse : la section offre rogne ce qui dépasse, une ombre longue y laisserait un bord */
.mf-roi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1000px; margin: var(--space-lg) auto 1.5rem; border: 1px solid rgba(124, 152, 179, 0.2); background: var(--midnight); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3); }
.mf-roi-in { padding: clamp(1.6rem, 3vw, 2.4rem); }
.mf-roi-in h3 { margin: 0 0 0.5rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; color: var(--off-white); }
.mf-roi-in h3 em { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 1.12em; color: var(--golden); }
.mf-roi-intro { margin: 0 0 1.4rem; font-size: 0.88rem; color: var(--soft-blue); }
.mf-roi-champ { margin-bottom: 1.15rem; }
.mf-roi-champ label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.45rem; font-size: 0.86rem; font-weight: 600; line-height: 1.4; color: var(--light-blue); }
.mf-roi-champ output { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--golden); }
.mf-roi-champ input[type="number"] { width: 100%; padding: 0.75rem 0.9rem; font: inherit; font-size: 1rem; font-weight: 700; color: var(--off-white); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(124, 152, 179, 0.3); border-radius: 0; }
.mf-roi-champ input[type="number"]:focus { outline: none; border-color: var(--golden); box-shadow: 0 0 0 3px var(--golden-dim); }
.mf-roi-champ input[type="range"] { width: 100%; accent-color: var(--golden); }
.mf-roi-out { display: flex; flex-direction: column; padding: clamp(1.6rem, 3vw, 2.4rem); border-left: 1px solid rgba(249, 220, 92, 0.3); background: linear-gradient(160deg, rgba(249, 220, 92, 0.09), rgba(249, 220, 92, 0.01) 70%), var(--midnight); }
.mf-roi-k { margin: 0 0 0.6rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--golden); }
.mf-roi-big { margin: 0 0 1.3rem; font-size: 1.05rem; font-weight: 700; color: var(--off-white); }
.mf-roi-big b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.8rem, 4.5vw, 3.6rem); line-height: 1; color: var(--golden); }
.mf-roi-lignes { border-top: 1px solid var(--ap-line); }
.mf-roi-lignes p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--ap-line); font-size: 0.86rem; color: var(--light-blue); }
.mf-roi-lignes b { font-weight: 800; color: var(--off-white); white-space: nowrap; }
.mf-roi-autres { margin: 1rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--light-blue); }
.mf-roi-autres b { color: var(--off-white); }
.mf-roi-note { margin: auto 0 0; padding-top: 1rem; font-size: 0.76rem; line-height: 1.5; color: var(--soft-blue); }
.mf-roi > .corner-plus { z-index: 4; }

/* ── APPEL FINAL : deux boutons, et le visage de la personne qu'on appelle ── */
.mf-final-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem 1.8rem; margin-top: 1.8rem; }
.mf-avec { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 1.3rem 0 0; font-size: 0.86rem; color: var(--soft-blue); }
.mf-avec img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--midnight), 0 0 0 3px rgba(249, 220, 92, 0.4); }
.mf-avec b { color: var(--off-white); }


/* ═══════════════════════════════════════
   JESSY, LA MASCOTTE : il suit la visite et se pose sur la page (scénario dans
   marketeur-full-stack.js), commente, puis ouvre sa conversation au clic.
   Planche de 19 images de 52 x 102 px (jessy-mascotte.png, assemblée par le script
   studio-contenu/scripts/assembler-mascotte.py) : 0 debout, 1 clin d'œil, 2 salut, 3 pouce,
   4 assis, 5 à 8 marche vers la droite, 9 parle, 10 explique, 11 montre à droite, 12 chute,
   13 saut, 14 atterrit, 15 réfléchit, 16 à l'ordinateur, 17 hausse les épaules, 18 victoire.
   Affichée à 1,5 fois sur ordinateur (--u : 1,5 px par pixel), à sa taille sur mobile.
   ═══════════════════════════════════════ */
.jx { --u: 1.5px; position: fixed; left: 0; top: 0; z-index: 95; width: calc(52 * var(--u)); height: calc(102 * var(--u)); pointer-events: none; will-change: transform; }
.jx-corps { position: absolute; inset: 0; transform-origin: 50% 100%; }
.jx.cache { visibility: hidden; }
.jx-spr { position: absolute; inset: 0; background: url('../marketeur-full-stack/jessy-mascotte.png') 0 0 / calc(988 * var(--u)) calc(102 * var(--u)) no-repeat; background-position: calc(var(--f, 0) * -52 * var(--u)) 0; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); transform-origin: 50% 100%; }
.jx.gauche .jx-spr { transform: scaleX(-1); }
.jx-btn { position: absolute; left: 14%; right: 14%; top: 4%; bottom: 0; padding: 0; border: 0; background: none; pointer-events: auto; }
.jx-btn .jx-spr { left: -19.4%; right: -19.4%; top: -4.2%; }
.jx-btn:hover .jx-spr { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)) drop-shadow(0 0 12px rgba(249, 220, 92, 0.5)); }
.jx-btn:focus-visible { outline: 2px solid var(--golden); outline-offset: 4px; }
.jx-ombre { position: absolute; left: calc(25 * var(--u)); bottom: calc(-3 * var(--u)); width: calc(34 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-17 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, 0.42); transform-origin: 50% 50%; }
/* le parachute : dessiné dans les unités de la case, suspentes attachées aux poings de l'image 18 */
.jx-para { position: absolute; left: calc(-12 * var(--u)); top: calc(-64 * var(--u)); width: calc(76 * var(--u)); height: calc(74 * var(--u)); opacity: 0; transform-origin: 50% 100%; pointer-events: none; }
.jx-para svg { display: block; width: 100%; height: 100%; }
.jx-bang { position: absolute; left: calc(25 * var(--u)); top: -26px; width: 20px; margin-left: -10px; font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 700; line-height: 1; color: var(--golden); text-shadow: 2px 2px 0 #000; opacity: 0; pointer-events: none; }
.jx-bang.on { animation: pxBang 0.9s steps(6) forwards; }
/* hors visite posée (fenêtre de moins de 900 x 800 px, mobile, moins d'animations) : Jessy se range dans
   un médaillon du coin bas droit (au-dessus de la pastille de rendez-vous sur mobile), comme un bouton de
   discussion ; ses bulles en sortent. Le personnage en pied reste réservé à la visite posée sur la page. */
.jx-medaillon { display: none; }
.jx.coin { width: 64px; height: 64px; }
.jx.coin .jx-ombre, .jx.coin .jx-para, .jx.coin .jx-bang, .jx.coin .jx-spr { display: none; }
.jx.coin .jx-btn { inset: 0; border-radius: 50%; }
.jx.coin .jx-medaillon { display: block; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(249, 220, 92, 0.6); background: #132A42 url('../marketeur-full-stack/jessy-sprite.png') -21.7px -6.7px / 985px 235px no-repeat; image-rendering: pixelated; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(13, 27, 42, 0.55); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.jx.coin .jx-btn:hover .jx-medaillon { border-color: var(--golden); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(13, 27, 42, 0.55), 0 0 22px rgba(249, 220, 92, 0.45); transform: scale(1.05); }
@keyframes pxBang { 0% { opacity: 0; transform: translateY(6px) scale(0.5); } 20% { opacity: 1; transform: translateY(-4px) scale(1.2); } 35% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
/* la bouffée de pixels quand il apparaît ou disparaît */
.jx-bouffee { position: absolute; left: calc(25 * var(--u)); bottom: calc(40 * var(--u)); width: 7px; height: 7px; margin-left: -3px; box-shadow: 0 -22px 0 #F9DC5C, 16px -16px 0 #FAFAFA, 22px 0 0 #F9DC5C, 16px 16px 0 #ACCBE1, 0 22px 0 #F9DC5C, -16px 16px 0 #FAFAFA, -22px 0 0 #F9DC5C, -16px -16px 0 #ACCBE1; animation: jxBouffee 0.5s steps(5) forwards; pointer-events: none; }
@keyframes jxBouffee { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(2.6); } }
/* la bulle : elle suit le personnage, s'ouvre du côté où il reste de la place */
.jx-bulle { position: fixed; left: 0; top: 0; z-index: 96; width: max-content; max-width: 270px; margin: 0; padding: 12px 34px 12px 16px; background: #0B1A2B; border: 2px solid var(--golden); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); font-size: 0.86rem; line-height: 1.45; color: var(--off-white); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; }
.jx-bulle.on { visibility: visible; pointer-events: auto; animation: jxPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.jx-bulle.on.sort { animation: jxSort 0.2s ease-in forwards; pointer-events: none; }
@keyframes jxSort { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.9; } }
@keyframes jxPop { 0% { opacity: 0; scale: 0.55; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
.jx-bulle::after { content: ''; position: absolute; bottom: -10px; width: 14px; height: 10px; background: var(--golden); }
.jx-bulle.d { transform-origin: 12% 100%; }
.jx-bulle.d::after { left: 22px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.jx-bulle.g { transform-origin: 88% 100%; }
.jx-bulle.g::after { right: 22px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.jx-reste { color: transparent; }
.jx-x { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; font: inherit; font-size: 1.05rem; line-height: 1; color: var(--soft-blue); }
.jx-x:hover { color: var(--golden); }
/* le tiroir de conversation */
.jx-chat { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 140; display: flex; flex-direction: column; width: min(400px, calc(100vw - 2rem)); height: min(600px, calc(100vh - 7rem)); background: var(--midnight); border: 1px solid rgba(249, 220, 92, 0.45); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(249, 220, 92, 0.08); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.25s, transform 0.3s, visibility 0s linear 0.3s; }
.jx-chat.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.jx-chat-tete { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--ap-line); background: linear-gradient(160deg, rgba(27, 73, 101, 0.42), rgba(13, 27, 42, 0.97) 70%); }
.jx-chat-tete div { flex: 1; min-width: 0; }
.jx-chat-tete b { display: block; font-size: 0.95rem; font-weight: 800; color: var(--off-white); }
.jx-chat-tete small { display: block; margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.35; color: var(--soft-blue); }
.jx-chat-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(124, 152, 179, 0.3); background: none; font: inherit; font-size: 1.2rem; line-height: 1; color: var(--light-blue); transition: border-color 0.2s, color 0.2s; }
.jx-chat-x:hover, .jx-chat-x:focus-visible { border-color: var(--golden); color: var(--golden); outline: none; }
.jx-fil { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; }
.jx-m { max-width: 88%; margin: 0; padding: 0.65rem 0.85rem; font-size: 0.88rem; line-height: 1.55; color: var(--off-white); white-space: pre-line; }
.jx-m.lui { align-self: flex-start; background: #12233A; border: 1px solid rgba(124, 152, 179, 0.22); }
.jx-m.moi { align-self: flex-end; background: rgba(249, 220, 92, 0.1); border: 1px solid rgba(249, 220, 92, 0.38); }
.jx-rdv { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem; background: var(--golden); color: var(--midnight); font-size: 0.82rem; font-weight: 800; text-decoration: none; border-radius: var(--radius-ui); box-shadow: 0 8px 24px rgba(249, 220, 92, 0.22); transition: transform 0.2s, box-shadow 0.2s; }
.jx-rdv:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(249, 220, 92, 0.32); }
.jx-rdv svg { width: 15px; height: 15px; }
.jx-attente { align-self: flex-start; display: inline-flex; gap: 5px; padding: 0.8rem 0.9rem; background: #12233A; border: 1px solid rgba(124, 152, 179, 0.22); }
.jx-attente i { width: 6px; height: 6px; background: var(--golden); animation: jxPoint 1s steps(2) infinite; }
.jx-attente i:nth-child(2) { animation-delay: 0.2s; }
.jx-attente i:nth-child(3) { animation-delay: 0.4s; }
@keyframes jxPoint { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.jx-sugg { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.85rem; }
.jx-sugg[hidden] { display: none; }
.jx-sugg button { padding: 0.42rem 0.75rem; border: 1px solid rgba(249, 220, 92, 0.35); border-radius: 100px; background: none; font: inherit; font-size: 0.76rem; line-height: 1.3; color: var(--light-blue); text-align: left; transition: border-color 0.2s, color 0.2s; }
.jx-sugg button:hover, .jx-sugg button:focus-visible { border-color: var(--golden); color: var(--off-white); outline: none; }
.jx-form { display: flex; border-top: 1px solid var(--ap-line); }
.jx-form input { flex: 1; min-width: 0; padding: 0.95rem 1rem; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.03); font: inherit; font-size: 0.92rem; color: var(--off-white); }
.jx-form input::placeholder { color: var(--soft-blue); }
.jx-form input:focus { outline: none; background: rgba(249, 220, 92, 0.05); }
.jx-form button { flex: none; padding: 0 1.15rem; border: 0; border-radius: 0; background: var(--golden); font: inherit; font-size: 0.85rem; font-weight: 800; color: var(--midnight); }
.jx-form button:disabled, .jx-form input:disabled { opacity: 0.55; }
.jx-pied { margin: 0; padding: 0.6rem 1rem 0.8rem; border-top: 1px solid var(--ap-line); font-size: 0.68rem; line-height: 1.45; color: var(--soft-blue); }
.jx-pied a { color: var(--golden); }
.jx-voile { display: none; }

/* ═══════════════════════════════════════
   LE DÉFILEMENT
   Le défilement fluide (Lenis) est réglé pour tout le site : shared.js et main.css.
   Ici, les animations liées au défilement (natives, animation-timeline) : le profil en T se trace
   et les logos des compétences se posent au rythme de la page, en avant comme en arrière.
   Sans prise en charge, le script garde la version déclenchée une fois (classes mf-anim et in).
   ═══════════════════════════════════════ */

@keyframes mfBarre { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mfTige { from { transform: scaleY(0); } to { transform: none; } }
@keyframes mfApparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mfPose { 0% { opacity: 0; transform: scale(0.3) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* le T : une ligne de temps commune, du moment où il entre à celui où il est au centre */
        .mf-t { view-timeline: --mft block; }
        .mf-t-leg { animation: mfApparait linear both; animation-timeline: --mft; animation-range: cover 10% cover 16%; }
        .mf-t-bar { animation: mfBarre linear both; animation-timeline: --mft; animation-range: cover 12% cover 30%; }
        .mf-t-row li { animation: mfApparait linear both; animation-timeline: --mft; }
        .mf-t-ic { animation: mfPose linear both; animation-timeline: --mft; }
        .mf-t-row.front li:nth-child(1) { animation-range: cover 17% cover 21%; }
        .mf-t-row.front li:nth-child(2) { animation-range: cover 20% cover 24%; }
        .mf-t-row.front li:nth-child(3) { animation-range: cover 23% cover 27%; }
        .mf-t-row.front li:nth-child(4) { animation-range: cover 26% cover 30%; }
        .mf-t-row.front li:nth-child(5) { animation-range: cover 29% cover 33%; }
        .mf-t-row.front li:nth-child(1) .mf-t-ic { animation-range: cover 19% cover 24%; }
        .mf-t-row.front li:nth-child(2) .mf-t-ic { animation-range: cover 22% cover 27%; }
        .mf-t-row.front li:nth-child(3) .mf-t-ic { animation-range: cover 25% cover 30%; }
        .mf-t-row.front li:nth-child(4) .mf-t-ic { animation-range: cover 28% cover 33%; }
        .mf-t-row.front li:nth-child(5) .mf-t-ic { animation-range: cover 31% cover 36%; }
        .mf-t-row.back.gauche li:nth-child(1) { animation-range: cover 31% cover 35%; }
        .mf-t-row.back.gauche li:nth-child(2) { animation-range: cover 33% cover 37%; }
        .mf-t-row.back.droite li:nth-child(1) { animation-range: cover 35% cover 39%; }
        .mf-t-row.back.droite li:nth-child(2) { animation-range: cover 37% cover 41%; }
        .mf-t-row.back.droite li:nth-child(3) { animation-range: cover 39% cover 43%; }
        .mf-t-row.back.gauche li:nth-child(1) .mf-t-ic { animation-range: cover 33% cover 38%; }
        .mf-t-row.back.gauche li:nth-child(2) .mf-t-ic { animation-range: cover 35% cover 40%; }
        .mf-t-row.back.droite li:nth-child(1) .mf-t-ic { animation-range: cover 37% cover 42%; }
        .mf-t-row.back.droite li:nth-child(2) .mf-t-ic { animation-range: cover 39% cover 44%; }
        .mf-t-row.back.droite li:nth-child(3) .mf-t-ic { animation-range: cover 41% cover 46%; }
        .mf-t-stem { transform-origin: 50% 0; animation: mfTige linear both; animation-timeline: --mft; animation-range: cover 34% cover 48%; }
        .mf-t-stem > * { animation: mfApparait linear both; animation-timeline: --mft; animation-range: cover 44% cover 52%; }
        /* les logos des compétences : chacun se pose en entrant, l'un après l'autre sur sa ligne */
        .mf-col.reveal-late .mf-logo { transition: none; animation: mfPose linear both; animation-timeline: view(); animation-range: cover 14% cover 26%; }
        .mf-col .mf-logos .mf-logo:nth-child(2) { animation-range: cover 16% cover 28%; }
        .mf-col .mf-logos .mf-logo:nth-child(3) { animation-range: cover 18% cover 30%; }
        .mf-col .mf-logos .mf-logo:nth-child(4) { animation-range: cover 20% cover 32%; }
    }
}

/* la visite posée sur la page demande 800 px de haut (constante SCENE du script) :
   en dessous, la mascotte vit dans le coin, à sa taille */
@media (max-height: 799px) {
    .jx { --u: 1px; }
}
/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .es-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .mf-stack { grid-template-columns: 1fr 1fr; }
    .mf-core { grid-column: 1 / -1; grid-row: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
    .mf-core-note { flex-basis: 100%; }
    .mf-t { grid-template-columns: 140px 1fr 220px 1fr; column-gap: 1rem; }
    .mf-t-row li { font-size: 0.9rem; }
    .mf-t-ic { width: 40px; height: 40px; }
    .pj-matrice { grid-template-columns: minmax(0, 1fr) 10.5rem; }
}
@media (max-width: 899px) {
    .pj { grid-template-columns: minmax(0, 1fr); }
    .pj-scene { display: none; }
    .pj-etape { padding-bottom: 2.6rem; }
    .es-visite { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
    .es-com { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
    .es-com-texte { order: -1; }
    .ap-facts.mf-facts-3 { grid-template-columns: repeat(2, 1fr); }
    .ap-facts.mf-facts-3 .ap-fact:nth-of-type(3) { grid-column: 1 / -1; }
    .jx { --u: 1px; }
    .jx-bulle { max-width: 230px; font-size: 0.8rem; }
    .jx-chat { left: 0; right: 0; bottom: 0; width: auto; height: min(84vh, 640px); border-left: 0; border-right: 0; border-bottom: 0; }
    .jx-voile.on { display: block; position: fixed; inset: 0; z-index: 139; background: rgba(8, 18, 29, 0.62); }
    .mf-roi { grid-template-columns: minmax(0, 1fr); }
    .mf-roi-out { border-left: none; border-top: 1px solid rgba(249, 220, 92, 0.3); }
}
@media (max-width: 760px) {
    .mf-stack { grid-template-columns: 1fr; }
    .mf-t { grid-template-columns: 1fr; grid-template-areas: "lf" "rf" "bar" "lb" "bg" "bd" "st"; row-gap: 0; }
    .mf-t-leg { text-align: left; }
    .mf-t-leg.front { padding-bottom: 0.8rem; }
    .mf-t-row { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 1.2rem; }
    .mf-t-row.front { padding-bottom: 1rem; }
    .mf-t-row.back { padding-top: 0.8rem; justify-content: flex-start; }
    .mf-t-row.back.droite { padding-top: 0.5rem; }
    .mf-t-row li::after, .mf-t-row li::before { display: none; }
    .mf-t-row li, .mf-t-row.back li { flex-direction: row; gap: 0.5rem; }
    .mf-t-ic { width: 32px; height: 32px; }
    .mf-t-ic svg { width: 16px; height: 16px; }
    .mf-skills li { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .mf-skills li::before { top: 1.45rem; margin-top: 0; }
    .mf-t-stem { min-height: 220px; width: 70%; margin: 1.6rem auto 0; }
    .mf-t-spec { font-size: 2.2rem; }
    .ap-hero .dm-thumb .ap-play { width: 60px; height: 60px; }
    .es-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .mf-par-tete { white-space: normal; text-wrap: balance; }
    .es-points { grid-template-columns: minmax(0, 1fr); }
    .es-vue-btn { padding: 0.9rem 0.4rem 0.9rem 0.9rem; }
    .es-cles { padding: 0 0.4rem 0 0.9rem; }
    .es-repere { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 0.68rem; box-shadow: 0 0 0 3px rgba(249, 220, 92, 0.22), 0 4px 12px rgba(0, 0, 0, 0.45); }
    .pj-quand b { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .jx-bulle.on, .jx-bang.on, .jx-bouffee { animation: none; }
    .es-ecran, .es-repere { animation: none; }
    .es-com .es-repere { opacity: 1; }
    .es-cles-cadre, .es-vue::before { transition: none; }
    .jx-bulle.on { opacity: 1; }
    .jx-chat, .jx-chat.on { transition: none; }
    .pj-cadre .pj-ch, .pj-couche, .pj-outils li, .pj-outils li::before, .pj-c, .pj-eventail img, .pj-barre::before, .pj-r-courbe polyline, .pj-ui-formats > span { transition: none; }
    .mf-col.reveal-late .mf-logo { transition: none; }
}