/* Mise en page générale */
html, body { height: 100%; }
body { margin: 0; }
.layout { display: flex; flex-direction: column; min-height: 100vh; }

/* Barre supérieure (index.html) */
.topbar { 
  height: 36px; 
  width: 100%; 
  position: relative;
  background: #e9edf2; /* gris clair */
  color: #0f1115; 
  transition: height 60ms ease; 
  overflow: hidden; 
  border-bottom: 1px solid #cfd6df;
}
.topbar[aria-expanded="true"] { height: 96px; }

.topbar__content { 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  padding: 0 16px; 
  box-sizing: border-box;
}
.topbar__link {
  font: 500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  color: green;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.topbar__buttons { 
  appearance: none; 
  border: 1px solid #c9ced6; 
  background: #ffffff; 
  color: #33373d; 
  border-radius: 6px; 
  padding: 6px 10px; 
  font: 500 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  cursor: pointer;
  min-width: 100px;
}

.topbar_.topbar__buttons { background: #f3f5f8; }

/* Logo centré, visible quand déplié */
.topbar__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  max-height: calc(100% - 24px);
  width: auto;
  opacity: 0;
  transition: transform 60ms ease, opacity 60ms ease;
  pointer-events: none; /* éviter de bloquer les clics sur la barre */
}
.topbar[aria-expanded="true"] .topbar__logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Zone de contenu: iframe qui occupe le reste */
.content { flex: 1; min-height: 0; background: #0b0e12; }
.preview { 
  display: block; 
  width: 100%; 
  height: 100%; 
  border: none; 
  background: #0b0e12; 
}