/* ===== Animation d'entrée (maquette Claude Design) — tout en CSS, seul le calque #intro est animé ===== */
:root{--intro-accent:#C79A3B}
#intro{--cs:240px;--bs:90px;--lf:136px;--lw:300px;--roll:-900px;
  position:fixed;inset:0;z-index:9999;overflow:hidden;perspective:1800px;transform-style:preserve-3d;
  font-family:'Nunito',system-ui,sans-serif;animation:it-gone 4.65s linear both}
html.intro-play{overflow:hidden}
html.intro-play #app{animation:it-siteIn 1.3s cubic-bezier(.2,.7,.2,1) 3.5s both;transform-origin:50% 40%}
#intro.it-out{animation:it-fade .3s ease both}
#intro *{box-sizing:border-box}

.it-door{position:absolute;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
.it-door-a{left:0;top:0;width:50%;height:100%;transform-origin:0 50%;background:linear-gradient(90deg,#0E2519 0%,#17392A 60%,#1C4534 100%);box-shadow:inset -40px 0 80px rgba(0,0,0,.35);animation:it-doorL 1.1s cubic-bezier(.7,0,.25,1) 3.5s both}
.it-door-b{left:50%;top:0;width:50%;height:100%;transform-origin:100% 50%;background:linear-gradient(270deg,#0E2519 0%,#17392A 60%,#1C4534 100%);box-shadow:inset 40px 0 80px rgba(0,0,0,.35);animation:it-doorR 1.1s cubic-bezier(.7,0,.25,1) 3.5s both}

.it-stage{position:absolute;inset:0;overflow:hidden;animation:it-stageOut .5s ease-in 3.35s both}
.it-glow{position:absolute;left:50%;top:46%;width:min(800px,130vw);height:min(800px,130vw);margin:calc(min(800px,130vw) / -2) 0 0 calc(min(800px,130vw) / -2);border-radius:50%;
  background:radial-gradient(circle,rgba(95,142,120,.55) 0%,rgba(44,98,72,.25) 35%,rgba(23,57,42,0) 70%);animation:it-glow 1.2s ease-out 1.7s both}
.it-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:42%;transform:perspective(900px) rotateX(66deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(205,235,218,.16) 0 2px,transparent 2px 110px),repeating-linear-gradient(0deg,rgba(205,235,218,.16) 0 2px,transparent 2px 110px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 92%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 92%)}
.it-hz{position:absolute;left:0;right:0;top:60%;height:2px;background:linear-gradient(90deg,transparent,rgba(205,235,218,.45),transparent)}
.it-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 43%,rgba(255,243,196,.9),rgba(255,243,196,0) 45%);animation:it-flash .7s ease-out 1.68s both}
.it-spark{position:absolute;border-radius:50%;background:#FFE7A3;box-shadow:0 0 10px 2px rgba(255,231,163,.7);opacity:0;animation:it-sparkle 1.6s ease-out both}

.it-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px}
.it-crestbox{position:relative;width:var(--cs);height:var(--cs);flex-shrink:0;perspective:900px}
.it-burst{position:absolute;inset:0;border:6px solid var(--intro-accent);border-radius:50%;animation:it-burst .8s ease-out 1.68s both}
.it-crest{position:absolute;inset:0;border-radius:50%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));will-change:transform,opacity;animation:it-crestIn .9s cubic-bezier(.3,1.2,.4,1) 1.68s both}
.it-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#8A6420,#E6C46A,#FFF3C4,#C79A3B,#8A6420,#E6C46A,#FFF3C4,#C79A3B,#8A6420);animation:it-ringSpin 6s linear 1.7s infinite}
.it-disc{position:absolute;inset:calc(var(--cs) * .0375);border-radius:50%;background:radial-gradient(circle at 40% 32%,#fff 0%,#F1F6F3 60%,#D3E3D9 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 -10px 24px rgba(23,57,42,.18)}
.it-disc img{width:66%;height:72%;object-fit:contain;position:relative}
.it-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-120%);animation:it-sweep 1.1s cubic-bezier(.4,0,.2,1) 2.5s both}
.it-ball-x{position:absolute;left:calc((var(--cs) - var(--bs)) / 2);top:calc((var(--cs) - var(--bs)) / 2);width:var(--bs);height:var(--bs);will-change:transform;animation:it-rollX 1.1s cubic-bezier(.15,.65,.25,1) .2s both}
.it-trail{position:absolute;left:calc(var(--bs) * -2.9);top:calc(var(--bs) * .29);width:calc(var(--bs) * 3.3);height:calc(var(--bs) * .44);border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55));filter:blur(10px);transform-origin:100% 50%;animation:it-trail 1.1s ease-out .2s both}
.it-shd{position:absolute;left:7%;top:102%;width:86%;height:15%;border-radius:50%;background:#000;opacity:.4;filter:blur(3px);animation:it-hopS .66s cubic-bezier(.3,.6,.4,1) 1.35s both}
.it-ball-y{position:relative;width:100%;height:100%;animation:it-hop .66s cubic-bezier(.3,.6,.4,1) 1.35s both}
.it-ball-r{display:block;width:100%;height:100%;animation:it-spin 1.1s cubic-bezier(.15,.65,.25,1) .2s both}
.it-sphere{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 46%,rgba(0,0,0,.62) 100%)}

.it-letters{display:flex;gap:calc(var(--lf) * .06);margin-top:34px;font-family:'Lilita One',sans-serif;font-size:var(--lf);line-height:1;color:#fff;perspective:900px}
.it-letters span{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;
  text-shadow:0 1px 0 #DCEBE2,0 2px 0 #C9DDD1,0 3px 0 #B7CFC1,0 4px 0 #A5C1B1,0 5px 0 #93B3A1,0 6px 0 #81A591,0 7px 0 #6F9781,0 8px 0 #5D8971,0 18px 30px rgba(0,0,0,.5);
  animation:it-drop .7s cubic-bezier(.3,.8,.3,1) both}
.it-line{width:var(--lw);height:6px;border-radius:3px;margin-top:22px;background:linear-gradient(90deg,transparent,var(--intro-accent) 20%,#FFF3C4 50%,var(--intro-accent) 80%,transparent);animation:it-grow .6s cubic-bezier(.6,0,.2,1) 2.65s both}
.it-sub{margin-top:20px;font-size:18px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#CDEBDA;text-align:center;animation:it-up .5s ease-out 2.8s both}
.it-skip{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:3;min-height:44px;padding:0 20px;border-radius:999px;background:rgba(23,57,42,.45);border:1px solid rgba(205,235,218,.5);color:#E4F3EA;font:800 15px 'Nunito',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:it-fade .4s ease .3s both reverse}
.it-skip:focus-visible{outline:3px solid #C79A3B;outline-offset:3px}

/* Mobile : portes haut / bas, tailles réduites (maquette 390 px) */
@media (max-width:767px){
  #intro{--cs:170px;--bs:66px;--lf:88px;--lw:200px;--roll:-440px;perspective:1200px}
  .it-door-a{left:0;top:0;width:100%;height:50%;transform-origin:50% 0;background:linear-gradient(180deg,#0E2519 0%,#17392A 60%,#1C4534 100%);box-shadow:inset 0 -30px 60px rgba(0,0,0,.35);animation-name:it-doorT}
  .it-door-b{left:0;top:50%;width:100%;height:50%;transform-origin:50% 100%;background:linear-gradient(0deg,#0E2519 0%,#17392A 60%,#1C4534 100%);box-shadow:inset 0 30px 60px rgba(0,0,0,.35);animation-name:it-doorB}
  .it-letters{margin-top:26px}
  .it-line{height:5px;margin-top:16px}
  .it-sub{margin-top:16px;font-size:13px;letter-spacing:.18em}
  .it-floor{height:45%;transform:perspective(600px) rotateX(66deg);background-size:auto}
}

@keyframes it-rollX{from{transform:translateX(var(--roll)) translateY(6px)}60%{transform:translateX(calc(var(--roll) * .13)) translateY(0)}to{transform:translateX(0)}}
@keyframes it-spin{from{transform:rotate(-1080deg)}to{transform:rotate(0deg)}}
@keyframes it-trail{0%{opacity:0}20%{opacity:.5}100%{opacity:0;transform:scaleX(.2)}}
@keyframes it-hop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(calc(var(--bs) * -1)) scale(1)}72%{transform:translateY(0) scale(1.1,.88)}100%{transform:translateY(0) scale(0);opacity:0}}
@keyframes it-hopS{0%{transform:scale(1);opacity:.4}45%{transform:scale(.4);opacity:.12}72%{transform:scale(1.15);opacity:.4}100%{transform:scale(0);opacity:0}}
@keyframes it-burst{0%{transform:scale(.3);opacity:0}12%{opacity:1}100%{transform:scale(3);opacity:0}}
@keyframes it-glow{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes it-crestIn{0%{transform:rotateY(100deg) scale(.55);opacity:0}55%{transform:rotateY(-14deg) scale(1.08);opacity:1}80%{transform:rotateY(6deg) scale(1)}100%{transform:rotateY(0deg) scale(1);opacity:1}}
@keyframes it-ringSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes it-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes it-drop{0%{transform:rotateX(-85deg) translateY(-30px);opacity:0}60%{transform:rotateX(12deg) translateY(0);opacity:1}100%{transform:rotateX(0deg) translateY(0);opacity:1}}
@keyframes it-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes it-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes it-fade{from{opacity:1}to{opacity:0}}
@keyframes it-flash{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
@keyframes it-sparkle{0%{opacity:0;transform:translateY(0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translateY(-140px) scale(1.2)}}
@keyframes it-stageOut{to{opacity:0;transform:scale(.86) translateY(-20px);filter:blur(8px)}}
@keyframes it-doorL{to{transform:rotateY(-108deg);opacity:0}}
@keyframes it-doorR{to{transform:rotateY(108deg);opacity:0}}
@keyframes it-doorT{to{transform:rotateX(108deg);opacity:0}}
@keyframes it-doorB{to{transform:rotateX(-108deg);opacity:0}}
@keyframes it-gone{0%,99%{visibility:visible}100%{visibility:hidden}}
@keyframes it-siteIn{from{transform:scale(1.09);filter:blur(10px) brightness(.8)}to{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){#intro{display:none}html.intro-play{overflow:auto}html.intro-play #app{animation:none}}