/* MJ Academy · bannières, personas, paiements, contact, animations supplémentaires */

/* Variantes de révélation */
.js .reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .9s ease,transform .9s ease;transition-delay:var(--d,0s)}
.js .reveal-r{opacity:0;transform:translateX(40px);transition:opacity .9s ease,transform .9s ease;transition-delay:var(--d,0s)}
.js .reveal-z{opacity:0;transform:scale(.92);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .reveal-l.in,.js .reveal-r.in,.js .reveal-z.in{opacity:1;transform:none}

/* Reflet sur les gros boutons */
.btn.big,.btn.shine{position:relative;overflow:hidden}
.btn.big::after,.btn.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

/* Fond wax animé */
.wax-bg{position:relative}
.wax-bg::before{content:"";position:absolute;inset:0;background:url("/img/wax-pattern.svg");background-size:176px;opacity:.05;animation:drift 60s linear infinite;pointer-events:none}
:root[data-theme="light"] .wax-bg::before{opacity:.07}
@keyframes drift{to{background-position:176px 176px}}
.wax-bg>*{position:relative}

/* Bannière */
.banner{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#0F5BD8;border:1px solid var(--line)}
.banner img{width:100%;height:auto;min-height:220px;object-fit:cover;object-position:center bottom;display:block;will-change:transform}
.bub{position:absolute;max-width:190px;padding:9px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:#0B1A33;font-size:13px;font-weight:600;line-height:1.3;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);opacity:0;transform:translateY(12px) scale(.85);animation:pop 12s infinite}
.bub.r{border-radius:16px 16px 4px 16px}
.bub.b1{left:5%;top:14%;animation-delay:.4s}
.bub.b2{left:28%;top:6%;animation-delay:3.2s}
.bub.b3{left:54%;top:10%;animation-delay:6s}
.bub.b4{left:77%;top:14%;animation-delay:8.8s}
@keyframes pop{0%{opacity:0;transform:translateY(12px) scale(.85)}6%,22%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(-8px) scale(.95)}}
.banner-foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:22px}

/* Personas */
.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.persona{display:flex;flex-direction:column;gap:12px;padding:12px 12px 20px;border-radius:22px;background:var(--solid);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s,border-color .3s}
.persona:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--shadow);border-color:var(--accent)}
.persona img{width:100%;border-radius:16px}
.persona h3{padding:0 8px;font-size:18px}
.persona p{padding:0 8px;font-size:14.5px;color:var(--mute)}
.persona:nth-child(odd) img{animation:bob 6s ease-in-out infinite}
.persona:nth-child(even) img{animation:bob 6s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateY(-4px)}}

/* Paiements */
.pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:28px}
.pay-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.pay-item:hover{transform:translateY(-3px);border-color:var(--accent)}
.pay-item svg{width:34px;height:34px;color:var(--accent);flex-shrink:0}
.pay-item b{display:block;color:var(--head);font-size:15.5px}
.pay-item span{font-size:13px;color:var(--mute)}
.pay-title{text-align:center;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:34px}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.contact-side{display:flex;flex-direction:column;gap:20px}
.contact-side .persona-lg{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);max-width:340px}
.contact-side .persona-lg img{width:100%;animation:bob 7s ease-in-out infinite}
.ways{display:flex;flex-direction:column;gap:10px}
.way{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--head);text-decoration:none;transition:border-color .2s,transform .2s}
.way:hover{border-color:var(--accent);transform:translateX(4px);color:var(--head)}
.way svg{width:26px;height:26px;color:var(--accent);flex-shrink:0}
.way small{display:block;color:var(--mute);font-size:13px}
.cform{display:flex;flex-direction:column;gap:16px;padding:32px 28px;border-radius:22px;background:var(--solid);border:1px solid var(--line);box-shadow:var(--shadow)}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--head)}
.cform label small{font-weight:400;color:var(--mute)}
.cform input,.cform select,.cform textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--input-line);background:var(--input-bg);color:var(--head);border-radius:10px;width:100%;min-height:48px}
.cform textarea{min-height:130px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--btn);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--btn) 25%,transparent)}
.cform .tiny{font-size:12.5px;color:var(--mute)}
.cform .status{padding:14px 16px;border-radius:12px;font-size:14.5px;display:none}
.cform .status.ok{display:block;background:color-mix(in srgb,var(--pos) 14%,transparent);border:1px solid var(--pos);color:var(--head)}
.cform .status.err{display:block;background:color-mix(in srgb,var(--neg) 12%,transparent);border:1px solid var(--neg);color:var(--head)}
.cform .btn{width:100%}
.cform .btn svg{width:20px;height:20px}

@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .contact-side .persona-lg{max-width:260px}
  .bub{font-size:11.5px;max-width:130px;padding:7px 10px}
  .bub.b3{left:50%}.bub.b4{display:none}
}
@media (max-width:600px){
  .cform .two{grid-template-columns:1fr}
  .cform{padding:24px 18px}
  .banner img{min-height:200px}
}
@media (prefers-reduced-motion:reduce){
  .btn.big::after,.btn.shine::after,.wax-bg::before,.persona img,.contact-side .persona-lg img{animation:none}
  .bub{animation:none;opacity:1;transform:none;position:static;display:none}
  .js .reveal-l,.js .reveal-r,.js .reveal-z{opacity:1;transform:none;transition:none}
}
.cform label span small{display:inline}