/* ARA 2026 — habillage commun des pages de démo (maquettes, visites, logement 3D)
   Reprend le design du site : Urbanist (titres) + Onest (textes), noir, boutons blancs arrondis. */
:root{--ara-noir:#000;--ara-blanc:#fff;--ara-gris:#9a9a9a;--ara-or:#c8a96a;--ara-ligne:rgba(255,255,255,.14);
  --ara-titre:"Urbanist","Futura",system-ui,sans-serif;--ara-texte:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif}
html,body{font-family:var(--ara-texte)!important}

/* ---------- Bouton retour : pilule blanche comme le site ---------- */
#retour,#araRetour,header .retour,#topbar a#araRetour,#vRetour{
  background:#fff!important;color:#000!important;border:0!important;border-radius:12px!important;
  padding:11px 16px!important;font:500 13px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.35)!important;opacity:1!important;transition:background .25s!important}
#retour:hover,#araRetour:hover,header .retour:hover,#vRetour:hover{background:var(--ara-or)!important}
#araRetour svg,header .retour svg{stroke:#000!important}

/* ---------- Sélecteur de langue ---------- */
#langsw{border:0!important;background:#fff!important;border-radius:12px!important;padding:4px!important}
#langsw button{color:#000!important;font:500 12px var(--ara-texte)!important;letter-spacing:0!important;border-radius:9px!important;padding:6px 10px!important}
#langsw button.actif{background:#000!important;color:#fff!important}

/* ---------- Maquette orbitale (Ornex, village) ---------- */
#titre{font:400 12px var(--ara-texte)!important;letter-spacing:.14em!important;color:#6b6b6b!important}
#titre b{font:400 clamp(26px,3vw,40px)/1 var(--ara-titre)!important;letter-spacing:-.02em!important;color:#000!important;margin-top:8px!important}
#hauteurs button{border-radius:12px!important;background:#000!important;color:#fff!important;font-family:var(--ara-texte)!important}
#hauteurs button:hover{background:var(--ara-or)!important;color:#000!important}
#hauteurs small{font:500 10px var(--ara-texte)!important;color:#6b6b6b!important}
#points i.on{background:#000!important;border-color:#000!important}
#ui button{border-radius:10px!important;font:500 12px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important;border:1px solid rgba(0,0,0,.15)!important;background:#fff!important;color:#000!important}
#ui button[aria-pressed="true"]{background:#000!important;color:#fff!important;border-color:#000!important}
#zoomVal,#hd{font:500 12px var(--ara-texte)!important;letter-spacing:0!important;color:#6b6b6b!important}
#aide,#hint{background:rgba(0,0,0,.78)!important;border:1px solid var(--ara-ligne)!important;border-radius:12px!important;font:400 13px var(--ara-texte)!important;letter-spacing:0!important;color:#fff!important}
#piste i,.barre i,.bar>i{background:var(--ara-or)!important}
#loader span,.l-title{font:500 10px var(--ara-texte)!important;letter-spacing:.28em!important;color:rgba(0,0,0,.45)!important}

/* ---------- Maquette de nuit (maquette-360) : déjà sombre ---------- */
#topbar{background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)!important}
body[data-ara="nuit"] #loader{background:#000!important}
body[data-ara="nuit"] .l-title{color:rgba(255,255,255,.55)!important}
.btn{border-radius:12px!important}

/* ---------- Galerie des insertions drone ---------- */
body[data-ara="galerie"]{background:#000!important;color:#fff!important}
body[data-ara="galerie"] header{background:rgba(0,0,0,.6)!important;border-bottom:0!important;backdrop-filter:blur(14px)}
body[data-ara="galerie"] .kicker{font:400 13px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ara-gris)!important}
body[data-ara="galerie"] .kicker span{display:none!important}
body[data-ara="galerie"] h1{font:400 clamp(40px,6vw,96px)/1.02 var(--ara-titre)!important;letter-spacing:-.025em!important;max-width:14ch!important;
  background:linear-gradient(90deg,#6f6f6f 0%,#fff 55%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
body[data-ara="galerie"] .lede{color:#c9c9c9!important;font-size:16px!important}
body[data-ara="galerie"] .liste{gap:14px!important;padding:0 clamp(16px,3vw,44px) 40px!important}
body[data-ara="galerie"] .vue{border:0!important;border-radius:clamp(16px,2vw,26px)!important;height:56vh!important}
body[data-ara="galerie"] .vue .num{font:400 44px/1 var(--ara-titre)!important;letter-spacing:0!important;color:#fff!important}
body[data-ara="galerie"] .vue .projet{font:400 13px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important}
body[data-ara="galerie"] .vue .voir{background:#fff!important;color:#000!important;border-radius:12px!important;font:500 14px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important}
body[data-ara="galerie"] footer{border-top:1px solid var(--ara-ligne)!important;color:var(--ara-gris)!important;font:400 13px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Logement 3D ---------- */
.titre{font:400 12px var(--ara-texte)!important;letter-spacing:.14em!important}
.titre b{font:400 clamp(28px,3vw,40px)/1 var(--ara-titre)!important;letter-spacing:-.02em!important}
.barre button{font:500 12px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important;border-radius:10px!important;background:#fff!important;border:1px solid rgba(0,0,0,.15)!important}
.barre button[aria-pressed="true"]{background:#000!important;color:#fff!important;border-color:#000!important}
.aide{font:400 12px var(--ara-texte)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Visites 360° (Photo Sphere Viewer) ---------- */
.psv-navbar{background:rgba(0,0,0,.7)!important;backdrop-filter:blur(12px)}
#menu-pieces button,#menu-pieces a{font-family:var(--ara-texte)!important;border-radius:10px!important}