/* YouTips · Accueil vivant (25 oct. 2026). Préfixe html body .ya2 … .yav-* */

/* ============ 1. Apprendre en jouant : le paquet ============ */
html body .ya2 .yav-jeu{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px 72px; align-items:center; margin:56px 0 0; padding:56px 56px 60px; border-radius:32px; background:radial-gradient(90% 120% at 0% 0%, rgba(196,80,72,.35) 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(120,80,172,.45) 0%, transparent 60%), #0B0D12; overflow:hidden; }
html body .ya2 .yav-jeu *{ box-sizing:border-box; }
html body .ya2 .yav-paquet{ display:flex; flex-direction:column; align-items:center; gap:34px; }
html body .ya2 button.yav-pioche{ position:relative; width:220px; height:300px; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; cursor:pointer; }
html body .ya2 .yav-dos{ position:absolute; inset:0; border-radius:18px; background:radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.28) 0%, transparent 55%), linear-gradient(150deg, var(--c1), var(--c2)); box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); transform:translateX(calc(var(--x) * .55)) rotate(calc(var(--r) * .55)); transform-origin:50% 110%; transition:transform .6s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:#fff; }
html body .ya2 .yav-dos b{ font-size:17px; font-weight:700; letter-spacing:-.01em; opacity:.95; }
html body .ya2 .yav-dos-disque{ width:58%; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle, rgba(0,0,0,.28) 0 2px, rgba(0,0,0,.12) 2px 4px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); position:relative; }
html body .ya2 .yav-dos-disque::after{ content:""; position:absolute; inset:36%; border-radius:50%; background:rgba(255,255,255,.9); }
html body .ya2 button.yav-pioche:hover .yav-dos, html body .ya2 button.yav-pioche:focus-visible .yav-dos{ transform:translateX(var(--x)) rotate(var(--r)) translateY(-6px); }
html body .ya2 button.yav-pioche.yav-melange .yav-dos{ animation:yav-melange .55s cubic-bezier(.3,.7,.3,1); animation-delay:calc(var(--i) * 40ms); }
@keyframes yav-melange{ 0%{ transform:translateX(calc(var(--x) * .55)) rotate(calc(var(--r) * .55)); } 45%{ transform:translateX(calc(var(--x) * -1.2)) rotate(calc(var(--r) * -1.4)) translateY(-18px); } 100%{ transform:translateX(calc(var(--x) * .55)) rotate(calc(var(--r) * .55)); } }
html body .ya2 button.yav-pioche:focus-visible{ outline:3px solid #9CC2FF !important; outline-offset:10px; border-radius:20px !important; }
html body .ya2 .yav-consigne{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 !important; }
html body .ya2 .yav-btn{ display:inline-flex; background:#fff; color:#0B0D12; border-radius:999px; padding:13px 26px; font-size:17px; font-weight:600; cursor:pointer; }
html body .ya2 .yav-btn:focus-visible{ outline:3px solid #9CC2FF; outline-offset:3px; }
html body .ya2 .yav-sous{ font-size:14px; color:#9AA0A8; }

html body .ya2 .yav-zone{ perspective:1600px; display:flex; justify-content:center; }
html body .ya2 .yav-carte{ position:relative; width:100%; max-width:440px; min-height:420px; display:flex; flex-direction:column; gap:12px; padding:34px 34px 30px; border-radius:24px; overflow:hidden; color:#fff; background:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.30) 0%, transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.35) 0%, transparent 70%), linear-gradient(155deg, var(--c1) 0%, var(--c2) 100%); box-shadow:0 40px 80px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.18); transform-style:preserve-3d; transition:transform .45s cubic-bezier(.4,.1,.3,1), opacity .2s; }
html body .ya2 .yav-carte.yav-sort{ transform:rotateY(90deg) scale(.96); }
html body .ya2 .yav-carte.yav-entre{ animation:yav-entre .55s cubic-bezier(.2,.8,.2,1); }
@keyframes yav-entre{ from{ transform:rotateY(-90deg) scale(.96); } to{ transform:none; } }
html body .ya2 .yav-ic{ position:absolute; right:-18px; top:-18px; width:180px; height:180px; color:rgba(255,255,255,.18); pointer-events:none; }
html body .ya2 .yav-ic svg{ width:100%; height:100%; }
html body .ya2 .yav-k{ position:relative; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); }
html body .ya2 h3.yav-t{ position:relative; margin:56px 0 0 !important; padding:0 !important; font-size:40px !important; line-height:1.04 !important; font-weight:700 !important; letter-spacing:-.035em !important; color:#fff !important; text-transform:none !important; }
html body .ya2 p.yav-d{ position:relative; margin:4px 0 0 !important; font-size:16px !important; line-height:1.5 !important; color:rgba(255,255,255,.88) !important; max-width:28em; }
html body .ya2 .yav-pied{ position:relative; margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
html body .ya2 a.yav-go{ display:inline-flex; align-items:center; gap:8px; background:#fff !important; color:#0B0D12 !important; border-radius:999px; padding:12px 24px; font-size:16px; font-weight:600; text-decoration:none !important; transition:transform .2s; }
html body .ya2 a.yav-go:hover{ transform:translateX(3px); }
html body .ya2 .yav-n{ font-size:14px; font-weight:600; color:rgba(255,255,255,.8); }
html body .ya2 .yav-brille{ position:absolute; inset:-40%; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform:translateX(-60%); animation:yav-brille 5.5s ease-in-out infinite; pointer-events:none; }
@keyframes yav-brille{ 0%,62%{ transform:translateX(-60%); } 100%{ transform:translateX(60%); } }
html body #ya2-jeux .ya2-jeux-tous{ margin-top:32px !important; text-align:center; font-size:17px; }

/* ============ 2. Cours en ligne : illustrations ============ */
html body .ya2 .ya2-cours-g .yav-ill{ position:absolute; left:14px; right:14px; top:18px; height:140px; display:block; pointer-events:none; }
html body .ya2 .ya2-cours-g .yav-ill svg{ width:100%; height:100%; display:block; overflow:visible; }
html body .ya2 .ya2-cours-g a{ min-height:360px; }
html body .ya2 .ya2-cours-g a:hover .yav-ill{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
html body .ya2 .yav-ill *{ transform-box:fill-box; }
html body .ya2 .yav-fen{ transform-origin:center; animation:yav-fen 6s ease-in-out infinite; }
html body .ya2 .yav-fen2{ transform-origin:center; animation:yav-fen2 6s ease-in-out infinite; }
@keyframes yav-fen{ 0%,8%{ opacity:0; transform:scale(.6) translateY(14px); } 18%,70%{ opacity:1; transform:none; } 82%,100%{ opacity:0; transform:scale(.9); } }
@keyframes yav-fen2{ 0%,30%{ opacity:0; transform:translateX(16px); } 40%,72%{ opacity:1; transform:none; } 84%,100%{ opacity:0; } }
html body .ya2 .yav-dock{ animation:yav-dock 6s ease-in-out infinite; }
html body .ya2 .yav-d2{ animation-delay:.25s; } html body .ya2 .yav-d3{ animation-delay:2.2s; } html body .ya2 .yav-d4{ animation-delay:3.6s; }
@keyframes yav-dock{ 0%,4%,16%,100%{ transform:none; } 8%{ transform:translateY(-6px); } 12%{ transform:translateY(-1px); } }
html body .ya2 .yav-ill .yav-portee{ transform-box:view-box; animation:yav-portee 7s linear infinite; }
@keyframes yav-portee{ from{ transform:translateX(0); } to{ transform:translateX(-192px); } }
html body .ya2 .yav-tch{ animation:yav-tch 3.5s ease-in-out infinite; animation-delay:calc(var(--i) * .5s); }
@keyframes yav-tch{ 0%,12%,100%{ fill:rgba(255,255,255,.9); } 5%{ fill:#FFD9B0; } }
html body .ya2 .yav-ill .yav-tete{ transform-box:view-box; animation:yav-tete 4s linear infinite; }
@keyframes yav-tete{ from{ transform:translateX(4px); } to{ transform:translateX(190px); } }
html body .ya2 .yav-rec{ animation:yav-rec 1.2s steps(2,start) infinite; }
@keyframes yav-rec{ to{ opacity:.15; } }
html body .ya2 .yav-mire{ transform-origin:center; animation:yav-mire 2.6s ease-in-out infinite; }
@keyframes yav-mire{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(.82); } 55%{ transform:scale(.9); } }
html body .ya2 .yav-ill .yav-pelli{ transform-box:view-box; animation:yav-pelli 5s linear infinite; }
@keyframes yav-pelli{ from{ transform:translateX(0); } to{ transform:translateX(-84px); } }
html body .ya2 .yav-l{ transform-origin:left center; animation:yav-l 5s ease-in-out infinite; }
html body .ya2 .yav-l2{ animation-delay:.5s; } html body .ya2 .yav-l3{ animation-delay:1s; } html body .ya2 .yav-l4{ animation-delay:1.5s; }
@keyframes yav-l{ 0%{ transform:scaleX(0); } 22%,78%{ transform:scaleX(1); } 92%,100%{ transform:scaleX(0); } }
html body .ya2 .yav-etinc{ transform-origin:center; animation:yav-etinc 2.4s ease-in-out infinite; }
@keyframes yav-etinc{ 0%,100%{ transform:scale(.6) rotate(0); opacity:.6; } 50%{ transform:scale(1.15) rotate(45deg); opacity:1; } }

/* ============ 3. Communauté ============ */
html body .ya2 #ya2-communaute ul.ya2-com-nuage > li > i.yav-ping{ position:absolute !important; top:6% !important; right:6% !important; left:auto !important; bottom:auto !important; display:block !important; width:22px !important; height:22px !important; border-radius:50% !important; background:#FF453A !important; border:3px solid #fff !important; box-shadow:0 4px 10px rgba(0,0,0,.25) !important; transform:scale(0) !important; transition:transform .35s cubic-bezier(.3,1.6,.5,1) !important; z-index:4 !important; padding:0 !important; margin:0 !important; opacity:1 !important; }
html body .ya2 #ya2-communaute ul.ya2-com-nuage > li > i.yav-ping::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid #FF453A; opacity:0; }
html body .ya2 #ya2-communaute ul.ya2-com-nuage > li.yav-on > i.yav-ping{ transform:scale(1) !important; }
html body .ya2 #ya2-communaute ul.ya2-com-nuage > li.yav-on > i.yav-ping::after{ animation:yav-onde 1.2s ease-out 2; }
@keyframes yav-onde{ from{ opacity:.9; transform:scale(.8); } to{ opacity:0; transform:scale(2.2); } }
html body .ya2 .yav-compte{ font-variant-numeric:tabular-nums; }

/* ============ petits écrans ============ */
@media (max-width:1000px){
  html body .ya2 .yav-jeu{ grid-template-columns:1fr; padding:44px 28px 48px; }
  html body .ya2 .yav-paquet{ order:2; }
}
@media (max-width:600px){
  html body .ya2 .yav-jeu{ margin-top:40px; border-radius:24px; padding:32px 18px 36px; gap:36px; }
  html body .ya2 .yav-carte{ min-height:380px; padding:28px 24px 24px; }
  html body .ya2 h3.yav-t{ font-size:32px !important; margin-top:44px !important; }
  html body .ya2 button.yav-pioche{ width:170px; height:232px; }
  html body .ya2 .ya2-cours-g a{ min-height:300px; }
  html body .ya2 .ya2-cours-g .yav-ill{ height:120px; }
}
@media (prefers-reduced-motion: reduce){
  html body .ya2 .yav-ill *, html body .ya2 .yav-brille, html body .ya2 .yav-dos, html body .ya2 .yav-carte{ animation:none !important; transition:none !important; }
}

/* place réservée à l'illustration au-dessus du titre de la tuile */
html body .ya2 .ya2-cours-g a{ padding-top:172px !important; min-height:380px; }
html body .ya2 .ya2-cours-g .ya2-cours-n{ margin-top:auto; }
html body .ya2 .ya2-cours-g .yav-ill{ height:132px; }
@media (max-width:600px){ html body .ya2 .ya2-cours-g a{ padding-top:150px !important; min-height:0; } html body .ya2 .ya2-cours-g .yav-ill{ height:116px; left:24px; right:24px; } }
html body .ya2 .yav-ill ellipse, html body .ya2 .yav-ill g[transform]{ transform-box:view-box; }