/* ===== Page d'accueil : héros animé (palette bleu / orange) ===== */
.hero.hero-3d{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:-98px;padding:150px 0 150px;
  background:
    radial-gradient(520px 380px at 48% 58%,rgba(255,160,80,.42),transparent 70%),
    linear-gradient(105deg,#f8f5f0 0%,#ffe8d3 26%,#d3e2ff 48%,#5a8cf8 74%,#1f47bd 100%);
  background-size:100% 100%,170% 100%;
  background-position:0 0,0% 50%;
  animation:heroShift 20s ease-in-out infinite alternate;
}
@keyframes heroShift{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
.hero.hero-3d:after{
  content:"";position:absolute;left:-5%;right:-5%;bottom:-2px;height:92px;z-index:1;
  background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0;
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.08fr;gap:10px;align-items:center}
.hero-copy{padding-bottom:10px}

/* Texte : entrée orchestrée */
.hero h1{font-size:clamp(40px,5.3vw,76px);font-weight:800;line-height:1.04;letter-spacing:-.035em;margin:0 0 20px;color:#0a0f22}
.hero h1 .line{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .line>i{display:inline-block;font-style:normal;transform:translateY(112%);animation:lineUp .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.hero h1 .line>i{color:#0a0f22}
.hero h1 .l2>i{color:var(--blue)}
@keyframes lineUp{to{transform:none}}
.hero p{font-size:clamp(16px,1.6vw,19px);color:#2b3858;max-width:520px;line-height:1.6}
.rise{opacity:0;transform:translateY(20px);animation:rise .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero .btn.primary{position:relative;overflow:hidden}
.hero .btn.primary:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out 2s infinite}
@keyframes shine{0%{left:-60%}35%,100%{left:140%}}

/* Scène */
.math-scene{position:relative;width:100%;height:calc(470px*var(--k,1));perspective:1200px;--mx:0;--my:0}
.scene-stage{position:absolute;left:0;top:0;width:560px;height:470px;transform:scale(var(--k,1));transform-origin:top left}
.layer{position:absolute;transform:translate3d(calc(var(--mx)*var(--d,10)*1px),calc(var(--my)*var(--d,10)*1px),0);will-change:transform}
.bob{animation:bob var(--t,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.orbit{position:absolute;border-radius:50%;border:1.5px dashed rgba(255,255,255,.38);pointer-events:none}
.orbit:after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#ffb36b;box-shadow:0 0 16px 3px rgba(255,170,90,.8)}
.orbit-one{left:90px;top:30px;width:410px;height:410px;animation:spin 38s linear infinite}
.orbit-two{left:40px;top:20px;width:500px;height:500px;border-color:rgba(255,255,255,.26);animation:spinTilt 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinTilt{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}

/* Formules */
.formula{font-family:"Cambria Math",Cambria,Georgia,"Times New Roman",serif;font-style:italic;font-size:30px;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(10,30,100,.35);white-space:nowrap}
.formula.big{font-size:60px;color:rgba(40,70,160,.85);text-shadow:none}

/* Graphique : la courbe se dessine en boucle */
.graph{display:block;overflow:visible}
.graph .axis,.graph .tick{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.graph .curve{fill:none;stroke:#ffd6a8;stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 7s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:260;opacity:1}40%,82%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:260;opacity:0}}

/* Cube en fil de fer */
.cube{position:relative;width:100px;height:100px;transform-style:preserve-3d;animation:spinCube 18s linear infinite}
.cube i{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,.13)}
.cube .front{transform:translateZ(50px)}.cube .back{transform:rotateY(180deg) translateZ(50px)}
.cube .right{transform:rotateY(90deg) translateZ(50px)}.cube .left{transform:rotateY(-90deg) translateZ(50px)}
.cube .top{transform:rotateX(90deg) translateZ(50px)}.cube .bottom{transform:rotateX(-90deg) translateZ(50px)}
@keyframes spinCube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}

/* Pyramide */
.pyr-wrap{width:90px;height:100px;transform:rotateX(-16deg);transform-style:preserve-3d}
.pyr{position:relative;width:90px;height:100px;transform-style:preserve-3d;animation:spinPyr 14s linear infinite}
.pf{position:absolute;left:0;bottom:0;width:90px;height:110px;transform-origin:50% 100%;clip-path:polygon(50% 0,0 100%,100% 100%)}
.pf:nth-child(1){transform:rotateY(0) translateZ(45px) rotateX(24deg);background:linear-gradient(#d9ecff,#8dbaff)}
.pf:nth-child(2){transform:rotateY(90deg) translateZ(45px) rotateX(24deg);background:linear-gradient(#a9cdff,#5b93f5)}
.pf:nth-child(3){transform:rotateY(180deg) translateZ(45px) rotateX(24deg);background:linear-gradient(#cfe5ff,#7aa9fb)}
.pf:nth-child(4){transform:rotateY(270deg) translateZ(45px) rotateX(24deg);background:linear-gradient(#8fb9ff,#3f78ee)}
@keyframes spinPyr{to{transform:rotateY(360deg)}}

/* Sphères */
.sphere{border-radius:50%;box-shadow:0 18px 30px rgba(10,30,100,.3)}
.sphere.blue{width:62px;height:62px;background:radial-gradient(circle at 32% 28%,#a9c8ff 0,#2f6df0 38%,#0b2f9a 100%)}
.sphere.orange{width:50px;height:50px;background:radial-gradient(circle at 32% 28%,#ffd7ae,#ff9335 45%,#d9600c)}

/* Pastilles de symboles */
.chip{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:700 26px Georgia,serif;box-shadow:0 8px 20px rgba(10,30,100,.2)}

/* Pile de livres */
.books{width:300px;display:flex;flex-direction:column;gap:3px;transform:rotate(-7deg) skewX(-4deg);filter:drop-shadow(0 22px 22px rgba(8,25,90,.35))}
.book{position:relative;height:58px;border-radius:6px 12px 12px 6px;padding:0 26px;display:flex;align-items:center;font-weight:800;font-size:21px;color:#fff;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.book:before{content:"";position:absolute;right:0;top:7px;bottom:7px;width:30px;border-radius:0 8px 8px 0;background:repeating-linear-gradient(180deg,#f6f1e8 0 2px,#d9d2c3 2px 3px)}
.book.b1{background:linear-gradient(180deg,#ffa347,#e5701a);width:94%;margin-left:6%}
.book.b2{background:linear-gradient(180deg,#3d86ff,#1456f0);width:100%}
.book.b3{background:linear-gradient(180deg,#25479a,#0b2a6c);width:98%;margin-left:3%}

/* Calculatrice */
.calc{width:150px;height:190px;padding:12px;border-radius:16px;background:linear-gradient(160deg,#2a4784,#0d1f4d);box-shadow:0 22px 28px rgba(8,25,90,.4);transform:rotate(-14deg) rotateX(14deg)}
.calc-screen{height:34px;margin-bottom:10px;padding:0 8px;border-radius:7px;background:linear-gradient(#c5dcff,#92bbf6);color:#0a2a6b;font:700 15px/34px "Courier New",monospace;text-align:right;overflow:hidden;white-space:nowrap}
.calc-screen:after{content:"";display:inline-block;width:2px;height:16px;margin-left:2px;vertical-align:middle;background:#0a2a6b;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.calc-keys span{height:22px;border-radius:6px;background:#3b5fae;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:transform .12s,background .12s}
.calc-keys span.o{background:#f58a2b}
.calc-keys span.on{transform:translateY(2px);background:#8fb4ff}
.calc-keys span.o.on{background:#ffc78f}

/* Mode sombre */
body.dark .hero.hero-3d{background:radial-gradient(520px 380px at 48% 58%,rgba(255,140,60,.2),transparent 70%),linear-gradient(105deg,#0b1220 0%,#10244a 45%,#1d46b8 100%);background-size:100% 100%,170% 100%}
body.dark .hero h1 .line>i{color:#fff}body.dark .hero h1 .l2>i{color:#7fb0ff}body.dark .hero p{color:#c9d6f2}
body.dark .formula.big{color:rgba(190,215,255,.9)}

/* Tablette / mobile */
@media(max-width:900px){
  .hero.hero-3d{padding:130px 0 120px;background:radial-gradient(420px 320px at 60% 70%,rgba(255,160,80,.4),transparent 70%),linear-gradient(180deg,#f8f5f0 0%,#ffe8d3 28%,#d3e2ff 50%,#4f83f5 78%,#1f47bd 100%);background-size:100% 100%;animation:none}
  body.dark .hero.hero-3d{background:linear-gradient(180deg,#0b1220,#10244a 50%,#1d46b8)}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .math-scene{margin:0 auto;max-width:560px}
}

/* Accessibilité : pas de mouvement si demandé */
@media(prefers-reduced-motion:reduce){
  .hero.hero-3d,.hero h1 .line>i,.rise,.bob,.orbit,.cube,.pyr,.graph .curve,.calc-screen:after,.hero .btn.primary:before{animation:none!important}
  .hero h1 .line>i{transform:none}.rise{opacity:1;transform:none}.graph .curve{stroke-dashoffset:0}
  html.js .reveal{opacity:1;transform:none;transition:none}
}