/* Édition Halloween, illustrée en bleu nuit, bleu et turquoise TR-Numexan. */
:root{--navy:#101f43;--navy2:#204e81;--blue:#2579bd;--cyan:#4ab7e9;--surface:#eef5fc;--white:#fff;--soft:#e9f7fa}
body{background:radial-gradient(circle at 90% 8%,#c6eff3 0,transparent 28%),linear-gradient(160deg,#eef6fd,#f9fcff 50%,#edf8fc);}
.app-header{background:linear-gradient(110deg,#0f2045,#1f4775 55%,#256caa);border-bottom-color:#72d6df}
.intro{position:relative;background:linear-gradient(120deg,#f8fcff 48%,#e8f6fe);border:1px solid #cde5f2;border-radius:20px;padding:20px 22px;margin-top:6px;margin-bottom:23px;box-shadow:0 8px 24px #183a5d12;overflow:hidden}
.intro>div:first-child{position:relative;z-index:1;max-width:760px}
.intro .intro-badge{position:relative;z-index:2;align-self:flex-start}
.intro h1{max-width:790px}
.seasonal-illustrations{display:flex;align-items:flex-end;gap:0;margin-left:6px;flex:0 0 auto;z-index:1}
.seasonal-illustrations img{width:73px;height:82px;object-fit:contain;filter:drop-shadow(0 4px 3px #17365a23)}
.seasonal-illustrations .mascot-ghost{transform:rotate(-9deg);animation:float-gh 3.3s ease-in-out infinite}
.seasonal-illustrations .mascot-skeleton{transform:rotate(7deg);animation:tilt-sk 4.2s ease-in-out infinite}
.halloween-banner{font-weight:800;display:inline-flex;gap:7px;align-items:center;border-radius:30px;background:#d7f5fb;color:#173e70;padding:6px 12px;font-size:11px;letter-spacing:.03em;margin:0 0 12px}
.halloween-tip{background:#e8f6ff;border:1px solid #b6e4f2;padding:12px 16px;border-radius:12px;color:#215a85;font-size:12px;margin:0 0 18px;line-height:1.6}
.season-icon{width:28px;height:28px;vertical-align:middle;margin-right:6px;object-fit:contain}
.workspace{position:relative}
.report{border-top:5px solid #4ab7e9;position:relative;padding-top:76px!important}
.report::before{content:"";position:absolute;left:20px;top:10px;width:54px;height:60px;background:url('fantome.svg') center/contain no-repeat}
.report::after{content:"";position:absolute;right:20px;top:8px;width:55px;height:62px;background:url('assets/squelette.svg') center/contain no-repeat}
@keyframes float-gh{50%{transform:translateY(-7px) rotate(-5deg)}}
@keyframes tilt-sk{50%{transform:rotate(-4deg)}}
@media(max-width:1050px){.intro{flex-wrap:wrap}.intro>div:first-child{max-width:100%}.seasonal-illustrations{margin-left:auto}.seasonal-illustrations img{width:60px;height:68px}}
@media(max-width:680px){.intro{padding:18px 15px}.intro .intro-badge{margin-right:auto}.seasonal-illustrations{margin-left:auto}.seasonal-illustrations img{width:54px;height:60px}.halloween-banner{font-size:10px}}
@media(prefers-reduced-motion:reduce){.seasonal-illustrations img{animation:none!important}}