/* Azura One — finition premium (10/11/2026). Même structure, mêmes images : uniquement la finition. */
:root{--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'Manrope',Arial,Helvetica,sans-serif;--gold:#dcc193;--gold-2:#b8945c;--hair:#e8d7b42e;--glass:#0d151fcc}
html,body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.4px}
h1 em,h2 em{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--gold)}
/* En-tête */
.brand{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:10px}
.brand>span{font-family:var(--sans);font-size:9.5px;letter-spacing:4.5px;color:var(--gold);font-weight:600;margin-left:6px}
.brand small{font-size:8px;letter-spacing:3.4px;font-weight:500;opacity:.72;margin-top:11px}
.breadcrumbs{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:500}
.breadcrumbs>button{color:#eee8ddb0;transition:color .3s,border-color .3s}
.breadcrumbs>button:hover{color:#fff}
.iconButton{background:#0c141db3;border-color:var(--hair);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:50%;width:40px;height:40px;transition:border-color .3s,background .3s}
.iconButton:hover{border-color:#dcc19399;background:#16212dcc}
/* Typo commune : plus aucun texte minuscule */
.eyebrow{font-size:10px;letter-spacing:3.2px;font-weight:600;color:var(--gold)}
.introCopy{font-size:13.5px;line-height:1.75;opacity:.78;font-weight:400}
.modelNote{font-size:10px;line-height:1.7;color:#c9c6bf99}
footer{font-size:9.5px;letter-spacing:2px;font-weight:500;border-top-color:#e8d7b424}
#progress i{background:linear-gradient(90deg,var(--gold),#e5ddcf30)}
.backButton{font-size:11px;letter-spacing:.6px;transition:color .3s}
.backButton:hover{color:var(--gold)}
/* Carte « Prenez de la hauteur » : verre fumé + liseré doré */
#buildingCard{background:linear-gradient(165deg,#131d29e6,#0a1018f2);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);border:1px solid var(--hair);box-shadow:0 40px 90px #00000070,inset 0 1px 0 #ffffff0f;padding:36px 32px 30px;width:340px;border-radius:2px}
#buildingCard:before{content:'';position:absolute;left:32px;right:32px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
#buildingCard h1{font-size:62px;line-height:.94;margin:18px 0 6px}
.floorPicker{border-color:var(--hair)}
.floorPicker>span,.floorPicker small{font-size:9.5px;letter-spacing:2.6px;font-weight:600}
.floorPicker output{font-family:var(--serif);font-weight:500;font-size:58px;color:#f1dfbd}
.floorPicker button{border-radius:50%;width:32px;height:32px;border-color:#f5e6ca40;transition:background .25s,border-color .25s}
.floorPicker button:hover:not(:disabled){background:#dcc19322;border-color:var(--gold)}
#floorRange{accent-color:var(--gold)}
#typeOptions button{background:#ffffff06;border-color:#eee3cb22;font-size:11px;font-weight:600;letter-spacing:.3px;transition:border-color .25s,background .25s;border-radius:1px}
#typeOptions button:hover{border-color:#dcc19388}
#typeOptions small{font-size:10px;font-weight:400;color:#b9bec6}
#typeOptions button[aria-pressed=true]{background:linear-gradient(180deg,#dcc19324,#dcc1930d);border-color:var(--gold)}
/* Bouton principal doré avec reflet */
.primary{position:relative;overflow:hidden;background:linear-gradient(120deg,#ecd8b1,#d4b47e 55%,#c19f67);color:#141c24;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;padding:19px 22px;border-radius:1px;box-shadow:0 12px 30px #c8a56a2e}
.primary:after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffff70,transparent);transform:skewX(-20deg);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.primary:hover{background:linear-gradient(120deg,#f3e3c2,#dcc08e 55%,#c8a873)}
.primary:hover:after{left:130%}
.textButton{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;border-bottom-color:var(--hair);transition:color .3s}
.textButton:hover{color:var(--gold)}
/* Vue d'ensemble : le plan flotte, les repères sont plus fins */
.ambient{background:radial-gradient(ellipse 70% 80% at 36% 52%,#0c1626,#0a1221 60%,#080e18 100%)}
#cutawayImage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect;filter:drop-shadow(0 40px 50px #0007)}
.hotspot{background:#0c141de6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #dcc19366;border-radius:40px;padding:6px 15px 6px 6px;font-size:11.5px;font-weight:600;letter-spacing:.3px;box-shadow:0 10px 26px #0006;transition:background .25s,color .25s,transform .25s}
.hotspot:hover,.hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.06)}
.hotspot span{border-color:#dcc193aa;color:var(--gold);width:26px;height:26px;position:relative}
.hotspot span:after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid #dcc19366;animation:pulse 2.4s ease-out infinite}
.hotspot:hover span,.hotspot[aria-current=true] span{color:#17212a;border-color:#17212a66}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.cutawayHint{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#a7b0bc}
#apartmentCard h1{font-size:64px;line-height:.95}
.specs{border-color:var(--hair)}
.specs b{font-family:var(--serif);font-weight:500;font-size:34px;color:#efdcb8}
.specs b small{font-family:var(--sans);font-size:11px}
.specs span{font-size:10px;letter-spacing:.4px;color:#c4c9ce}
/* Pièces : plein écran, sans bandes noires, la caméra respire */
#roomImage{object-fit:cover;background:#0b1017}
#experience[data-view=room]:not(.wide-room) #roomImage{animation:breathe 16s cubic-bezier(.25,.1,.25,1) both}
#experience.wide-room #roomImage{object-fit:contain}
@keyframes breathe{from{scale:1.07}to{scale:1}}
#roomImage.reveal{animation:reveal 1.1s cubic-bezier(.2,.65,.2,1) both,breathe 16s cubic-bezier(.25,.1,.25,1) both!important}
@keyframes reveal{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
#fadeImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;pointer-events:none;opacity:0}
.roomShade{background:linear-gradient(#05090f66,transparent 18%,transparent 62%,#05090fc7),linear-gradient(90deg,#05090f38,transparent 40%)}
#roomCaption h1{font-size:66px;line-height:1;margin:14px 0 12px}
#roomDescription{font-size:14.5px;opacity:.85;line-height:1.6;font-weight:400}
.glassButton{background:#0c141dbf;border:1px solid #e8d7b440;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;padding:14px 20px;min-height:46px;border-radius:1px;transition:background .3s,border-color .3s,color .3s}
.glassButton:hover{background:#18232fdd;border-color:var(--gold);color:#fff}
#nextSpace{border-color:#dcc19399}
#panHint{font-size:11px;letter-spacing:.6px}
#stage{z-index:0}
/* Grain de film très léger + vignette : rendu « photo de magazine » */
#stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
#stage:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 45%,transparent 65%,#00000024 100%)}
/* Tour : bande d'étage dorée et lumineuse */
#floorBand{fill:#f3d59a4d;stroke:#ffe6b8;stroke-width:1.3;filter:drop-shadow(0 0 8px #ffd48a99)}
#floorTag{font-size:12px;font-weight:600;background:#0c141de0;border-left:2px solid var(--gold);padding:7px 11px;letter-spacing:.5px}
/* Entrée du site : la tour se révèle, la carte arrive */
.intro #buildingImage{animation:towerIn 1.8s cubic-bezier(.2,.65,.2,1) both}
.intro #buildingCard{animation:cardIn 1.1s .45s cubic-bezier(.2,.65,.2,1) both}
.intro header{animation:fadeIn 1.2s .2s both}
@keyframes towerIn{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(-41%)}to{opacity:1;transform:translateY(-45%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Panneau des espaces */
dialog{background:linear-gradient(170deg,#121c28,#0b111a);border-color:var(--hair)}
dialog h2{font-size:46px}
#spacesList button{font-size:12px;font-weight:600;letter-spacing:.3px}
#spacesList b{font-size:10px}
@media(max-width:1000px){#buildingCard{width:280px;padding:28px 24px}#buildingCard h1{font-size:50px}}
@media(max-width:700px){
.brand{font-size:22px;letter-spacing:7px}
.brand>span{font-size:8.5px}
.brand small{font-size:7px;letter-spacing:2.4px}
.iconButton{width:36px;height:36px}
.intro #buildingCard{animation-name:fadeIn}
#buildingCard{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;width:auto}
#buildingCard:before{display:none}
#buildingCard .eyebrow{font-size:9px;letter-spacing:2.4px}
/* Le titre ne passe plus sous le sélecteur d'étage */
#buildingCard h1{font-size:38px;display:block;max-width:calc(100% - 128px);margin:8px 0 16px;line-height:.98}
#buildingCard h1 br{display:block}
#buildingCard h1 em{margin-left:0}
.floorPicker{top:24px;width:118px}
.floorPicker>span{font-size:9px}
.floorPicker output{font-size:40px}
.floorPicker button{width:30px;height:30px;font-size:17px}
#typeOptions button{font-size:10.5px;padding:12px 4px}
#typeOptions small{font-size:9.5px}
.primary{font-size:10.5px;padding:17px 18px}
.modelNote{font-size:9px}
footer{font-size:8.5px;letter-spacing:1.4px;gap:12px;white-space:nowrap}
.backButton{font-size:10px}
#apartmentCard .eyebrow{font-size:9px}
#apartmentCard h1{font-size:42px}
.specs b{font-size:30px}
.specs span{font-size:9.5px}
.textButton{font-size:10px}
.cutawayHint{display:none}
.hotspot{font-size:10px;padding:4px;border-radius:50%}
.hotspot span{width:24px;height:24px}
#roomCaption h1{font-size:44px}
#roomDescription{font-size:13px}
.glassButton{font-size:9.5px;letter-spacing:1.2px;padding:12px 8px;min-height:44px}
#panHint{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){#roomImage,.intro *,.hotspot span:after{animation:none!important}}
.brand,.brand small,.brand>span{text-shadow:0 1px 14px #000a,0 0 2px #0006}
/* ——— Étage sélectionné : il s'allume à travers la façade (10/11) ——— */
@property --t{syntax:'';inherits:false;initial-value:0%}
@property --b{syntax:'';inherits:false;initial-value:0%}
#facade{display:none}
#floorGlow,#towerDim{position:absolute;pointer-events:none;z-index:1;-webkit-mask:url(media/dollhouse/tower-mask.png) 0 0/100% 100% no-repeat;mask:url(media/dollhouse/tower-mask.png) 0 0/100% 100% no-repeat;transition:opacity .9s ease}
#towerDim{background:linear-gradient(180deg,#05091255 0,#05091255 calc(var(--t) - 4%),transparent var(--t),transparent var(--b),#05091255 calc(var(--b) + 4%),#05091255 100%);transition:--t .65s cubic-bezier(.3,.7,.2,1),--b .65s cubic-bezier(.3,.7,.2,1),opacity .9s ease}
#floorGlow{mix-blend-mode:screen}
#floorStrip{position:absolute;left:0;right:0;transition:top .65s cubic-bezier(.3,.7,.2,1),height .65s cubic-bezier(.3,.7,.2,1);background:linear-gradient(180deg,#fff3d6 0,#fff3d6 2px,#f0b863c4 2px,#d99a48a8 50%,#f0b863c4 calc(100% - 2px),#fff3d6 calc(100% - 2px),#fff3d6 100%);box-shadow:0 0 26px 8px #ffc46a5c;animation:floorPulse 3.2s ease-in-out infinite}
@keyframes floorPulse{0%,100%{opacity:1}50%{opacity:.82}}
#floorTag{position:absolute;z-index:2;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 12px 6px;background:#0b131ce6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #dcc19366;border-left:1px solid #dcc193aa;border-radius:2px;color:#f3e6cc;line-height:1;transition:top .65s cubic-bezier(.3,.7,.2,1),left .65s cubic-bezier(.3,.7,.2,1),opacity .9s ease;box-shadow:0 10px 24px #0005}
#floorTag:before{content:'';position:absolute;right:100%;top:50%;width:18px;height:1px;background:linear-gradient(90deg,#fff0cc,#dcc193)}
#floorTag.clamped:before{display:none}
#floorTag small{font-family:var(--sans);font-size:7.5px;letter-spacing:2.2px;font-weight:600;color:var(--gold)}
#floorTag b{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.5px}
.intro #floorGlow,.intro #towerDim,.intro #floorTag{opacity:0}
#buildingImage{cursor:pointer}
@media(max-width:700px){#floorTag{padding:5px 9px 4px}#floorTag b{font-size:18px}#floorTag small{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){#floorStrip{animation:none}}
/* ——— Contact promoteur + pop-up d'inscription (10/11) ——— */
.contactButton{height:40px;padding:0 20px;border:1px solid #dcc19399;border-radius:40px;background:#0c141db3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f2e3c4;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.contactButton:hover{background:linear-gradient(120deg,#ecd8b1,#d4b47e);color:#141c24;border-color:transparent}
.contactButton .short{display:none}
.goldText{color:var(--gold)}
.leadDialog{width:560px;padding:32px 34px 30px;border:1px solid var(--hair);box-shadow:0 40px 120px #000a}
.leadDialog::backdrop{background:#050a12c4;backdrop-filter:blur(10px)}
.leadDialog[open]{animation:dialogIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes dialogIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.leadDialog h2{font-size:44px;line-height:1;margin:16px 0 14px}
.leadIntro{font-size:13.5px;line-height:1.7;color:#d9d2c4;margin:0 0 12px}
.leadContext{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin:0 0 18px;font-weight:600}
.leadContext:empty{display:none}
.leadGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:18px 0 14px}
.leadGrid .full{grid-column:1/-1}
.leadDialog label{display:grid;gap:7px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;color:#cfc6b6}
.leadDialog .opt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
.leadDialog input:not([type=checkbox]),.leadDialog select,.leadDialog textarea{font:inherit;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;padding:13px 14px;background:#ffffff0a;border:1px solid #eee3cb30;border-radius:2px;color:#f2ebe0;width:100%;transition:border-color .25s,background .25s}
.leadDialog select option{background:#111a25;color:#f2ebe0}
.leadDialog textarea{resize:vertical;min-height:84px}
.leadDialog input:focus,.leadDialog select:focus,.leadDialog textarea:focus{outline:none;border-color:var(--gold);background:#ffffff12}
.leadDialog .consent{display:flex;gap:10px;align-items:flex-start;font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400;line-height:1.5;color:#bfb8aa;margin:4px 0 18px}
.leadDialog .consent input{width:16px;height:16px;margin-top:1px;accent-color:#d4b47e;flex:none}
.leadDialog .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.leadStatus{font-size:12px;min-height:16px;margin:12px 0 0;color:#cfc6b6}
.leadStatus[data-state=error]{color:#f1a58f}
.laterLink{display:block;margin:14px auto 0;background:none;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#bfb8aa;border-bottom:1px solid transparent;padding:4px 0}
.laterLink:hover{color:#fff;border-bottom-color:var(--gold)}
.leadDone h3{font-family:var(--serif);font-weight:500;font-size:40px;margin:18px 0 8px;color:#f1dfbd}
.leadDone p{font-size:14px;line-height:1.7;color:#d9d2c4;margin:0 0 22px}
.leadPopup{padding:0;width:600px;overflow:hidden}
.leadPopup .leadVisual{height:190px;background:linear-gradient(180deg,transparent 35%,#0f1823 100%),url(media/dollhouse/living.webp) center 58%/cover}
.leadPopup .leadBody{padding:8px 34px 30px;margin-top:-34px;position:relative}
@media(max-width:700px){
.contactButton{height:36px;padding:0 14px;font-size:9.5px;letter-spacing:1.4px}
.contactButton .long{display:none}.contactButton .short{display:inline}
.leadDialog{width:calc(100vw - 24px);padding:24px 20px 22px;max-height:92svh}
.leadDialog h2{font-size:34px}
.leadGrid{grid-template-columns:1fr;gap:11px}
.leadPopup{padding:0}
.leadPopup .leadVisual{height:130px}
.leadPopup .leadBody{padding:6px 20px 22px;margin-top:-26px}
}
.leadPopup:focus{outline:none}