/* ==========================================================================
   MENU HAMBURGER PROTORMUNDI - menu-pm.css
   Barre logo / Contact / burger integree au header .header.clearfix du site
   Desktop (>=769px) : burger seul, rehausse et aligne sur la ligne du titre
   Mobile (<=768px) : barre pleine largeur AU-DESSUS du titre
                      logo a gauche / Contact centre / burger a droite
   Drawer lateral droit, accordeons 2 niveaux
   Prefixe pm-nav / pm-header / pm-topbar / pm-drawer : pas de collision avec style.css
   ========================================================================== */

:root{
  --pmn-brand:#B90E22;
  --pmn-brand-dark:#8E0A1A;
  --pmn-ink:#1D1D1F;
  --pmn-ink-soft:#4A4A4E;
  --pmn-line:#E6E2DE;
  --pmn-drawer-w:340px;
}

/* ---------- Barre logo/Contact/burger (integree a .header.clearfix, deja position:relative dans style.css) ---------- */
.pm-topbar{
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  z-index:101;
  display:flex;
  align-items:center;
  gap:10px;
}
.pm-header__logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.pm-header__logo img{
  display:block;
  height:44px;
  width:44px;
}
.pm-header__contact{
  font:700 .92rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  background:var(--pmn-brand);
  text-decoration:none;
  padding:10px 16px;
  border:1px solid var(--pmn-brand);
  border-radius:4px;
  transition:background-color .2s ease,border-color .2s ease;
}
.pm-header__contact:hover,
.pm-header__contact:focus-visible{
  background:var(--pmn-brand-dark);
  border-color:var(--pmn-brand-dark);
  color:#fff;
}
/* Etat clique : inversion - texte rouge sur fond blanc */
.pm-header__contact:active{
  background:#fff;
  border-color:var(--pmn-brand);
  color:var(--pmn-brand);
}

/* Desktop : logo + Contact masques, seul le burger reste dans le header.
   Burger rehausse : centre vertical a 31px = ligne mediane du titre
   "Conseil Expert immobilier" (.headline : top 17px + 28px/2), au bout a droite */
@media (min-width:769px){
  .pm-header__logo,
  .pm-header__contact{display:none}
  .pm-topbar{top:31px}
}

/* Mobile : barre en flux pleine largeur au-dessus du titre
   (le .header passe en hauteur auto en responsive, le titre descend sous la barre) */
@media (max-width:768px){
  .pm-topbar{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    box-sizing:border-box;
    padding:8px 12px;
    justify-content:space-between;
  }
  /* Contact centre exactement, independamment des largeurs logo/burger */
  .pm-header__contact{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
}

/* ---------- Bouton hamburger ---------- */
.pm-burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:48px;
  height:48px;
  padding:12px 10px;
  background:none;
  border:0;
  border-radius:4px;
  cursor:pointer;
}
.pm-burger span{
  display:block;
  height:3px;
  width:100%;
  background:var(--pmn-brand);
  border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
}
/* Animation traits -> croix */
.pm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.pm-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.pm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Focus visible (WCAG 2.4.7) */
.pm-topbar a:focus-visible,
.pm-topbar button:focus-visible,
.pm-drawer a:focus-visible,
.pm-drawer button:focus-visible{
  outline:3px solid var(--pmn-brand);
  outline-offset:2px;
}

/* ---------- Overlay ---------- */
.pm-overlay{
  position:fixed;
  inset:0;
  z-index:1001;
  background:rgba(20,15,15,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.pm-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .3s ease;
}

/* ---------- Drawer lateral droit ---------- */
.pm-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:1002;
  height:100dvh;
  width:min(var(--pmn-drawer-w),100%);
  background:#fff;
  box-shadow:-6px 0 24px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.pm-drawer.is-open{transform:translateX(0)}

.pm-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:3px solid var(--pmn-brand);
  flex-shrink:0;
}
.pm-drawer__title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:var(--pmn-brand);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.pm-drawer__close{
  width:44px;
  height:44px;
  background:none;
  border:0;
  border-radius:4px;
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  color:var(--pmn-ink);
}
.pm-drawer__close:hover{color:var(--pmn-brand)}

.pm-drawer__scroll{
  overflow-y:auto;
  flex:1;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* ---------- Navigation niveau 1 ---------- */
.pm-nav{margin:0;padding:0;list-style:none}
.pm-nav > li{border-bottom:1px solid var(--pmn-line)}

.pm-nav__row{
  display:flex;
  align-items:stretch;
}
.pm-nav__link{
  flex:1;
  display:block;
  padding:14px 16px;
  font-size:.98rem;
  font-weight:600;
  color:var(--pmn-ink);
  text-decoration:none;
}
.pm-nav__link:hover{color:var(--pmn-brand)}

/* Bouton accordeon (chevron) separe du lien : le lien reste navigable */
.pm-nav__toggle{
  width:48px;
  flex-shrink:0;
  background:none;
  border:0;
  border-left:1px solid var(--pmn-line);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pm-nav__toggle::before{
  content:"";
  width:9px;
  height:9px;
  border-right:2px solid var(--pmn-brand);
  border-bottom:2px solid var(--pmn-brand);
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.pm-nav__toggle[aria-expanded="true"]::before{transform:rotate(-135deg)}

/* ---------- Sous-menus niveau 2 ---------- */
.pm-sub{
  margin:0;
  padding:0;
  list-style:none;
  background:#FAF7F5;
  display:none;
}
.pm-sub.is-open{display:block}
.pm-sub a{
  display:block;
  padding:11px 16px 11px 32px;
  font-size:.92rem;
  color:var(--pmn-ink-soft);
  text-decoration:none;
  border-top:1px solid var(--pmn-line);
}
.pm-sub a:hover{color:var(--pmn-brand)}

/* ---------- Pied de drawer : CTA telephone ---------- */
.pm-drawer__foot{
  flex-shrink:0;
  padding:14px 16px;
  border-top:1px solid var(--pmn-line);
  background:#FAF7F5;
}
.pm-drawer__tel{
  display:block;
  text-align:center;
  padding:13px 16px;
  background:var(--pmn-brand);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border-radius:4px;
  transition:background-color .2s ease;
}
.pm-drawer__tel:hover,
.pm-drawer__tel:focus-visible{background:var(--pmn-brand-dark)}
.pm-drawer__mail{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:.85rem;
  color:var(--pmn-ink-soft);
  text-decoration:none;
  word-break:break-all;
}
.pm-drawer__mail:hover{color:var(--pmn-brand)}

/* Blocage du scroll de page quand le drawer est ouvert */
body.pm-lock{overflow:hidden}

/* Respect de prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion:reduce){
  .pm-drawer,.pm-overlay,.pm-burger span,.pm-nav__toggle::before{transition:none}
}

/* Mobile etroit */
@media (max-width:420px){
  .pm-header__contact{padding:8px 12px;font-size:.8rem}
  .pm-header__logo img{height:36px;width:36px}
}