/* yt-aide-v2 / anim3.css — le modèle de l'aide Logic Pro sur toutes les pages d'aide (31 oct. 2026). Voir anim3.js. */

/* ---------- Hero : la capture entière, sans vignettage ; le texte reste au-dessus ---------- */
#yt-alp#yt-alp .a2-mac img{ -webkit-mask-image:none !important; mask-image:none !important; }
#yt-alp .a2-hero-photo .alp-hero-txt{ position:relative; z-index:2; }
#yt-alp .a2-hero-photo .a2-mac{ z-index:1; }

/* ---------- Dernier bloc : plus d'air vide sous la date de mise à jour, et collé au pied de page ---------- */
#yt-alp#yt-alp .alp-fin{ padding-bottom:72px !important; }
#yt-alp#yt-alp .alp-fin p.alp-maj{ margin-top:40px !important; }
@media (max-width:760px){ #yt-alp#yt-alp .alp-fin{ padding-bottom:48px !important; } #yt-alp#yt-alp .alp-fin p.alp-maj{ margin-top:32px !important; } }
html body.yt-aide2 footer.yf-footer{ margin-top:0 !important; }

/* ---------- La grande tuile pleine largeur, quatre en dessous : sur toutes les pages d'aide ---------- */
body.yt-aide2 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl{ grid-column:1 / -1 !important; grid-row:auto !important; min-height:340px !important;
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important; column-gap:48px !important; align-items:end !important; }
body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl > :not(.a2-barre):not(.a2-xlv){ grid-column:1 !important; }
body.yt-aide2 #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; }
body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl h3{ margin-top:0 !important; }
body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl .a2-xlv{ grid-column:2 !important; grid-row:1 / span 5 !important; align-self:center !important; }
@media (max-width:1060px){ body.yt-aide2 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:760px){
  body.yt-aide2 #yt-alp#yt-alp ol.alp-bento{ grid-template-columns:minmax(0,1fr) !important; }
  body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl{ grid-template-columns:minmax(0,1fr) !important; min-height:0 !important; }
  body.yt-aide2 #yt-alp#yt-alp .alp-bento .alp-t-xl .a2-xlv{ grid-column:1 !important; grid-row:auto !important; margin:8px 0 28px !important; }
}
#yt-alp .a2-xlv{ position:relative; aspect-ratio:16 / 9; border-radius:16px; overflow:hidden; background:rgba(11,13,18,.55); border:1px solid rgba(255,255,255,.18); }
#yt-alp .a2-xlv 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-xlv-photo img{ object-fit:cover; object-position:50% 50%; transform:scale(1.18); }
#yt-alp .a2-xlv .a2-scene-livre{ height:100%; margin:0; padding:16px; border-radius:0; box-sizing:border-box; }
#yt-alp .a2-xlv .a2-livre, #yt-alp .a2-vis .a2-livre{ width:auto !important; height:100%; max-width:100%; }

/* ---------- Visuels des cartes ---------- */
#yt-alp .yl-card > .a2-vis{ margin:-8px -6px 22px; }
#yt-alp .a2-vis-couv 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-vis .a2-scene-livre{ height:100%; margin:0; padding:14px; border-radius:0; box-sizing:border-box; }
#yt-alp .a2-vis-ico{ display:flex !important; align-items:center; justify-content:center; background:linear-gradient(var(--a2-ang,135deg), var(--a2-c1,#124CA3) 40%, var(--a2-c2,#345890) 150%) !important; }
#yt-alp .a2-vis-ico::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size:18px 18px; opacity:.6; }
#yt-alp .a2-vis-ico::after{ content:""; position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); }
#yt-alp .a2-gros{ position:relative; z-index:1; display:block; width:96px; height:96px; color:#fff; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
#yt-alp .a2-gros svg{ display:block; width:100%; height:100%; overflow:visible; }
#yt-alp .alp-sombre .a2-ico{ color:#8AB8FF; }

/* ---------- Animations des pictogrammes ---------- */
#yt-alp .a2-on .a2-swing{ animation:a2-swing 2.8s ease-in-out infinite; transform-origin:46px 18px; }
@keyframes a2-swing{ 0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
#yt-alp .a2-on .a2-descend{ animation:a2-descend 1.8s ease-in-out infinite; }
@keyframes a2-descend{ 0%,100%{ transform:translateY(-3px) } 50%{ transform:translateY(5px) } }
#yt-alp .a2-trace{ stroke-dashoffset:0; }
#yt-alp .a2-on .a2-trace{ animation:a2-trace 3s ease-in-out infinite; }
@keyframes a2-trace{ 0%,10%{ stroke-dashoffset:1 } 45%,85%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:1 } }
#yt-alp .a2-on .a2-tourne{ animation:a2-tourne 6s linear infinite; transform-origin:32px 32px; }
@keyframes a2-tourne{ to{ transform:rotate(360deg) } }
#yt-alp .a2-on .a2-souligne, #yt-alp .a2-on .a2-lignes path{ animation:a2-ligne 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:left center; }
#yt-alp .a2-on .a2-lignes path:nth-child(2){ animation-delay:.25s } #yt-alp .a2-on .a2-lignes path:nth-child(3){ animation-delay:.5s }
@keyframes a2-ligne{ 0%,15%{ transform:scaleX(.1) } 55%,85%{ transform:scaleX(1) } 100%{ transform:scaleX(.1) } }
#yt-alp .a2-on .a2-pulse{ animation:a2-pulse 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes a2-pulse{ 0%,100%{ transform:scale(.88) } 50%{ transform:scale(1.08) } }
#yt-alp .a2-touche2{ opacity:.15; }
#yt-alp .a2-on .a2-touche2{ animation:a2-touche2 1.6s ease-in-out infinite; }
@keyframes a2-touche2{ 0%,100%{ opacity:.12 } 40%,60%{ opacity:.6 } }
#yt-alp .a2-on .a2-ondes{ animation:a2-ondes 1.4s ease-in-out infinite; }
@keyframes a2-ondes{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
#yt-alp .a2-on .a2-anse{ animation:a2-anse 2.6s ease-in-out infinite; }
@keyframes a2-anse{ 0%,35%,100%{ transform:translateY(0) } 50%,80%{ transform:translateY(-5px) } }
#yt-alp .a2-on .a2-clips{ animation:a2-clips 3s ease-in-out infinite alternate; }
@keyframes a2-clips{ from{ transform:translateX(0) } to{ transform:translateX(-4px) } }
#yt-alp .a2-on .a2-tete2{ animation:a2-tete2 3s linear infinite; }
@keyframes a2-tete2{ from{ transform:translateX(-18px) } to{ transform:translateX(28px) } }

@media (prefers-reduced-motion: reduce){
  #yt-alp .a2-vis *, #yt-alp .a2-xlv *, #yt-alp .a2-ico *{ animation:none !important; }
}

/* Le MacBook entier dans sa colonne, rien de coupé au bord de l'écran */
#yt-alp#yt-alp .a2-mac img{ width:118% !important; margin:0 0 0 -6% !important; }
@media (max-width:1060px){ #yt-alp#yt-alp .a2-mac img{ width:108% !important; margin:8px 0 0 -4% !important; } }

/* Le petit pictogramme d'origine disparaît quand la carte a son grand visuel (pas de doublon) */
#yt-alp .a2-vis ~ .alp-ic, #yt-alp .a2-vis ~ .yl-ic{ display:none !important; }
#yt-alp .a2-orig svg{ stroke:#fff !important; color:#fff !important; }
#yt-alp .a2-on .a2-orig{ animation:a2-flotte 3.2s ease-in-out infinite; }
@keyframes a2-flotte{ 0%,100%{ transform:translateY(-4px) } 50%{ transform:translateY(5px) } }
#yt-alp .a2-on .a2-jauge2 path{ animation:a2-monte 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom center; }
@keyframes a2-monte{ 0%,100%{ transform:scaleY(.5) } 50%{ transform:scaleY(1.1) } }