/* Coquille de la démo — couleurs EasyPathView. */
:root{--encre:#192526;--doux:#5b6666;--ligne:#d9deda;--rose:#bd006f;--cyan:#007a9f;--nuit:#132a30;--fond:#f5f4f0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--encre);background:var(--fond)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--ligne);flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.brand img{flex:none}
.brand div{display:grid;min-width:0}
.brand strong{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:11px;color:var(--doux);white-space:nowrap}
.modes{display:flex;gap:3px;padding:4px;background:#f0f2ef;border:1px solid var(--ligne);border-radius:14px}
.modes button{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--encre);font-size:13px;font-weight:650;white-space:nowrap}
.modes button:hover{background:#e3e9e6}
.modes button[aria-pressed=true]{background:var(--rose);color:#fff;box-shadow:0 2px 6px #bd006f33}
.icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ligne);border-radius:12px;background:#fff;color:var(--encre);flex:none}
.icon:hover{border-color:var(--cyan)}
/* [boutons-reduire] « ← Revenir » : visite en page entière seulement (absent dans l'iframe du site). */
.revenir{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:1px solid var(--ligne);border-radius:12px;background:#fff;color:var(--encre);font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;flex:none}
.revenir svg{flex:none}
.revenir:hover{border-color:var(--cyan)}
.revenir:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
main{flex:1;min-height:0;position:relative;background:var(--nuit)}
iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--fond)}
#visite-frame{background:var(--nuit)}
#toast{position:fixed;z-index:5;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 18px;border-radius:12px;background:var(--nuit);color:#fff;font-size:13px;line-height:1.4;box-shadow:0 8px 30px #0003}
.noscript{margin:24px;font-size:15px}
@media(max-width:760px){
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .brand img{width:28px;height:28px}
  .brand strong{font-size:14px}
  .modes{order:3;width:100%}
  .modes button{flex:1;min-height:44px;padding:0 6px;font-size:13px}
  .icon{width:44px;height:44px}
}
@media(max-width:380px){.modes button{font-size:12px;padding:0 4px}}
@media(max-height:480px) and (orientation:landscape){
  .topbar{flex-wrap:nowrap;padding:4px 10px}
  .brand span{display:none}
  .modes{order:0;width:auto}
  .modes button{min-height:44px;flex:none}
}

/* Dans la page démo du site (iframe), sur petit écran : le titre est déjà dans la page ;
   une seule ligne (modes + plein écran) pour laisser la hauteur à la visite. */
@media(max-width:760px){
  .embarquee .brand{display:none}
  .embarquee .topbar{flex-wrap:nowrap;padding:6px 8px}
  .embarquee .modes{order:0;flex:1;width:auto;min-width:0}
  .embarquee .modes button{flex:1;white-space:normal;line-height:1.15;font-size:12px;padding:2px 4px}
  /* [sans-maquette] plus de boutons de mode : la barre n'aurait que le plein écran, déjà proposé par la page */
  .embarquee .topbar{display:none}
}