/* Trez-Hir Box : styles maison (le reste passe par les classes Tailwind) */
:root{ color-scheme:dark; --dark:#17201B; --mint:#7DCB8F; --green:#2F9E57; --forest:#1F6E3C; --door:#E9ECE6; --door-rib:#C9CEC5 }
html{ scroll-behavior:smooth }
body{ background-color:var(--dark); color:#f1f5f9; font-family:'Inter',system-ui,sans-serif; overflow-x:hidden }
:focus-visible{ outline:3px solid var(--mint); outline-offset:3px }

.glass-panel{ background:rgba(28,38,33,.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(125,203,143,.15) }
.glass-nav{ background:rgba(23,32,27,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(125,203,143,.12) }

/* Portes 3D */
.door-container{ perspective:1200px }
.door-leaf{ transform-origin:left center; transition:transform .8s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; transform-style:preserve-3d }
.door-container.is-open .door-leaf{ transform:rotateY(-110deg); box-shadow:-15px 0 25px rgba(0,0,0,.5); pointer-events:none }
.door-leaf::after{ content:""; position:absolute; right:22px; top:50%; width:8px; height:46px; margin-top:-23px; border-radius:6px; background:linear-gradient(180deg,#3d5446,#22302a); box-shadow:inset 0 0 0 1px rgba(125,203,143,.25) }

/* Logo : l'anse se referme */
.shackle{ transition:transform .75s cubic-bezier(.5,1.6,.4,1) .3s }
.pre .shackle{ transform:translateY(-80px) }

/* Photo du bâtiment : le cadre s'ouvre en douceur au défilement */
.reveal-frame{ border-radius:24px; clip-path:inset(var(--ci,0%) var(--cx,0%) round 24px) }
.reveal-img{ transform:scale(var(--zs,1)); transform-origin:50% 60% }

@keyframes pulse-glow{ 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.05)} }
.animate-pulse-glow{ animation:pulse-glow 4s ease-in-out infinite }
@keyframes float-slow{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(2deg)} }
.animate-float{ animation:float-slow 6s ease-in-out infinite }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition-duration:.01ms!important }
  html{ scroll-behavior:auto }
}

/* Réservation : mini-portes de disponibilité (aucun numéro, aucun emplacement réel) */
.mini-door{ display:inline-block; position:relative; width:14px; height:20px; border-radius:3px 3px 1px 1px; flex:0 0 auto; transition:transform .35s cubic-bezier(.16,1,.3,1) }
.mini-door.free{ background:repeating-linear-gradient(90deg,#7DCB8F 0 2px,#5DB474 2px 3px) }
.mini-door.taken{ background:#26342C; box-shadow:inset 0 0 0 1px #3A4C41 }
.mini-door.taken::after{ content:""; position:absolute; left:50%; top:55%; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:1px; background:#5E7064 }
.format-card[aria-checked="true"] .mini-door.free{ transform:translateY(-4px) }
.format-card[aria-checked="true"] .mini-door.free:nth-child(2){ transition-delay:.05s }
.format-card[aria-checked="true"] .mini-door.free:nth-child(3){ transition-delay:.1s }
.format-card[aria-checked="true"] .mini-door.free:nth-child(4){ transition-delay:.15s }
.format-card[aria-checked="true"] .mini-door.free:nth-child(5){ transition-delay:.2s }
.dispo-bar{ height:6px; border-radius:99px; background:#26342C; overflow:hidden }
.dispo-bar > span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#2F9E57,#7DCB8F); transition:width .6s cubic-bezier(.16,1,.3,1) }