/* Installer le kit « Le cerveau de marque » en 5 gestes : animation HTML (créée et refaite le 2026-10-25).
   Source unique : marketing/ateliers/cerveau-de-marque/landing/kit-anim/. Copiée telle quelle dans
   site/assets/css/kit-anim.css (landing FR et EN) et en fin de deck/deck.css (slide du module 3).
   La fenêtre reprend l'interface réelle de l'application Claude, onglet Code (captures du 2026-10-25) :
   gris neutres, bouton Code en haut, liste des environnements, menu « Autorisations · cette session ».
   Tailles en em : le conteneur fixe la taille (16 px sur le site, 21 px dans le deck).
   Sans data-step (pas de script, impression, mouvement réduit) : l'état final, les 5 gestes faits. */

.ka { --ka-navy: #0D1B2A; --ka-gold: #F9DC5C; --ka-blue: #ACCBE1; --ka-body: #B7C6D5; --ka-muted: #8699AD; --ka-light: #FAFAFA;
      --ka-rule: rgba(250,250,250,.12);
      /* interface de l'application Claude */
      --ui-main: #1D1D1D; --ui-side: #212121; --ui-bar: #1A1A1A; --ui-line: #303030; --ui-hover: #333333; --ui-menu: #2A2A2A;
      --ui-txt: #ECECEC; --ui-mut: #9B9B9B; --ui-check: #4C8DFF;
      display: grid; grid-template-columns: 15em 1fr; gap: 2.2em; align-items: center;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ka-light); text-align: left; }
.ka * { box-sizing: border-box; }
.ka p { margin: 0; }
.ka-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* les 5 gestes */
.ka-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9em; }
.ka-steps li { display: grid; grid-template-columns: 2em 1fr; gap: .8em; align-items: center; font-size: 1em; line-height: 1.3; color: var(--ka-muted); transition: color .4s; }
.ka-steps .n { width: 2em; height: 2em; border-radius: 50%; border: 1.5px solid var(--ka-rule); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9em; color: var(--ka-muted); transition: all .4s; }
.ka-steps code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9em; color: var(--ka-gold); }
.ka:not([data-step]) .ka-steps li,
.ka[data-step="2"] .ka-steps li:nth-child(-n+1), .ka[data-step="3"] .ka-steps li:nth-child(-n+2),
.ka[data-step="4"] .ka-steps li:nth-child(-n+3), .ka[data-step="5"] .ka-steps li:nth-child(-n+4) { color: var(--ka-body); }
.ka:not([data-step]) .ka-steps .n,
.ka[data-step="2"] .ka-steps li:nth-child(-n+1) .n, .ka[data-step="3"] .ka-steps li:nth-child(-n+2) .n,
.ka[data-step="4"] .ka-steps li:nth-child(-n+3) .n, .ka[data-step="5"] .ka-steps li:nth-child(-n+4) .n { border-color: rgba(249,220,92,.5); color: var(--ka-gold); }
.ka[data-step="1"] .ka-steps li:nth-child(1), .ka[data-step="2"] .ka-steps li:nth-child(2), .ka[data-step="3"] .ka-steps li:nth-child(3),
.ka[data-step="4"] .ka-steps li:nth-child(4), .ka[data-step="5"] .ka-steps li:nth-child(5) { color: var(--ka-light); font-weight: 700; }
.ka[data-step="1"] .ka-steps li:nth-child(1) .n, .ka[data-step="2"] .ka-steps li:nth-child(2) .n, .ka[data-step="3"] .ka-steps li:nth-child(3) .n,
.ka[data-step="4"] .ka-steps li:nth-child(4) .n, .ka[data-step="5"] .ka-steps li:nth-child(5) .n { background: var(--ka-gold); border-color: var(--ka-gold); color: var(--ka-navy); box-shadow: 0 0 1.2em rgba(249,220,92,.45); }

/* la fenêtre */
.ka-win { position: relative; aspect-ratio: 16 / 10; font-size: 1.05em; border: 1px solid #3A3A3A; border-radius: .7em; background: var(--ui-main); overflow: hidden; box-shadow: 0 2em 4em rgba(0,0,0,.5); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ui-txt); }
.ka-win svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ka-bar { position: absolute; left: 0; right: 0; top: 0; height: 2.4em; display: flex; align-items: center; gap: .45em; padding: 0 .9em; background: var(--ui-bar); }
.ka-bar > i { width: .68em; height: .68em; border-radius: 50%; }
.ka-bar > i.r { background: #FF5F57; } .ka-bar > i.y { background: #FEBC2E; } .ka-bar > i.g { background: #28C840; }
.ka-nav { display: flex; gap: .35em; margin-left: .45em; color: var(--ui-mut); }
.ka-nav svg { width: .9em; height: .9em; }
.ka-seg { display: flex; gap: .1em; margin-left: .45em; padding: .15em; border-radius: .45em; background: #262626; }
.ka-seg b { display: flex; padding: .22em .4em; border-radius: .35em; color: var(--ui-mut); }
.ka-seg svg { width: .9em; height: .9em; }
.ka-seg b.code { background: #3A3A3A; color: var(--ui-txt); }
.ka-titre { position: absolute; left: max(30%, 12.5em); font-size: .82em; color: var(--ui-mut); }
.ka-titre span { transition: opacity .4s; }
.ka-titre .t2 { position: absolute; left: 0; white-space: nowrap; opacity: 0; }
.ka-body { position: absolute; left: 0; right: 0; top: 2.4em; bottom: 0; }

/* qui est visible à quelle étape */
.ka-sc, .ka-app, .ka-nav, .ka-seg { opacity: 0; transition: opacity .45s; }
.ka[data-step="1"] .s1, .ka[data-step="2"] .s2 { opacity: 1; }
.ka:not([data-step]) .ka-app, .ka[data-step="3"] .ka-app, .ka[data-step="4"] .ka-app, .ka[data-step="5"] .ka-app,
.ka:not([data-step]) .ka-nav, .ka[data-step="3"] .ka-nav, .ka[data-step="4"] .ka-nav, .ka[data-step="5"] .ka-nav,
.ka:not([data-step]) .ka-seg, .ka[data-step="3"] .ka-seg, .ka[data-step="4"] .ka-seg, .ka[data-step="5"] .ka-seg { opacity: 1; }
.ka:not([data-step]) .ka-titre .t1, .ka[data-step="3"] .ka-titre .t1, .ka[data-step="4"] .ka-titre .t1, .ka[data-step="5"] .ka-titre .t1 { opacity: 0; }
.ka:not([data-step]) .ka-titre .t2, .ka[data-step="3"] .ka-titre .t2, .ka[data-step="4"] .ka-titre .t2, .ka[data-step="5"] .ka-titre .t2 { opacity: 1; }
.ka[data-step="1"] .ka-titre, .ka[data-step="2"] .ka-titre { left: 50%; transform: translateX(-50%); }
.ka-sc { position: absolute; inset: 0; }

/* 1 et 2 · vos fichiers */
.ka-zip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .6em; font-size: .9em; color: var(--ui-txt); }
.ka-zip svg { width: 4.5em; height: 4.5em; fill: none; }
.ka[data-step="1"] .ka-zip { animation: ka-zip 3.2s ease both; }
@keyframes ka-zip { 0%, 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 45%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.ka-tree { position: absolute; left: 10%; top: 9%; display: flex; flex-direction: column; gap: .42em; font-size: .9em; }
.ka-tree div { display: flex; align-items: center; gap: .6em; color: var(--ui-txt); padding: .22em .6em; border-radius: .3em; }
.ka-tree svg { width: 1.15em; height: 1.15em; color: #7FA6C6; flex: none; }
.ka-tree div:first-child svg { color: var(--ka-gold); }
.ka-tree div:first-child { font-weight: 700; }
.ka-tree div:not(:first-child) { margin-left: 1.6em; }
.ka-tree div.f { margin-left: 3.2em; font-size: .9em; }
.ka-tree div.f svg { color: var(--ui-mut); }
.ka[data-step="1"] .ka-tree div { animation: ka-in .4s ease both; }
.ka[data-step="1"] .ka-tree div:nth-child(1) { animation-delay: 1.4s; } .ka[data-step="1"] .ka-tree div:nth-child(2) { animation-delay: 1.6s; }
.ka[data-step="1"] .ka-tree div:nth-child(3) { animation-delay: 1.75s; } .ka[data-step="1"] .ka-tree div:nth-child(4) { animation-delay: 1.9s; }
.ka[data-step="1"] .ka-tree div:nth-child(5) { animation-delay: 2.05s; } .ka[data-step="1"] .ka-tree div:nth-child(6) { animation-delay: 2.2s; }
@keyframes ka-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes ka-out { to { opacity: 0; } }
.s2 .ka-tree .depot { background: rgba(249,220,92,.12); color: var(--ka-gold); outline: 1px solid rgba(249,220,92,.45); }
.s2 .ka-tree .depot svg { color: var(--ka-gold); }
.ka[data-step="2"] .ka-tree div.f { animation: ka-in .35s ease both; }
.ka[data-step="2"] .ka-tree div.f:nth-child(3) { animation-delay: 2.1s; } .ka[data-step="2"] .ka-tree div.f:nth-child(4) { animation-delay: 2.45s; } .ka[data-step="2"] .ka-tree div.f:nth-child(5) { animation-delay: 2.8s; }
.ka-docs { position: absolute; right: 9%; top: 16%; display: flex; flex-direction: column; gap: .7em; }
.ka-doc { display: flex; align-items: center; gap: .5em; padding: .45em .8em; border: 1px solid var(--ui-line); border-radius: .4em; background: #262626; font-size: .85em; color: var(--ui-txt); }
.ka-doc svg { width: 1.1em; height: 1.1em; }
.ka[data-step="2"] .ka-doc { animation: ka-doc 2.6s cubic-bezier(.5,0,.3,1) both; }
.ka[data-step="2"] .ka-doc:nth-child(2) { animation-delay: .35s; } .ka[data-step="2"] .ka-doc:nth-child(3) { animation-delay: .7s; }
@keyframes ka-doc { 0%, 18% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translate(-13em, 1.6em) scale(.7); } 100% { opacity: 0; transform: translate(-14em, 1.8em) scale(.5); } }

/* 3 à 5 · l'application : barre latérale */
.ka-app { position: absolute; inset: 0; }
.ka-side { position: absolute; left: 0; top: 0; bottom: 0; width: 27%; padding: .7em .55em; background: var(--ui-side); border-right: 1px solid var(--ui-line); display: flex; flex-direction: column; gap: .15em; font-size: .78em; }
.ka-side p { display: flex; align-items: center; gap: .6em; padding: .45em .55em; border-radius: .4em; color: var(--ui-txt); white-space: nowrap; }
.ka-side p svg { width: 1.15em; height: 1.15em; flex: none; }
.ka-side p.cr { background: var(--ui-hover); }
.ka-side p.grp { margin-top: .5em; color: var(--ui-mut); font-size: .92em; }
.ka-side p.grp + p.grp { margin-top: 0; }
.ka-side p.moi { margin-top: auto; color: var(--ui-txt); }
.ka-side p.moi span { width: 1.6em; height: 1.6em; border-radius: 50%; background: #3A3A3A; display: flex; align-items: center; justify-content: center; font-size: .85em; }
/* zone principale */
.ka-main { position: absolute; left: 27%; right: 0; top: 0; bottom: 0; }
.ka-compo { position: absolute; left: 6%; right: 6%; bottom: 2.4em; display: flex; align-items: center; gap: .7em; padding: .65em .9em; border-radius: .8em; border: 1px solid #3A3A3A; background: #262626; font-size: .85em; }
.ka-compo .pl { color: var(--ui-mut); font-size: 1.2em; line-height: 1; }
.ka-compo .saisie { flex: 1; color: var(--ui-mut); white-space: nowrap; overflow: hidden; }
.ka-compo .saisie em { font-style: normal; }
.ka-compo .saisie span { display: none; color: var(--ui-txt); }
.ka-compo .mic { width: 1.15em; height: 1.15em; color: var(--ui-mut); }
.ka-statut { position: absolute; left: 7%; right: 6%; bottom: .6em; display: flex; align-items: center; gap: 1.1em; font-size: .74em; color: var(--ui-txt); }
.ka-statut > span { display: flex; align-items: center; gap: .4em; padding: .15em .35em; border-radius: .35em; }
.ka-statut svg { width: 1.1em; height: 1.1em; }
.ka-statut i { font-style: normal; }
.ka-statut .lbl { display: grid; }
.ka-statut .lbl i { grid-area: 1 / 1; }
.ka-statut .b { opacity: 0; }
/* le dossier choisi et le mode Auto, une fois réglés */
.ka:not([data-step]) .ka-statut .dos .a, .ka[data-step="4"] .ka-statut .dos .a, .ka[data-step="5"] .ka-statut .dos .a,
.ka:not([data-step]) .ka-statut .mode .a, .ka[data-step="5"] .ka-statut .mode .a { opacity: 0; }
.ka:not([data-step]) .ka-statut .dos .b, .ka[data-step="4"] .ka-statut .dos .b, .ka[data-step="5"] .ka-statut .dos .b,
.ka:not([data-step]) .ka-statut .mode .b, .ka[data-step="5"] .ka-statut .mode .b { opacity: 1; }
.ka-statut .mode { background: var(--ui-hover); }

/* 3 · le bouton Code, puis la liste des environnements */
.ka[data-step="3"] .ka-seg b.code { animation: ka-code 1s ease both .2s; }
.ka[data-step="3"] .ka-seg b.chat { animation: ka-chat 1s ease both .2s; }
@keyframes ka-code { from { background: transparent; color: var(--ui-mut); box-shadow: none; } 60% { box-shadow: 0 0 0 2px rgba(249,220,92,.8); } to { background: #3A3A3A; color: var(--ui-txt); box-shadow: 0 0 0 2px rgba(249,220,92,.8); } }
@keyframes ka-chat { from { background: #3A3A3A; color: var(--ui-txt); } to { background: transparent; color: var(--ui-mut); } }
.ka-env { position: absolute; z-index: 3; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 52%; padding: .4em; border-radius: .7em; border: 1px solid var(--ui-line); background: var(--ui-main); box-shadow: 0 1em 3em rgba(0,0,0,.45); font-size: .8em; opacity: 0; }
.ka-env .it { position: relative; display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .45em; color: var(--ui-txt); }
.ka-env .it svg { width: 1.15em; height: 1.15em; color: var(--ui-mut); }
.ka-env .ck { position: absolute; right: .8em; color: var(--ui-txt); }
.ka-env .ch { margin-top: .3em; padding: .65em .7em .45em; border-top: 1px solid var(--ui-line); color: var(--ui-txt); }
.ka-env .kit { display: none; }
.ka[data-step="3"] .ka-env { animation: ka-env 3.4s ease both .9s; }
@keyframes ka-env { 0% { opacity: 0; transform: translate(-50%, -46%); } 10%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.ka[data-step="3"] .ka-env .ch { animation: ka-clic .5s ease both 1.5s; }
@keyframes ka-clic { 50% { background: var(--ui-hover); } 100% { background: transparent; } }
.ka[data-step="3"] .ka-env .kit { display: flex; animation: ka-in .35s ease both 2.1s; }
.ka[data-step="3"] .ka-env .kit { background: var(--ui-hover); }
.ka[data-step="3"] .ka-env .it:first-child .ck { animation: ka-out .2s ease forwards 2.4s; }
.ka[data-step="3"] .ka-env .kit .ck { animation: ka-in .2s ease both 2.4s; }
.ka[data-step="3"] .ka-statut .dos .a { animation: ka-out .15s ease forwards 3.3s; }
.ka[data-step="3"] .ka-statut .dos .b { animation: ka-in .25s ease both 3.35s; }
.ka[data-step="3"] .ka-statut .dos { animation: ka-lueur 1s ease both 3.3s; }
@keyframes ka-lueur { 50% { box-shadow: 0 0 0 2px rgba(249,220,92,.8); } }

/* 4 · le menu des autorisations : de Manuel à Auto */
.ka-modes { position: absolute; z-index: 3; left: 14%; bottom: 2.3em; width: 52%; padding: .55em; border-radius: .7em; border: 1px solid #3A3A3A; background: var(--ui-menu); box-shadow: 0 1em 3em rgba(0,0,0,.5); font-size: .78em; opacity: 0; }
.ka-modes .tt { padding: .3em .55em .5em; color: var(--ui-mut); }
.ka-modes .it { position: relative; display: flex; flex-direction: column; gap: .1em; padding: .45em 2em .45em .55em; border-radius: .4em; }
.ka-modes .it b { font-weight: 500; color: var(--ui-txt); }
.ka-modes .it span:not(.ck) { color: var(--ui-mut); font-size: .92em; }
.ka-modes .ck { position: absolute; right: .7em; top: .45em; color: var(--ui-check); font-weight: 700; opacity: 0; }
.ka-modes .man .ck { opacity: 1; }
.ka[data-step="4"] .ka-statut .mode { animation: ka-lueur 1s ease both .2s; }
.ka[data-step="4"] .ka-modes { animation: ka-env 3s ease both .6s; }
.ka[data-step="4"] .ka-modes .auto { animation: ka-clic .6s ease both 1.7s; }
.ka[data-step="4"] .ka-modes .man .ck { animation: ka-out .15s ease forwards 2s; }
.ka[data-step="4"] .ka-modes .auto .ck { animation: ka-in .2s ease both 2s; }
.ka[data-step="4"] .ka-statut .mode .a { animation: ka-out .15s ease forwards 2.1s; }
.ka[data-step="4"] .ka-statut .mode .b { animation: ka-in .25s ease both 2.15s; }

/* 5 · « On commence » */
.ka-moi { position: absolute; right: 6%; top: 1.4em; padding: .55em .9em; border-radius: .9em; background: #2F2F2F; font-size: .86em; color: var(--ui-txt); }
.ka-claude { position: absolute; left: 6%; right: 8%; top: 4.6em; font-size: .84em; line-height: 1.5; color: var(--ui-txt); }
.ka-claude b { font-weight: 700; }
.ka[data-step="3"] .ka-moi, .ka[data-step="3"] .ka-claude, .ka[data-step="4"] .ka-moi, .ka[data-step="4"] .ka-claude { display: none; }
.ka[data-step="5"] .ka-compo .saisie em { display: none; }
.ka[data-step="5"] .ka-compo .saisie span { display: inline-block; overflow: hidden; vertical-align: bottom; animation: ka-type 1.1s steps(11) both .2s, ka-out .2s ease forwards 1.5s; }
@keyframes ka-type { from { width: 0; } to { width: 6.4em; } }
.ka[data-step="5"] .ka-moi { animation: ka-in .4s ease both 1.6s; }
.ka[data-step="5"] .ka-claude { animation: ka-in .6s ease both 2.4s; }

/* export PDF du deck : une étape = une page. data-fige fige l'étape sur son moment clé (kit-anim.js, derouler) */
.ka[data-fige] * { animation: none !important; transition: none !important; }
.ka[data-fige="1"] .ka-zip, .ka[data-fige="2"] .ka-docs { opacity: 0; }
.ka[data-fige="3"] .ka-env { opacity: 1; transform: translate(-50%, -50%); }
.ka[data-fige="3"] .ka-env .kit { display: flex; background: var(--ui-hover); }
.ka[data-fige="3"] .ka-env .it:first-child .ck { opacity: 0; }
.ka[data-fige="3"] .ka-seg b.code, .ka[data-fige="3"] .ka-statut .dos, .ka[data-fige="4"] .ka-statut .mode { box-shadow: 0 0 0 2px rgba(249,220,92,.8); }
.ka[data-fige="3"] .ka-statut .dos .a, .ka[data-fige="4"] .ka-statut .mode .a, .ka[data-fige="4"] .ka-modes .man .ck { opacity: 0; }
.ka[data-fige="3"] .ka-statut .dos .b, .ka[data-fige="4"] .ka-statut .mode .b, .ka[data-fige="4"] .ka-modes .auto .ck { opacity: 1; }
.ka[data-fige="4"] .ka-modes { opacity: 1; transform: none; }

/* la landing : la piste défile, la scène reste à l'écran, un geste par demi-écran de défilement.
   kit-anim.js pose .ka-defile quand l'écran est assez grand ; sinon, la piste garde sa hauteur naturelle. */
.ka-piste.ka-defile { height: calc(100svh + 5 * 50svh); }
.ka-piste.ka-defile .ka-scene { position: sticky; top: var(--ka-haut, 0px); min-height: calc(100svh - var(--ka-haut, 0px)); display: flex; flex-direction: column; justify-content: center; }
.ka-piste.ka-defile .ka-scene > * { width: 100%; } /* sans quoi un enfant centré par marges automatiques se réduit à son contenu */

@media (prefers-reduced-motion: reduce) { .ka * { animation: none !important; transition: none !important; } }
@media print { .ka * { animation: none !important; } }
@media (max-width: 760px) { .ka { grid-template-columns: 1fr; gap: 1.4em; } .ka-steps { order: 2; } }

/* section de la landing */
.ap-installer { padding: var(--space-lg) 0 var(--space-xl); }
.ap-installer .section-title { margin-bottom: var(--space-sm); }
.ap-installer .ap-ka-sub { max-width: 46rem; margin: 0 0 var(--space-md); text-align: left; color: var(--text-secondary, #B7C6D5); }
.ap-installer .ka { max-width: 68rem; margin: 0; font-size: 16px; }
/* au défilement : la scène se pose sous la barre du haut, et toute l'animation se règle sur la hauteur de
   l'écran (ses tailles sont en em) pour que le titre, les 5 gestes et la fenêtre tiennent ensemble, aux
   proportions d'origine : la fenêtre mesure 31,75 em de haut pour 68 em de large au total */
.ap-installer .ka-piste { --ka-haut: 72px; }
.ap-installer .ka-defile .ka-scene { padding-block: 1rem; }
.ap-installer .ka-defile .ka { font-size: clamp(11px, calc((100svh - 21rem) / 31.75), 16px); max-width: 68em; }