html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  color: #232946;
  box-sizing: border-box;
  background-color: #d1d3c2;
}

body {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(120deg, #646456 0%, #d1d3c2 60%, #e9eadf 100%);
}
header {
  z-index: 2001;
}

.app-shell-header {
  background: #f4f6fa !important;
  color: #232946;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2em 4px 2em;
  pointer-events: none;
  box-shadow: 0 2px 14px 0 rgba(40,40,80,0.14);
}

.ovi-header-left,
.ovi-header-right,
.ovi-header-btn {
  pointer-events: auto;
}

.ovi-title {
  font-size: 1.4em;
  font-weight: bold;
  color: #fff;
  margin-left: 0.6em;
  letter-spacing: 0.02em;
}

.ovi-header-right {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-right: 0.6em;
}

.ovi-header-btn {
  display: flex;
  align-items: center;
  padding: 0.5em 1.2em;
  background: #fff;
  color: #232946;
  border-radius: 2em;
  box-shadow: 0 2px 14px 0 rgba(40,40,80,0.14);
  font-size: 1em;
  cursor: pointer;
  transition: box-shadow .18s, background .18s;
  margin-left: 0.15em;
}
.ovi-header-btn:hover {
  box-shadow: 0 4px 24px 0 rgba(60,60,120,0.21);
  background: #f5f7fb;
}

.ovi-status {
  font-weight: 500;
  font-size: 1em;
  gap: 0.5em;
  background: #fff;
  color: #262e46;
}
.ovi-dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: #09c76a;
  border-radius: 50%;
  margin-right: 0.55em;
  box-shadow: 0 0 0 2px #eaf6ef;
  vertical-align: middle;
}

/* --- MAIN & CONTENU --- */
.app-shell-main {
  min-height: 100vh;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  padding-top: 69px;    /* Hauteur du header flottant transparent */
  padding-bottom: 68px; /* Hauteur du menu bas */
  max-width: 100vw;
  background: rgba(244, 246, 250, 0.8);
  overflow: visible;    /* scroll principal sur le body */
}
.app-shell-content {
  margin: 0;
  padding: 0;
  max-width: none;
  min-height: calc(100vh - 50px - 68px); /* Pour le look, n'affecte pas le scroll si contenu long */
}

.ovi-accueil-demo {
  text-align: center;
  margin-top: 2.5em;
  background: #fff;
  padding: 2em 1.5em;
  border-radius: 1.2em;
  box-shadow: 0 2px 18px 0 rgba(60,60,120,0.07);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- MENU BAS FIXE --- */
.app-shell-menu {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1020;
  height: 68px;
  background: linear-gradient(to top, #232946 85%, #8ea2c7 100%);
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -1px 8px rgba(30,20,80,0.09);
}

.app-shell-menu a {
  flex: 1;
  color: #fff;
  text-align: center;
  padding: 11px 0 3px 0;
  font-size: 1.18em;
  text-decoration: none;
  border: none;
  background: none;
  outline: none;
  transition: color .15s;
}
.app-shell-menu a.active, .app-shell-menu a:hover {
  color: #eebc4a;
}
.app-shell-menu i {
  display: block;
  font-size: 1.35em;
}
.app-shell-menu span {
  display: block;
  font-size: 0.83em;
  margin-top: 0.1em;
}

/* --- MODAL SOUS-MENU --- */
.ovi-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(44, 54, 86, 0.19);
  backdrop-filter: blur(5px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.ovi-modal {
  background: #fff;
  border-radius: 1.4em;
  box-shadow: 0 8px 36px 0 rgba(60,60,120,0.17);
  min-width: 500px;
  max-width: 90vw;
  padding: 2.2em 1.7em 1.4em 1.7em;
  position: relative;
  animation: oviModalIn .22s cubic-bezier(.19,1,.22,1);
}
@keyframes oviModalIn {
  from { transform: translateY(40px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ovi-modal-close {
  position: absolute;
  top: 0.72em; right: 1.05em;
  background: none;
  border: none;
  font-size: 1.6em;
  color: #999;
  cursor: pointer;
  transition: color 0.12s;
}
.ovi-modal-close:hover {
  color: #432ca4;
}
.ovi-modal-content {
  text-align: left;
}
.ovi-modal-content ul {
  list-style: none;
  padding: 0;
  margin: 1.1em 0 0 0;
}
.ovi-modal-content li {
  margin: 0.3em 0;
}
.ovi-modal-content a {
  display: inline-block;
  padding: 0.47em 1.3em;
  background: #f5f7fa;
  border-radius: 2em;
  color: #232946;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.16s;
}
.ovi-modal-content a:hover {
  background: #eebc4a;
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .app-shell-header {
    padding: 2px 0.2em 2px 0.8em;
  }
  .ovi-header-left img {
    font-size: 12px;
  }
  .ovi-header-right {
    gap: 0.45em;
  }
  .ovi-header-btn {
    padding: 0.38em 0.82em;
    font-size: 0.8em;
  }
  .ovi-title {
    font-size: 1.07em;
  }
  .app-shell-main {
    padding-top: 44px;
  }
  .app-shell-menu {
    height: 56px;
    font-size: 11px;
  }
  .app-shell-main, .app-shell-content {
    min-height: calc(100vh - 44px - 56px);
  }
  .ovi-modal {
    min-width: 98%;
    max-width: 98%;
  }
}

/* --- Empêche le scroll-bar horizontal parasite --- */
body, html, .app-shell-main, .app-shell-content {
  overflow-x: hidden;
}
.prog-iframe {
	width: 100%;
	min-height: 90vh;
	border: none;
	display: block;
  overflow-y: visible;
}