/* ===== V46 — L'en-tête « couverture » et la porte qui s'ouvre ===== */
/* la couverture : la photo de la porte, floutée, en fond */
body.h46 #app{position:relative}
.h46-cover{position:absolute;left:0;right:0;top:0;height:300px;overflow:hidden;z-index:-1;pointer-events:none;border-radius:0 0 30px 30px}
.h46-cover i{position:absolute;inset:-40px;background:var(--h46-photo) center/cover no-repeat,radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--kd-acc,#f1d58e) 55%,#fff),var(--kd-h1,#3b0b16) 55%,var(--kd-h2,#13070b));
 filter:blur(18px) saturate(1.15);transform:scale(1.12);animation:h46burns 16s ease-in-out infinite alternate}
.h46-cover.nophoto i{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--kd-acc,#f1d58e) 45%,transparent),transparent 45%),radial-gradient(circle at 75% 60%,color-mix(in srgb,var(--kd-acc,#f1d58e) 30%,transparent),transparent 45%),linear-gradient(160deg,var(--kd-h1,#3b0b16),var(--kd-h2,#13070b))}
.h46-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(#0009,#0002 40%,color-mix(in srgb,var(--kd-h2,#13070b) 92%,transparent) 88%,var(--kd-h2,#13070b))}
@keyframes h46burns{to{transform:scale(1.25) translate(-12px,8px)}}
/* la barre du haut, en verre sur la photo */
body.h46 #rootNavV15{background:#0005!important;border:1px solid #ffffff22;margin:0 0 4px!important}
body.h46 #rootNavV15 button{color:#fff!important;border-color:#ffffff40!important;background:#0003!important}
/* l'en-tête : le visage au centre, le nom dessous */
body.h46 #app>header{position:relative;display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:22px 0 16px!important}
body.h46 #app>header>div{display:contents}
body.h46 #doorAvatarBtn{order:1;margin:0 0 6px!important;position:relative;border-radius:50%!important}
body.h46 #doorAvatarBtn .door-avatar{width:104px!important;height:104px!important;border:0!important;box-shadow:0 0 0 4px var(--kd-h2,#13070b),0 0 0 7px color-mix(in srgb,var(--kd-acc,#f1d58e) 75%,#fff),0 0 42px color-mix(in srgb,var(--kd-acc,#f1d58e) 60%,transparent)!important;font-size:38px}
body.h46 #doorAvatarBtn .door-avatar.empty{background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--kd-acc,#f1d58e) 40%,#fff),var(--kd-h1,#3b0b16))!important;display:grid;place-items:center}
body.h46 #doorAvatarBtn::after{content:"📷";position:absolute;right:0;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--kd-acc,#f1d58e);color:#1a0d08;display:grid;place-items:center;font-size:14px;border:3px solid var(--kd-h2,#13070b)}
body.h46 #app>header small{order:2;font:800 10.5px 'Manrope',sans-serif!important;letter-spacing:.22em!important;margin-top:4px}
body.h46 #app>header h2{order:3;margin:0!important;font:600 38px/1.05 Georgia,serif!important;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-shadow:0 2px 18px #0008}
body.h46 #app>header h2::after{content:"⌄";font:700 14px/1 'Manrope',sans-serif;color:var(--kd-acc,#f1d58e);border:1px solid color-mix(in srgb,var(--kd-acc,#f1d58e) 55%,transparent);border-radius:999px;width:24px;height:24px;display:inline-grid;place-items:center;padding-bottom:3px;box-sizing:border-box}
body.h46 #doorChip{display:none!important}
body.h46 #app>header>img{display:none!important}
/* « Synchronisé » devient un petit point « À jour » */
body.h46 #cloudStatus{order:4;font-size:0!important;border:0!important;background:none!important;padding:4px 6px!important;display:inline-flex;align-items:center;gap:6px;box-shadow:none!important;color:#cfd6e6!important}
body.h46 #cloudStatus::before{content:"";width:8px;height:8px;border-radius:50%;background:#f6b73c;box-shadow:0 0 8px #f6b73c}
body.h46 #cloudStatus[data-ok="1"]::before{background:#5fd3a0;box-shadow:0 0 8px #5fd3a0;animation:h46pulse 2.4s ease-in-out infinite}
body.h46 #cloudStatus::after{content:attr(data-h46);font:600 12.5px 'Manrope',sans-serif}
@keyframes h46pulse{50%{opacity:.4}}
/* la roue dentée, à droite sous la barre */
body.h46 #doorSettingsBtn{position:absolute!important;right:2px;top:6px;z-index:3;background:#0006!important;color:#fff!important;border:1px solid #ffffff44!important;animation:none!important;box-shadow:none!important;width:42px!important;height:42px!important;min-width:42px!important;font-size:19px!important}
/* la fine barre quand on descend */
.h46-mini{position:fixed;top:0;left:0;right:0;z-index:850;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:color-mix(in srgb,var(--kd-h2,#13070b) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--kd-acc,#f1d58e) 22%,transparent);transform:translateY(-110%);transition:transform .3s ease}
.h46-mini.show{transform:none}
.h46-mini button{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;color:#fff!important;width:auto!important}
.h46-mav .door-avatar{width:36px!important;height:36px!important;margin:0!important;font-size:15px;border-width:2px!important}
.h46-mname{flex:1;min-width:0;text-align:left;font:600 22px Georgia,serif!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h46-mgear{width:36px!important;height:36px;border-radius:50%!important;background:#ffffff14!important;border:1px solid #ffffff2a!important;font-size:17px}
/* la porte qui s'ouvre : bois teinté par la couleur de la porte, serrure dorée */
.k46-door{position:fixed;inset:0;z-index:2500;pointer-events:none;perspective:1200px}
.k46-leaf{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--kd-h2,#2a1208) 55%,#3a1d0c) 0 20px,color-mix(in srgb,var(--kd-h1,#331709) 45%,#4a2610) 20px 40px);box-shadow:inset 0 0 60px #000a}
.k46-leaf.l{left:0;transform-origin:left center;border-right:1px solid color-mix(in srgb,var(--kd-acc,#f1d58e) 60%,transparent);animation:k46L 1.1s cubic-bezier(.6,0,.2,1) .5s forwards}
.k46-leaf.r{right:0;transform-origin:right center;border-left:1px solid color-mix(in srgb,var(--kd-acc,#f1d58e) 60%,transparent);animation:k46R 1.1s cubic-bezier(.6,0,.2,1) .5s forwards}
.k46-leaf::after{content:"";position:absolute;top:47%;width:11px;height:11px;border-radius:50%;background:var(--kd-acc,#f1d58e);box-shadow:0 0 12px var(--kd-acc,#f1d58e)}
.k46-leaf.l::after{right:16px}.k46-leaf.r::after{left:16px}
@keyframes k46L{to{transform:rotateY(-108deg);opacity:0}}
@keyframes k46R{to{transform:rotateY(108deg);opacity:0}}
.k46-key{position:absolute;left:50%;top:44%;width:40px;margin-left:-20px;z-index:2;filter:drop-shadow(0 0 16px var(--kd-acc,#f1d58e));animation:k46kp .45s ease-in-out 0s 1,k46kg .55s ease-in .5s forwards}
.k46-key i{display:block;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--kd-acc,#f1d58e) 55%,color-mix(in srgb,var(--kd-acc,#f1d58e) 55%,#5a3a10))}
.k46-key b{display:block;width:18px;height:28px;margin:-4px auto 0;background:linear-gradient(var(--kd-acc,#f1d58e),color-mix(in srgb,var(--kd-acc,#f1d58e) 55%,#5a3a10));clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
@keyframes k46kp{50%{transform:scale(1.18)}}
@keyframes k46kg{to{transform:scale(2.6);opacity:0}}
.k46-rays{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;background:conic-gradient(from 0deg at 50% 46%,transparent 0 8deg,color-mix(in srgb,var(--kd-acc,#f1d58e) 30%,transparent) 11deg,transparent 15deg 44deg,color-mix(in srgb,var(--kd-acc,#f1d58e) 25%,transparent) 48deg,transparent 53deg 92deg,#ffffff20 96deg,transparent 101deg 146deg,color-mix(in srgb,var(--kd-acc,#f1d58e) 30%,transparent) 152deg,transparent 158deg 206deg,#ffffff20 212deg,transparent 218deg 268deg,color-mix(in srgb,var(--kd-acc,#f1d58e) 25%,transparent) 274deg,transparent 280deg 326deg,color-mix(in srgb,var(--kd-acc,#f1d58e) 30%,transparent) 332deg,transparent 338deg);animation:k46rays 1.5s ease-out .65s forwards}
@keyframes k46rays{0%{opacity:0;transform:scale(.3)}35%{opacity:1}100%{opacity:0;transform:scale(1.7) rotate(22deg)}}
/* puis l'en-tête apparaît : le visage descend, l'anneau brille, le nom se dévoile */
body.h46.h46-in #doorAvatarBtn{animation:h46av .9s cubic-bezier(.2,1.5,.35,1) .95s both}
@keyframes h46av{0%{opacity:0;transform:translateY(-60px) scale(.3)}60%{opacity:1}100%{opacity:1;transform:none}}
body.h46.h46-in #app>header small{animation:h46fade .5s ease 1.5s both}
body.h46.h46-in #app>header h2{animation:h46write .9s ease 1.55s both}
@keyframes h46write{from{clip-path:inset(0 100% 0 0);filter:blur(4px)}to{clip-path:inset(0 0 0 0);filter:none}}
body.h46.h46-in #cloudStatus,body.h46.h46-in #rootNavV15,body.h46.h46-in #doorSettingsBtn{animation:h46fade .5s ease 2s both}
body.h46.h46-in #app>header~*:not(#rootNavV15){animation:h46up .7s ease 1.3s both}
@keyframes h46fade{from{opacity:0}}
@keyframes h46up{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){.h46-cover i,body.h46 #cloudStatus::before{animation:none}.k46-door{display:none}}
body.h46 #app>header{padding-top:40px!important}
body.h46 #doorSettingsBtn{top:4px}
body.h46 #rootNavV15{margin-bottom:0!important}
body.h46 #doorAvatarBtn:has(.empty)::after{display:none}