/* YouTips, accueil : bandeau « pédagogie » (24 oct. 2026)
   Grandes phrases colorées qui s'entrecroisent, fond noir fixe (clair et sombre).
   Couleurs : palette arc-en-ciel du site, sans le bleu (réservé aux liens). */
html body #ypg.ypg{position:relative!important;overflow:hidden!important;isolation:isolate!important;background:#0B0D12!important;color:#FFFFFF!important;margin:0!important;padding:150px 0 160px!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
#ypg *{box-sizing:border-box}

/* La scène : les lignes se chevauchent et se croisent */
#ypg .ypg-scene{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;pointer-events:none;user-select:none}
#ypg .ypg-l{position:relative!important;display:block!important;width:100%!important;overflow:visible!important;white-space:nowrap!important;margin:0!important;padding:0!important;line-height:.92!important;font-weight:700!important;letter-spacing:-.045em!important;mix-blend-mode:screen!important;will-change:transform!important}
#ypg .ypg-l > span{display:inline-block;will-change:transform}
#ypg .ypg-l i{font-style:normal;display:inline-block;width:.6em}
#ypg .ypg-l.ypg-o{color:transparent!important;-webkit-text-stroke:2px var(--ypg-c)!important}

#ypg .ypg-l1{--ypg-c:#FF375F!important;font-size:clamp(52px,9.2vw,152px)!important;color:#FF375F!important}
#ypg .ypg-l2{--ypg-c:#FFD60A!important;font-size:clamp(64px,12vw,196px)!important;color:#FFD60A!important;margin-top:-.3em!important;padding-left:18vw!important}
#ypg .ypg-l3{--ypg-c:#BF5AF2!important;font-size:clamp(44px,7.4vw,124px)!important;color:#BF5AF2!important;margin-top:-.55em!important;transform:rotate(-6deg)!important;transform-origin:50% 50%!important;z-index:2!important}
#ypg .ypg-l4{--ypg-c:#32D74B!important;font-size:clamp(48px,8.4vw,140px)!important;color:#32D74B!important;margin-top:-.3em!important}
#ypg .ypg-l5{--ypg-c:#FF375F!important;font-size:clamp(46px,7.8vw,132px)!important;color:#FF375F!important;margin-top:-.6em!important;transform:rotate(5deg)!important;z-index:2!important}
#ypg .ypg-l6{--ypg-c:#FF9F0A!important;font-size:clamp(40px,6.6vw,112px)!important;color:#FF9F0A!important;margin-top:-.25em!important}
#ypg .ypg-l7{--ypg-c:rgba(255,255,255,.6)!important;font-size:clamp(52px,9.6vw,160px)!important;color:#FFFFFF!important;margin-top:-.35em!important}
#ypg .ypg-l.ypg-l7.ypg-o{-webkit-text-stroke-width:1.5px!important}

/* Halo de couleur discret derrière la scène */
#ypg::before{content:"";position:absolute;inset:-10% -10% auto;height:70%;z-index:-1;background:radial-gradient(40% 50% at 20% 40%,rgba(255,55,95,.16),transparent 70%),radial-gradient(40% 50% at 80% 30%,rgba(255,159,10,.12),transparent 70%),radial-gradient(40% 50% at 55% 70%,rgba(191,90,242,.14),transparent 70%);pointer-events:none}

/* Le texte lisible sous la scène */
#ypg .ypg-in{position:relative;z-index:3;max-width:1120px;margin:96px auto 0!important;padding:0 40px!important}
#ypg .ypg-h{margin:0!important;padding:0!important;font-size:64px!important;line-height:1.05!important;font-weight:700!important;letter-spacing:-.035em!important;color:#FFFFFF!important;max-width:820px;text-wrap:balance}
#ypg .ypg-h span{color:rgba(255,255,255,.55)!important}
#ypg .ypg-chapo{margin:28px 0 0!important;padding:0!important;max-width:640px;font-size:21px!important;line-height:1.55!important;color:rgba(255,255,255,.75)!important}
#ypg .ypg-mots{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0!important;padding:0!important;list-style:none!important}
#ypg .ypg-mots li{margin:0!important;padding:8px 14px!important;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-size:15px!important;font-weight:600;line-height:1.3;color:rgba(255,255,255,.88)!important;list-style:none!important;background:rgba(255,255,255,.04)}
#ypg .ypg-mots li::before{content:none!important}
#ypg .ypg-lien{display:inline-block;margin-top:36px;font-size:16px!important;font-weight:600!important;color:#8AB8FF!important;text-decoration:none!important}
#ypg .ypg-lien:hover,#ypg .ypg-lien:focus-visible{text-decoration:underline!important}
#ypg .ypg-lien:focus-visible{outline:2px solid #8AB8FF;outline-offset:3px}
#ypg .ypg-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Apparition */
html.ypg-js #ypg .ypg-l{opacity:0;transition:opacity 1s ease}
html.ypg-js #ypg.is-vu .ypg-l{opacity:1}
html.ypg-js #ypg.is-vu .ypg-l2{transition-delay:.12s}
html.ypg-js #ypg.is-vu .ypg-l3{transition-delay:.24s}
html.ypg-js #ypg.is-vu .ypg-l4{transition-delay:.36s}
html.ypg-js #ypg.is-vu .ypg-l5{transition-delay:.48s}
html.ypg-js #ypg.is-vu .ypg-l6{transition-delay:.6s}
html.ypg-js #ypg.is-vu .ypg-l7{transition-delay:.72s}

@media (max-width:1024px){
 #ypg .ypg-h{font-size:52px!important}
}
@media (max-width:760px){
 html body #ypg.ypg{padding:88px 0 88px!important}
 #ypg .ypg-in{margin-top:56px!important;padding:0 20px!important}
 #ypg .ypg-h{font-size:38px!important;line-height:1.08!important}
 #ypg .ypg-chapo{font-size:18px!important}
 #ypg .ypg-l.ypg-o{-webkit-text-stroke-width:1.2px!important}
 #ypg .ypg-l2{padding-left:8vw!important;font-size:88px!important}
 #ypg .ypg-l1{font-size:66px!important}
 #ypg .ypg-l3{font-size:58px!important}
 #ypg .ypg-l4{font-size:62px!important}
 #ypg .ypg-l5{font-size:60px!important}
 #ypg .ypg-l6{font-size:54px!important}
 #ypg .ypg-l7{font-size:68px!important}
}
@media (prefers-reduced-motion:reduce){
 html.ypg-js #ypg .ypg-l{opacity:1;transition:none}
 #ypg .ypg-l > span{transform:none!important}
}

/* Page Formations (56722) : plus de phrases, qui défilent toutes seules (24 oct. 2026).
   Arrêt au bouton pause, hors écran et avec prefers-reduced-motion. */
html body #ypg.ypg.ypg-f{padding:140px 0 8px!important}
#ypg.ypg-f .ypg-l1{font-size:clamp(44px,7vw,116px)!important}
#ypg.ypg-f .ypg-l2{font-size:clamp(52px,8.8vw,148px)!important;padding-left:0!important}
#ypg.ypg-f .ypg-l3{font-size:clamp(38px,5.8vw,98px)!important}
#ypg.ypg-f .ypg-l4{font-size:clamp(40px,6.4vw,108px)!important}
#ypg.ypg-f .ypg-l5{font-size:clamp(40px,6vw,102px)!important}
#ypg.ypg-f .ypg-l6{font-size:clamp(36px,5.4vw,92px)!important}
#ypg.ypg-f .ypg-l7{font-size:clamp(44px,7.2vw,122px)!important}
#ypg.ypg-f .ypg-l > span{animation:ypg-defile var(--ypg-d,70s) linear infinite;animation-delay:var(--ypg-r,0s)}
#ypg.ypg-f .ypg-l.ypg-inv > span{animation-direction:reverse}
#ypg.ypg-f.is-pause .ypg-l > span,#ypg.ypg-f.is-hors .ypg-l > span{animation-play-state:paused}
@keyframes ypg-defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
#ypg .ypg-pause{position:relative;z-index:3;display:inline-flex;align-items:center;min-height:44px;margin:56px 0 0 max(40px,calc((100% - 1120px) / 2))!important;padding:0 18px!important;background:transparent!important;border:1px solid rgba(255,255,255,.32)!important;border-radius:6px!important;color:#FFFFFF!important;font:600 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;box-shadow:none!important;cursor:pointer}
#ypg .ypg-pause:hover{border-color:rgba(255,255,255,.65)!important}
#ypg .ypg-pause:focus-visible{outline:2px solid #8AB8FF;outline-offset:3px}
@media (max-width:760px){
 html body #ypg.ypg.ypg-f{padding:88px 0 0!important}
 #ypg .ypg-pause{margin-left:20px!important}
}
@media (prefers-reduced-motion:reduce){
 #ypg.ypg-f .ypg-l > span{animation:none!important}
 #ypg .ypg-pause{display:none!important}
}