/* yt-aide-v2 / anim2.css — deuxième passe sur l'aide Logic Pro (31 oct. 2026). Voir anim2.js. */

/* ---------- Règle d'alignement : dans une grille de cartes, tous les visuels ont la même hauteur ---------- */
#yt-alp#yt-alp .alp-grille .alp-cv-h{ height:auto !important; aspect-ratio:16 / 9 !important; }
#yt-alp .a2-vis{ display:block; position:relative; aspect-ratio:16 / 9; margin:-12px -8px 24px; border-radius:14px; overflow:hidden; background:#14161C; }

/* ---------- 1. Couvertures des cours ---------- */
#yt-alp#yt-alp .alp-cv-h.a2-couv{ padding:0 !important; background:#0B0D12 !important; }
#yt-alp#yt-alp .alp-cv-h.a2-couv::after, #yt-alp#yt-alp .alp-cv-h.a2-couv > span:not(.a2-couv-i){ display:none !important; }
#yt-alp .a2-couv-i{ position:absolute; inset:0; display:block; }
#yt-alp .a2-couv-i img{ display:block; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; margin:0 !important; border-radius:0 !important; }
#yt-alp .a2-mosa{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; background:#0B0D12; }
#yt-alp .a2-mosa img{ width:100% !important; height:100% !important; object-fit:cover; }

/* ---------- 2. Le livre ---------- */
#yt-alp .a2-scene-livre{ display:flex; justify-content:center; align-items:center; margin:0 0 20px; padding:34px 20px 30px; border-radius:20px; background:radial-gradient(70% 90% at 50% 30%, #1E2A44 0%, #0B0D12 75%); perspective:1400px; }
#yt-alp .a2-livre{ position:relative; width:min(380px,100%); aspect-ratio:380 / 240; transform-style:preserve-3d; transform:rotateX(14deg); }
#yt-alp .a2-livre > div{ position:absolute; top:0; bottom:0; width:50%; }
#yt-alp .a2-l-g{ left:0; border-radius:8px 2px 2px 8px; background:#F4F1EA; }
#yt-alp .a2-l-d{ left:50%; border-radius:2px 8px 8px 2px; background:#F4F1EA; box-shadow:0 20px 40px -20px rgba(0,0,0,.8); }
#yt-alp .a2-l-g, #yt-alp .a2-l-d, #yt-alp .a2-l-av, #yt-alp .a2-l-ar{ display:flex; flex-direction:column; gap:8px; padding:22px 18px; box-sizing:border-box; }
#yt-alp .a2-livre i{ display:block; height:6px; width:100%; border-radius:3px; background:rgba(40,40,50,.16); }
#yt-alp .a2-l-tit{ display:block; margin:0 0 6px; font:700 15px/1.2 -apple-system,BlinkMacSystemFont,sans-serif; color:#124CA3; }
#yt-alp .a2-l-f{ left:50%; transform-origin:left center; transform-style:preserve-3d; }
#yt-alp .a2-l-av, #yt-alp .a2-l-ar{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#FBF9F4; border-radius:2px 8px 8px 2px; }
#yt-alp .a2-l-ar{ transform:rotateY(180deg); border-radius:8px 2px 2px 8px; background:#F4F1EA; }
#yt-alp .a2-l-couv{ justify-content:flex-end !important; background:linear-gradient(150deg,#1D2B4F 0%,#0E1528 100%) !important; color:#fff; padding:26px 22px !important; }
#yt-alp .a2-l-couv span{ font:700 26px/1.05 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:-.02em; }
#yt-alp .a2-l-couv small{ margin-top:6px; font-size:13px; color:rgba(255,255,255,.75); }
#yt-alp .a2-l-c{ transform:translateZ(4px); } #yt-alp .a2-l-p1{ transform:translateZ(3px); } #yt-alp .a2-l-p2{ transform:translateZ(2px); } #yt-alp .a2-l-p3{ transform:translateZ(1px); }
#yt-alp .a2-on .a2-l-c{ animation:a2-couv 11s cubic-bezier(.45,.05,.3,1) infinite; }
#yt-alp .a2-on .a2-l-p1{ animation:a2-p1 11s cubic-bezier(.45,.05,.3,1) infinite; }
#yt-alp .a2-on .a2-l-p2{ animation:a2-p2 11s cubic-bezier(.45,.05,.3,1) infinite; }
#yt-alp .a2-on .a2-l-p3{ animation:a2-p3 11s cubic-bezier(.45,.05,.3,1) infinite; }
@keyframes a2-couv{ 0%,8%{ transform:rotateY(0) translateZ(4px) } 18%,84%{ transform:rotateY(-180deg) translateZ(4px) } 94%,100%{ transform:rotateY(0) translateZ(4px) } }
@keyframes a2-p1{ 0%,30%{ transform:rotateY(0) translateZ(3px) } 40%,82%{ transform:rotateY(-179deg) translateZ(3px) } 92%,100%{ transform:rotateY(0) translateZ(3px) } }
@keyframes a2-p2{ 0%,50%{ transform:rotateY(0) translateZ(2px) } 60%,80%{ transform:rotateY(-178deg) translateZ(2px) } 90%,100%{ transform:rotateY(0) translateZ(2px) } }
@keyframes a2-p3{ 0%,66%{ transform:rotateY(0) translateZ(1px) } 74%,78%{ transform:rotateY(-177deg) translateZ(1px) } 88%,100%{ transform:rotateY(0) translateZ(1px) } }
#yt-alp .a2-fixe .a2-l-c{ transform:rotateY(-180deg) translateZ(4px); }

/* ---------- 3. Pages à garder sous la main ---------- */
/* navigateur */
#yt-alp .a2-nav{ position:absolute; inset:14px; border-radius:10px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
#yt-alp .a2-nav-b{ display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; background:#ECECEF; }
#yt-alp .a2-nav-b i{ width:8px; height:8px; border-radius:50%; background:#FF5F57; } #yt-alp .a2-nav-b i+i{ background:#FEBC2E } #yt-alp .a2-nav-b i+i+i{ background:#28C840 }
#yt-alp .a2-nav-b em{ margin:0 auto; padding:2px 12px; border-radius:6px; background:#fff; font:500 11px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; font-style:normal; color:#4C5058; }
#yt-alp .a2-nav-c{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px; background:linear-gradient(180deg,#fff 0%,#F2F4F8 100%); }
#yt-alp .a2-nav-c > b{ display:block; width:62%; height:9px; border-radius:5px; background:#1D1D1F; }
#yt-alp .a2-onde{ display:flex; align-items:center; gap:3px; height:44px; margin-top:6px; }
#yt-alp .a2-onde i{ display:block; width:4px; height:100%; border-radius:2px; background:linear-gradient(180deg,#B07CDA,#4A90E2); transform:scaleY(.3); }
#yt-alp .a2-on .a2-onde i{ animation:a2-onde 1.4s ease-in-out infinite; }
#yt-alp .a2-onde i:nth-child(3n){ animation-delay:-.4s } #yt-alp .a2-onde i:nth-child(3n+1){ animation-delay:-.9s } #yt-alp .a2-onde i:nth-child(4n){ animation-duration:1.1s }
@keyframes a2-onde{ 0%,100%{ transform:scaleY(.25) } 50%{ transform:scaleY(1) } }
/* iPad */
#yt-alp .a2-ipad{ position:absolute; inset:14px 22px; border-radius:18px; background:#2A2C31; padding:10px; box-shadow:inset 0 0 0 2px #45474D; }
#yt-alp .a2-ipad-e{ position:relative; display:block; width:100%; height:100%; border-radius:9px; overflow:hidden; background:#1B1D22; }
#yt-alp .a2-ipad .a2-pistes{ top:10px; gap:6px; }
#yt-alp .a2-ipad .a2-piste{ height:18px; }
#yt-alp .a2-ipad .a2-tete{ left:42%; }
#yt-alp .a2-doigt{ position:absolute; right:22%; bottom:14%; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 0 0 rgba(255,255,255,.4); }
#yt-alp .a2-on .a2-doigt{ animation:a2-tap 2.4s ease-out infinite; }
@keyframes a2-tap{ 0%,40%{ transform:scale(.6); opacity:0; box-shadow:0 0 0 0 rgba(255,255,255,.4) } 50%{ opacity:1; transform:scale(1) } 80%{ box-shadow:0 0 0 18px rgba(255,255,255,0) } 100%{ opacity:0 } }
/* synthé */
#yt-alp .a2-synth{ position:absolute; inset:16px 18px; border-radius:10px; background:linear-gradient(180deg,#3A3D44,#24262B); padding:12px; display:flex; flex-direction:column; gap:10px; }
#yt-alp .a2-boutons{ display:flex; justify-content:space-around; }
#yt-alp .a2-boutons i{ position:relative; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#6A6E77,#2C2E33); box-shadow:0 2px 4px rgba(0,0,0,.5); }
#yt-alp .a2-boutons i::after{ content:""; position:absolute; left:50%; top:4px; width:2px; height:10px; margin-left:-1px; border-radius:1px; background:#F5C542; }
#yt-alp .a2-on .a2-boutons i{ animation:a2-bouton 3s ease-in-out infinite alternate; }
#yt-alp .a2-boutons i:nth-child(2){ animation-delay:-1s } #yt-alp .a2-boutons i:nth-child(3){ animation-delay:-2s } #yt-alp .a2-boutons i:nth-child(4){ animation-delay:-.5s }
@keyframes a2-bouton{ from{ transform:rotate(-120deg) } to{ transform:rotate(120deg) } }
#yt-alp .a2-touches{ position:relative; flex:1; display:flex; gap:2px; }
#yt-alp .a2-touches > i{ flex:1; border-radius:0 0 4px 4px; background:#F4F4F6; }
#yt-alp .a2-on .a2-touches > i:nth-child(3){ animation:a2-touche 2.4s ease infinite; } #yt-alp .a2-on .a2-touches > i:nth-child(5){ animation:a2-touche 2.4s .6s ease infinite; } #yt-alp .a2-on .a2-touches > i:nth-child(8){ animation:a2-touche 2.4s 1.2s ease infinite; } #yt-alp .a2-on .a2-touches > i:nth-child(10){ animation:a2-touche 2.4s 1.8s ease infinite; }
@keyframes a2-touche{ 0%,30%,100%{ background:#F4F4F6 } 8%,22%{ background:#8AB8FF } }
#yt-alp .a2-noires{ position:absolute; left:0; right:0; top:0; height:58%; pointer-events:none; }
#yt-alp .a2-noires i{ position:absolute; top:0; width:4.4%; height:100%; border-radius:0 0 3px 3px; background:#1D1D1F; }
/* glossaire */
#yt-alp .a2-dico{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:18px 24px; background:linear-gradient(150deg,#1D2B4F,#0E1528); }
#yt-alp .a2-dico-m{ display:block; font:700 28px/1.1 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:-.02em; color:#fff; transition:opacity .3s, transform .3s; }
#yt-alp .a2-dico-m.a2-sort{ opacity:0; transform:translateY(-8px); }
#yt-alp .a2-dico-l{ display:grid; gap:7px; margin:12px 0 14px; }
#yt-alp .a2-dico-l i{ display:block; height:6px; width:100%; border-radius:3px; background:rgba(255,255,255,.2); }
#yt-alp .a2-dico-a{ font:600 11px/1 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.18em; color:#8AB8FF; white-space:nowrap; overflow:hidden; }
/* blog */
#yt-alp .a2-blog{ position:absolute; inset:0; overflow:hidden; padding:0 22px; background:#F0F2F5; }
#yt-alp .a2-blog-r{ display:grid; gap:10px; padding-top:12px; }
#yt-alp .a2-on .a2-blog-r{ animation:a2-blog 9s linear infinite; }
@keyframes a2-blog{ from{ transform:translateY(0) } to{ transform:translateY(-50%) } }
#yt-alp .a2-art{ display:flex; gap:10px; align-items:center; padding:9px; border-radius:10px; background:#fff; border:1px solid #DADDE1; }
#yt-alp .a2-art > i{ flex:none; width:56px; height:36px; border-radius:6px; background:linear-gradient(135deg,#345890,#124CA3); }
#yt-alp .a2-art:nth-child(3n+2) > i{ background:linear-gradient(135deg,#8D3A34,#C45048) } #yt-alp .a2-art:nth-child(3n) > i{ background:linear-gradient(135deg,#664492,#7850AC) }
#yt-alp .a2-art span{ flex:1; display:grid; gap:6px; }
#yt-alp .a2-art b{ display:block; height:7px; border-radius:4px; background:#C9CDD3; }
/* autres pages d'aide */
#yt-alp .a2-tuiles{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,52px); grid-auto-rows:52px; gap:12px; justify-content:center; align-content:center; background:#14161C; }
#yt-alp .a2-tuiles i{ display:flex; align-items:center; justify-content:center; border-radius:12px; font:700 22px/1 -apple-system,BlinkMacSystemFont,sans-serif; font-style:normal; color:rgba(255,255,255,0); }
#yt-alp .a2-on .a2-tuiles i{ animation:a2-tuile 3s ease-in-out infinite; }
@keyframes a2-tuile{ 0%,30%,100%{ transform:scale(1); color:rgba(255,255,255,0) } 12%,20%{ transform:scale(1.12); color:#fff } }

/* ---------- 4. Séparateur de stems ---------- */
#yt-alp .a2-stems{ display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; margin-top:36px; padding:22px; border-radius:20px; background:#12151B; border:1px solid rgba(255,255,255,.12); }
#yt-alp .a2-stems-t{ grid-column:1 / -1; margin:0 0 6px !important; font-size:14px !important; font-weight:600 !important; color:rgba(255,255,255,.7) !important; }
#yt-alp .a2-mix{ grid-column:1 / -1; display:flex; align-items:center; gap:3px; height:48px; padding:0 8px; border-radius:8px; background:rgba(255,255,255,.06); }
#yt-alp .a2-mix i{ flex:1; border-radius:2px; background:rgba(255,255,255,.55); }
#yt-alp .a2-fleche{ grid-column:1 / -1; justify-self:center; width:2px; height:16px; background:rgba(255,255,255,.35); position:relative; }
#yt-alp .a2-fleche::after{ content:""; position:absolute; left:-4px; bottom:-2px; border:5px solid transparent; border-top-color:rgba(255,255,255,.35); border-bottom:0; }
#yt-alp .a2-stem{ display:contents; }
#yt-alp .a2-stem em{ font-size:13px; font-style:normal; font-weight:600; color:var(--c); min-width:62px; }
#yt-alp .a2-stem > span{ display:flex; align-items:center; gap:3px; height:26px; padding:0 6px; border-radius:6px; background:color-mix(in srgb,var(--c) 16%,transparent); transform-origin:left center; }
#yt-alp .a2-stem > span i{ flex:1; border-radius:2px; background:var(--c); }
#yt-alp .a2-on .a2-stem > span{ animation:a2-stem 7s ease infinite; }
#yt-alp .a2-on .a2-stem:nth-child(5) > span{ animation-delay:.25s } #yt-alp .a2-on .a2-stem:nth-child(6) > span{ animation-delay:.5s } #yt-alp .a2-on .a2-stem:nth-child(7) > span{ animation-delay:.75s }
@keyframes a2-stem{ 0%,10%{ transform:scaleX(0); opacity:0 } 22%,85%{ transform:scaleX(1); opacity:1 } 95%,100%{ transform:scaleX(0); opacity:0 } }

/* ---------- 5. Pictogrammes de « Toujours bloqué ? » ---------- */
#yt-alp .a2-on .a2-bulle2{ animation:a2-bulle2 3s ease-in-out infinite; transform-box:fill-box; transform-origin:left bottom; }
@keyframes a2-bulle2{ 0%,20%{ transform:scale(0); opacity:0 } 35%,80%{ transform:scale(1); opacity:1 } 100%{ transform:scale(1); opacity:0 } }
#yt-alp .a2-on .a2-orbite{ animation:a2-orbite 9s linear infinite; transform-origin:32px 32px; }
@keyframes a2-orbite{ to{ transform:rotate(360deg) } }
#yt-alp .a2-on .a2-lettre{ animation:a2-lettre 3.2s ease-in-out infinite; }
@keyframes a2-lettre{ 0%,25%{ transform:translateY(16px) } 55%,80%{ transform:translateY(0) } 100%{ transform:translateY(16px) } }

/* ---------- « Ils composent sur Logic Pro » : fond plus sombre pour lire le texte ---------- */
#yt-alp#yt-alp #artistes .a2-fond::after{ background:linear-gradient(90deg,rgba(11,13,18,.95) 0%,rgba(11,13,18,.86) 50%,rgba(11,13,18,.66) 100%) !important; }

@media (max-width:760px){
  #yt-alp .a2-vis{ margin:-6px 0 20px; }
  #yt-alp .a2-livre{ width:100%; }
  #yt-alp .a2-stem em{ min-width:54px; }
}
@media (prefers-reduced-motion: reduce){
  #yt-alp .a2-livre *, #yt-alp .a2-vis *, #yt-alp .a2-stems *{ animation:none !important; }
}

/* ---------- Troisième passe : vraies captures ---------- */
/* Hero : la photo Apple de Logic Pro sur MacBook Pro remplace la fenêtre dessinée */
#yt-alp#yt-alp .alp-hero.a2-hero-photo{ background:#000 !important; overflow:hidden !important; }
#yt-alp .a2-hero-photo .alp-scene, #yt-alp .a2-hero-photo .alp-pause{ display:none !important; }
#yt-alp .a2-mac{ position:relative; align-self:center; min-width:0; }
#yt-alp .a2-mac img{ display:block; width:142% !important; max-width:none !important; height:auto !important; margin:0 0 0 -18% !important; border-radius:0 !important;
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 50% 46% at 50% 50%, #000 62%, transparent 100%); transform:scale(1); transform-origin:50% 50%; }
#yt-alp .a2-hero-photo.a2-on .a2-mac img{ animation:a2-mac 18s ease-in-out infinite alternate; }
@keyframes a2-mac{ from{ transform:scale(1) } to{ transform:scale(1.06) translateY(-1%) } }
@media (max-width:1060px){ #yt-alp .a2-mac img{ width:118% !important; margin:8px 0 0 -9% !important; } }

/* « Une question ? » : la table de mixage de Logic en fond, qui défile lentement */
#yt-alp#yt-alp #communaute.a2-com-photo{ position:relative !important; isolation:isolate; overflow:hidden !important; }
#yt-alp #communaute .a2-table{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:0% 50%; opacity:.55; filter:saturate(1.15); }
#yt-alp #communaute .a2-table::after{ content:""; position:absolute; inset:0; background:radial-gradient(55% 60% at 50% 46%, rgba(11,13,18,.94) 0%, rgba(11,13,18,.86) 50%, rgba(11,13,18,.55) 100%); }
#yt-alp #communaute.a2-on .a2-table{ animation:a2-table 40s ease-in-out infinite alternate; }
@keyframes a2-table{ from{ background-position:0% 50% } to{ background-position:100% 50% } }
#yt-alp#yt-alp #communaute .alp-halo{ opacity:.5 !important; }
@media (prefers-reduced-motion: reduce){ #yt-alp .a2-mac img, #yt-alp #communaute .a2-table{ animation:none !important; } }

/* La bulle « en train d'écrire » se pose à la place de la réponse : la conversation garde sa hauteur (alignement des colonnes) */
#yt-alp .a2-chat{ position:relative; }
#yt-alp .a2-chat .a2-tape{ position:absolute; left:22px; bottom:22px; }