/* yt-aide-v2 / anim.css — pages d'aide plus vivantes (31 oct. 2026, demande de Fabien).
   Visuels et animations injectés par anim.js (aria-hidden, décoratifs). Tout s'arrête avec prefers-reduced-motion.
   Supprimer anim.css et anim.js rend les pages telles qu'avant. */

/* ---------- 1. « Cinq endroits » : une grande tuile pleine largeur, quatre en dessous ---------- */
body.page-id-13293 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl{ grid-column:1 / -1 !important; grid-row:auto !important; min-height:360px !important;
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important; column-gap:48px !important; align-items:end !important; }
body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl > :not(.a2-barre){ grid-column:1 !important; }
body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl .alp-num{ position:static !important; font-size:44px !important; margin:0 0 16px !important; opacity:.55 !important; grid-column:1 !important; }
body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl h3{ margin-top:0 !important; }
body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl .a2-barre{ grid-column:2 !important; grid-row:1 / span 4 !important; align-self:center !important; }
@media (max-width:1060px){
  body.page-id-13293 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px){
  body.page-id-13293 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:minmax(0,1fr) !important; }
  body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl{ grid-template-columns:minmax(0,1fr) !important; min-height:0 !important; }
  body.page-id-13293 #yt-alp#yt-alp .alp-bento .alp-t-xl .a2-barre{ grid-column:1 !important; grid-row:auto !important; margin:8px 0 28px !important; }
}

/* La barre de commande de Logic : le curseur active l'Aide rapide, la bulle décrit le bouton */
#yt-alp .a2-barre{ position:relative; height:190px; border-radius:16px; background:rgba(11,13,18,.55); border:1px solid rgba(255,255,255,.18); overflow:hidden; }
#yt-alp .a2-barre-l{ position:absolute; left:18px; right:18px; top:22px; display:flex; gap:8px; }
#yt-alp .a2-barre-l i{ flex:1 1 0; height:34px; border-radius:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); }
#yt-alp .a2-barre-l i.a2-q{ flex:0 0 34px; display:flex; align-items:center; justify-content:center; font:700 17px/1 -apple-system,BlinkMacSystemFont,sans-serif; font-style:normal; color:#fff; }
#yt-alp .a2-barre-l i.a2-cible{ position:relative; }
#yt-alp .a2-curseur{ position:absolute; left:34px; top:40px; width:18px; height:22px; z-index:3; }
#yt-alp .a2-bulle{ position:absolute; left:30%; right:18px; top:74px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.96); color:#050505; font-size:14px; line-height:1.4; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); opacity:0; transform:translateY(8px); }
#yt-alp .a2-bulle b{ display:block; margin-bottom:3px; font-size:15px; }
#yt-alp .a2-on .a2-curseur{ animation:a2-curseur 7s cubic-bezier(.6,0,.3,1) infinite; }
#yt-alp .a2-on .a2-q{ animation:a2-qon 7s linear infinite; }
#yt-alp .a2-on .a2-cible{ animation:a2-cible 7s linear infinite; }
#yt-alp .a2-on .a2-bulle{ animation:a2-bulle 7s ease infinite; }
@keyframes a2-curseur{ 0%,8%{ transform:translate(0,0) } 16%,22%{ transform:translate(0,0) scale(.86) } 26%{ transform:translate(0,0) } 44%,90%{ transform:translate(var(--a2-dx,180px),0) } 100%{ transform:translate(0,0) } }
@keyframes a2-qon{ 0%,17%{ background:rgba(255,255,255,.12) } 19%,92%{ background:#124CA3; border-color:#124CA3 } 96%,100%{ background:rgba(255,255,255,.12) } }
@keyframes a2-cible{ 0%,44%{ background:rgba(255,255,255,.12) } 47%,90%{ background:rgba(255,255,255,.34) } 94%,100%{ background:rgba(255,255,255,.12) } }
@keyframes a2-bulle{ 0%,48%{ opacity:0; transform:translateY(8px) } 54%,88%{ opacity:1; transform:none } 94%,100%{ opacity:0; transform:translateY(8px) } }

/* Pictogrammes animés des quatre petites tuiles */
#yt-alp .a2-ico{ display:block; width:64px; height:64px; margin:0 0 20px; color:var(--yj-link,#124CA3); }
#yt-alp .a2-ico svg{ display:block; width:100%; height:100%; overflow:visible; }
#yt-alp .alp-t .a2-ico + .alp-num, #yt-alp .alp-t .alp-num + .a2-ico{ margin-top:0; }
#yt-alp .a2-on .a2-page{ transform-origin:32px 32px; animation:a2-page 3.6s ease-in-out infinite; }
@keyframes a2-page{ 0%,30%{ transform:scaleX(1) } 50%{ transform:scaleX(-1) } 80%,100%{ transform:scaleX(-1); opacity:0 } }
#yt-alp .a2-on .a2-barre-p{ animation:a2-prog 4s ease-in-out infinite; transform-origin:left center; }
@keyframes a2-prog{ 0%{ transform:scaleX(.08) } 70%,100%{ transform:scaleX(1) } }
#yt-alp .a2-on .a2-jauge rect{ animation:a2-jauge 2.4s ease-in-out infinite; transform-origin:center bottom; transform-box:fill-box; }
#yt-alp .a2-on .a2-jauge rect:nth-child(2){ animation-delay:.2s } #yt-alp .a2-on .a2-jauge rect:nth-child(3){ animation-delay:.4s }
#yt-alp .a2-on .a2-jauge rect:nth-child(4){ animation-delay:.6s } #yt-alp .a2-on .a2-jauge rect:nth-child(5){ animation-delay:.8s }
@keyframes a2-jauge{ 0%,100%{ transform:scaleY(.35); fill:#2E8B57 } 50%{ transform:scaleY(1); fill:#C8102E } }
#yt-alp .a2-on .a2-points circle{ animation:a2-point 1.2s ease-in-out infinite; }
#yt-alp .a2-on .a2-points circle:nth-child(2){ animation-delay:.15s } #yt-alp .a2-on .a2-points circle:nth-child(3){ animation-delay:.3s }
@keyframes a2-point{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

/* ---------- 2. Le cours gratuit : une session Logic Pro qui joue derrière le titre ---------- */
body.page-id-13293 #yt-alp#yt-alp a.alp-ecran{ background:#14161C !important; }
#yt-alp .a2-daw{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#yt-alp .a2-daw::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,22,28,.05) 20%,rgba(20,22,28,.88) 88%); }
#yt-alp .a2-pistes{ position:absolute; left:0; right:0; top:14px; display:grid; gap:7px; }
#yt-alp .a2-piste{ display:flex; gap:6px; width:max-content; height:26px; }
#yt-alp .a2-piste i{ display:block; flex:none; height:100%; border-radius:4px; opacity:.88; }
#yt-alp .a2-on .a2-piste{ animation:a2-defile 22s linear infinite; }
#yt-alp .a2-on .a2-piste:nth-child(2n){ animation-duration:22s; animation-delay:-7s; }
#yt-alp .a2-on .a2-piste:nth-child(3n){ animation-delay:-13s; }
@keyframes a2-defile{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
#yt-alp .a2-tete{ position:absolute; top:0; bottom:0; left:38%; width:2px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.7); z-index:1; }
#yt-alp#yt-alp a.alp-ecran > :not(.a2-daw){ position:relative; z-index:2; }
#yt-alp#yt-alp a.alp-ecran .alp-play, #yt-alp#yt-alp a.alp-ecran .alp-prog{ position:absolute !important; }

/* ---------- 3. En-têtes de couleur des cartes : un égaliseur qui respire ---------- */
#yt-alp .a2-eq{ position:absolute; right:22px; bottom:20px; display:flex; align-items:flex-end; gap:5px; height:64px; z-index:0; pointer-events:none; }
#yt-alp .a2-eq i{ display:block; width:7px; height:100%; border-radius:3px; background:rgba(255,255,255,.4); transform-origin:bottom; transform:scaleY(.3); }
#yt-alp .alp-ocre .a2-eq i{ background:rgba(26,26,26,.32); }
#yt-alp .a2-on .a2-eq i{ animation:a2-eq 1.6s ease-in-out infinite; }
@keyframes a2-eq{ 0%,100%{ transform:scaleY(.25) } 50%{ transform:scaleY(1) } }
#yt-alp#yt-alp .alp-cv-h.a2-a-eq::after{ display:none !important; }

/* Cartes des formations : la photo du stage, pas un aplat */
#yt-alp#yt-alp .alp-cv-h.a2-photo{ height:190px !important; background-size:cover !important; background-position:center !important; }
#yt-alp#yt-alp .alp-cv-h.a2-photo::after{ content:"" !important; inset:0 !important; width:auto !important; height:auto !important; border:0 !important; border-radius:0 !important; right:0 !important; top:0 !important; background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%) !important; transform:none !important; }
#yt-alp#yt-alp .alp-cv-h.a2-photo span{ color:#fff !important; position:relative; z-index:1; }
#yt-alp#yt-alp .alp-cv:hover .alp-cv-h.a2-photo{ background-size:cover !important; }
#yt-alp .alp-cv-h.a2-photo{ transition:filter .4s ease; }
#yt-alp .alp-cv:hover .alp-cv-h.a2-photo{ filter:brightness(1.08) saturate(1.1); }

/* ---------- 4. Le manuel : une recherche qui se tape toute seule ---------- */
#yt-alp .a2-doc{ margin:0 0 20px; border-radius:20px; overflow:hidden; background:var(--yj-card,#fff); border:1px solid var(--yj-border,#DADDE1); }
#yt-alp .a2-doc-b{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--yj-border,#DADDE1); background:var(--yj-soft,#F6F9FA); }
#yt-alp .a2-doc-b i{ width:11px; height:11px; border-radius:50%; background:#FF5F57; } #yt-alp .a2-doc-b i+i{ background:#FEBC2E } #yt-alp .a2-doc-b i+i+i{ background:#28C840 }
#yt-alp .a2-doc-b span{ margin-left:10px; font-size:13px; font-weight:600; color:var(--yj-off,#4C5058); }
#yt-alp .a2-doc-c{ padding:18px 20px 20px; }
#yt-alp .a2-champ{ display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--yj-border2,#CED0D4); font-size:16px; color:var(--yj-text,#050505); }
#yt-alp .a2-champ svg{ width:16px; height:16px; flex:none; color:var(--yj-off,#4C5058); }
#yt-alp .a2-champ .a2-c{ width:2px; height:20px; background:var(--yj-link,#124CA3); }
#yt-alp .a2-on .a2-champ .a2-c{ animation:a2-clic 1s steps(1) infinite; }
@keyframes a2-clic{ 50%{ opacity:0 } }
#yt-alp .a2-res{ margin-top:14px; display:grid; gap:9px; }
#yt-alp .a2-res i{ display:block; height:10px; border-radius:5px; background:var(--yj-border,#DADDE1); transition:width .5s ease, background-color .3s; }
#yt-alp .a2-res i.a2-vu{ background:color-mix(in srgb,var(--yj-link,#124CA3) 55%,transparent); }

/* ---------- 5. L'IA : une vraie conversation, et les quatre conseils en grille ---------- */
#yt-alp .a2-chat{ display:grid; gap:12px; margin:0 0 18px; padding:22px; border-radius:20px; background:#12151B; border:1px solid rgba(255,255,255,.12); }
#yt-alp .a2-m{ max-width:88%; padding:12px 16px; border-radius:16px; font-size:15px; line-height:1.45; opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; }
#yt-alp .a2-m.a2-vu{ opacity:1; transform:none; }
#yt-alp .a2-moi{ justify-self:end; background:#124CA3; color:#fff; border-bottom-right-radius:5px; }
#yt-alp .a2-ia{ justify-self:start; background:rgba(255,255,255,.08); color:rgba(255,255,255,.92); border-bottom-left-radius:5px; }
#yt-alp .a2-ia small{ display:block; margin-top:6px; font-size:13px; color:#8AB8FF; }
#yt-alp .a2-tape{ justify-self:start; display:flex; gap:5px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.08); }
#yt-alp .a2-tape i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.7); animation:a2-point 1.2s ease-in-out infinite; }
#yt-alp .a2-tape i+i{ animation-delay:.15s } #yt-alp .a2-tape i+i+i{ animation-delay:.3s }
#yt-alp .a2-tape[hidden]{ display:none; }
#yt-alp#yt-alp .alp-ia ol.alp-conseils{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
#yt-alp#yt-alp .alp-ia .alp-conseils li{ padding:20px 20px 20px 62px !important; }
#yt-alp#yt-alp .alp-ia .alp-conseils li::after{ left:18px !important; top:20px !important; width:30px !important; height:30px !important; font-size:15px !important; }
#yt-alp#yt-alp .alp-ia .alp-conseils h3{ font-size:18px !important; margin-bottom:6px !important; }
#yt-alp#yt-alp .alp-ia .alp-conseils p{ font-size:15px !important; line-height:1.5 !important; }
@media (max-width:760px){ #yt-alp#yt-alp .alp-ia ol.alp-conseils{ grid-template-columns:minmax(0,1fr) !important; } }

/* ---------- 6. « Ils composent sur… » : une photo en fond ---------- */
#yt-alp#yt-alp #artistes{ position:relative !important; isolation:isolate; overflow:hidden !important; background:#0B0D12 !important; color:#fff !important; }
#yt-alp #artistes .a2-fond{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:78% 40%; transform:scale(1.04); }
#yt-alp #artistes .a2-fond::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,13,18,.92) 0%,rgba(11,13,18,.72) 55%,rgba(11,13,18,.45) 100%); }
#yt-alp .a2-on .a2-fond{ animation:a2-zoom 24s ease-in-out infinite alternate; }
@keyframes a2-zoom{ from{ transform:scale(1.04) } to{ transform:scale(1.14) translateX(-2%) } }
#yt-alp#yt-alp #artistes h2.alp-h2{ color:#fff !important; }
#yt-alp#yt-alp #artistes p.alp-chapo{ color:rgba(255,255,255,.8) !important; }
#yt-alp#yt-alp #artistes .alp-tags a{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.22) !important; color:#fff !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#yt-alp#yt-alp #artistes .alp-tags a:hover{ border-color:#8AB8FF !important; color:#fff !important; }
#yt-alp#yt-alp #artistes a.alp-lien{ color:#8AB8FF !important; }
#yt-alp#yt-alp #artistes .a2-credit{ position:absolute; right:20px; bottom:16px; margin:0; font-size:12px; color:rgba(255,255,255,.55); }

/* ---------- Mouvement réduit : tout est figé, visible et lisible ---------- */
@media (prefers-reduced-motion: reduce){
  #yt-alp [class*="a2-"], #yt-alp [class*="a2-"] *{ animation:none !important; transition:none !important; }
  #yt-alp .a2-bulle, #yt-alp .a2-m{ opacity:1 !important; transform:none !important; }
}

/* Colonne de droite composée (visuel + liste) */
#yt-alp .a2-col{ min-width:0; }
@media (max-width:760px){
  #yt-alp .a2-barre{ height:160px; }
  #yt-alp .a2-bulle{ left:18px; top:70px; }
}