/* ORIUM 3D — Prototype V5 : menu réduit de 15 %, calé sous le logo.
   Le site public n'est pas concerné. */
:root {
  --orium-menu-left: 36px;
  --orium-menu-width: 279px;
  --orium-menu-gap: 42px;
  --orium-header-height: clamp(54px, 8dvh, 78px);
}

/* Entête V2 conservée sur toute la largeur. */
.entete.conteneur {
  width: calc(100% - 72px);
  max-width: none;
  margin-inline: auto;
}

.menu-button {
  position: fixed;
  z-index: 55;
  top: calc(var(--orium-header-height) + 17px);
  left: var(--orium-menu-left);
  width: 180px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 19px;
  border: 2px solid var(--bleu, #3DBDEE);
  border-radius: 10px;
  background: linear-gradient(135deg, #102d40 0%, #0b1e2d 100%);
  color: #f6fbff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .035em;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.menu-button svg { width: 23px; height: 23px; stroke: var(--bleu, #3DBDEE); flex: 0 0 auto; }
.menu-button:hover, .menu-button[aria-expanded="true"] {
  background: #15394d;
  box-shadow: 0 0 19px rgba(61,189,238,.16);
}

.menu-panel {
  position: fixed;
  z-index: 54;
  top: calc(var(--orium-header-height) + 78px);
  left: var(--orium-menu-left);
  width: var(--orium-menu-width);
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - var(--orium-header-height) - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 19px;
  background: linear-gradient(145deg, rgba(17,47,66,.99), rgba(8,23,35,.995));
  border: 1px solid rgba(61,189,238,.55);
  border-radius: 12px;
  box-shadow: 0 22px 55px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .2s, visibility .2s, transform .2s;
}
.menu-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-panel :is(a, button) { font-family: inherit; }
.menu-panel a {
  display: block;
  padding: 11px 10px;
  border-radius: 8px;
  color: #e6f1f7;
  text-decoration: none;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.35;
  transition: color .16s, background .16s;
}
.menu-panel a:hover, .menu-panel a[aria-current="page"] {
  color: #3DBDEE;
  background: rgba(61,189,238,.09);
}
.menu-panel a[aria-current="page"] { font-weight: 750; }
.menu-label {
  padding: 2px 10px 13px;
  color: #92aaba;
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.menu-panel .menu-toplink, .menu-panel .menu-a-propos {
  font-weight: 750;
  font-size: 15px;
}
.menu-separator { height: 1px; background: rgba(130,180,203,.32); margin: 9px 9px 12px; }
.menu-section-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 11px;
  border: 1px solid rgba(61,189,238,.52);
  border-radius: 9px;
  background: rgba(61,189,238,.09);
  color: #3DBDEE;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.menu-section-button:hover { border-color: #3DBDEE; background: rgba(61,189,238,.15); }
.menu-section-button .menu-chevron {
  font-size: 17px;
  transform: rotate(-90deg);
  transition: transform .2s;
}
.menu-section-button[aria-expanded="true"] .menu-chevron { transform: rotate(0); }
.menu-subitems {
  padding: 7px 0 7px 9px;
  margin: 9px 0 5px;
  border-left: 3px solid #3DBDEE;
}
.menu-subitems[hidden] { display: none; }
.menu-subitems a { font-size: 13px; padding: 11px 10px 11px 12px; }
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 53;
  background: transparent;
}
.menu-scrim[hidden] { display: none; }

/* Sur les écrans intermédiaires, préserver un vrai espace
   entre le panneau ouvert et le contenu, sans le superposer. */
@media (min-width: 1051px) and (max-width: 1660px) {
  .menu-panel.is-open ~ main.conteneur {
    width: calc(100% - var(--orium-menu-left) - var(--orium-menu-width) - var(--orium-menu-gap) - 20px);
    max-width: 1050px;
    margin-left: calc(var(--orium-menu-left) + var(--orium-menu-width) + var(--orium-menu-gap));
    margin-right: 20px;
  }
  .menu-panel.is-open ~ main.page-detail-main,
  .menu-panel.is-open ~ main.prestations-main { max-width: min(1050px, 100%); }
}

/* Tablettes/téléphones : panneau qui se superpose volontairement,
   mais entièrement visible et rétractable, sans sortir de l'écran. */
@media (max-width: 1050px) {
  :root { --orium-menu-left: 16px; --orium-menu-width: min(279px, calc(100vw - 32px)); }
  .menu-panel { max-height: min(590px, calc(100dvh - var(--orium-header-height) - 100px)); }
  .menu-scrim { background: rgba(0,0,0,.48); }
  .entete.conteneur { width: calc(100% - 32px); }
}
@media (max-width: 640px) {
  :root { --orium-header-height: 58px; }
  .entete.conteneur { width: calc(100% - 24px); }
  .menu-button { top: 69px; left: 12px; height: 47px; width: 155px; padding: 0 13px; gap: 9px; font-size: 14px; border-radius: 9px; }
  .menu-button svg { width: 21px; height: 21px; }
  .menu-panel { top: 126px; left: 12px; width: min(279px, calc(100vw - 24px)); max-height: calc(100dvh - 145px); padding: 15px; }
  .menu-panel a { font-size: 15px; }
  .menu-panel .menu-toplink, .menu-panel .menu-a-propos { font-size: 14px; }
  .menu-section-button { font-size: 15px; }
  .menu-subitems a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-button, .menu-panel :is(a, button), .menu-section-button .menu-chevron { transition: none; }
}


/* V7 — Mobile/tablette : le bouton doit faire partie du flux vertical.
   Dans la V6, son positionnement fixe masquait le titre de l'accueil. */
@media (max-width: 1050px) {
  .menu-button {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-start;
    flex: 0 0 auto;
    margin: 12px 0 10px 16px;
  }
}
@media (max-width: 640px) {
  .menu-button {
    position: relative;
    top: auto;
    left: auto;
    margin: 10px 0 10px 12px;
    width: 155px;
    height: 47px;
  }
  .menu-panel { top: 125px; }
}