:root{
  --ph-main:#002f3e;     /* fond principal */
  --ph-mainText:#fff;    /* texte principal */
  --ph-sub:#00c1ff;      /* fond sous-menu */
  --ph-subText:#002f3e;  /* texte sous-menu */
  --ph-bg:#f3f3f3;       /* fond overlay */
}

.ph-menu-open{
  background: var(--ph-main);
  color: var(--ph-mainText);
  border:0;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}

/* Overlay plein écran */
.ph-overlay{
  position:fixed;
  inset:0;
  background: var(--ph-bg);
  display:none;
  z-index:9999;
}
.ph-overlay.is-open{ display:block; }

.ph-overlay__top{
  display:flex;
  justify-content:flex-end;
  padding:16px;
  background: var(--ph-main);
}
.ph-menu-close{
  background:transparent;
  border:0;
  color: var(--ph-mainText);
  font-size:22px;
  cursor:pointer;
}

.ph-overlay__inner{
  width:100%;
  max-width:1400px;   /* optionnel */
  margin:0 auto;
  padding:30px 40px;

  display:grid;
  grid-template-columns: 2fr 1fr; /* gauche plus large */
  gap:60px;
}

.ph-title{
  margin:0 0 18px;
  font-size:44px;
  line-height:1.05;
  color:#111;
}

/* NAV */
.ph-nav{ list-style:none; margin:0; padding:0; }
.ph-nav > li{
  border-top:1px solid rgba(0,0,0,.12);
}
.ph-nav > li:last-child{
  border-bottom:1px solid rgba(0,0,0,.12);
}

/* Lien niveau 1 */
.ph-nav a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 8px;
  text-decoration:none;
  color:#0d1b1f;
  font-weight:700;
  font-size:14px;
}

/* Sous-menu = accordion (style “cartouche” bleu) */
.ph-nav .sub-menu{
  list-style:none;
  margin:0 0 14px;
  padding:10px;
  background: var(--ph-sub);
  border-radius:14px;
  display:none; /* ouvert via JS */
}
.ph-nav li.is-open > .sub-menu{ display:block; }

.ph-nav .sub-menu a{
  color: var(--ph-subText);
  font-weight:700;
  font-size:16px;
  padding:10px 10px;
  border-radius:10px;
}
.ph-nav .sub-menu a:hover{
  background: rgba(0,0,0,.08);
}

/* Menu droite “cartes/boutons” */
.ph-nav--cards > li{
  border:0;
  margin:0 0 14px;
}
.ph-nav--cards a{
  background:#fff;
  border-radius:14px;
  padding:18px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 980px){
  .ph-overlay__inner{ grid-template-columns:1fr; }
  .ph-title{ font-size:34px; }
}


.ph-overlay{
  position:fixed;
  inset:0;
  background: var(--ph-bg);
  z-index:9999;

  overflow-y:auto;        /* ✅ autorise scroll */
  -webkit-overflow-scrolling:touch;
}