/* Navigation mobile, proposition B validée par Maxime le 27/10/2026.
 *
 * Feuille à part, chargée après celle du gabarit : les jetons (--terra,
 * --cream, --sand, --r, --fb, --ease) y sont déjà définis. Elle se retire en
 * commentant son enfilement dans functions.php, sans toucher aux 10 feuilles
 * de gabarit issues des maquettes validées.
 *
 * Référence de rendu : 06-menu-mobile/menu-b.html
 */

/* ------------------------------------------------------------- le bouton */
.pxv-burger{
  display:none;align-items:center;justify-content:center;gap:4px;flex-direction:column;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid rgba(28,23,18,.14);border-radius:var(--r);background:#fff;
  cursor:pointer;padding:0;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.pxv-burger:hover{border-color:var(--terra);background:rgba(177,74,40,.05)}
.pxv-burger:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.pxv-burger__b{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--dark);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
body.pxv-ouvert .pxv-burger__b:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.pxv-ouvert .pxv-burger__b:nth-child(2){opacity:0}
body.pxv-ouvert .pxv-burger__b:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- le voile */
.pxv-voile{
  position:fixed;inset:0;z-index:70;background:rgba(28,23,18,.46);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
body.pxv-ouvert .pxv-voile{opacity:1;visibility:visible}

/* ------------------------------------------------------------- le panneau */
.pxv-panneau{
  position:fixed;top:0;right:0;z-index:80;
  width:min(400px,92vw);height:100%;
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .34s var(--ease);
  box-shadow:-18px 0 44px -24px rgba(28,23,18,.5);
}
body.pxv-ouvert .pxv-panneau{transform:none}

.pxv-panneau__tete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(28,23,18,.1);flex:0 0 auto;
}
/* Cible tactile : sans ce calage le logo tombe a 32 px de haut. */
.pxv-panneau__tete .logo{font-size:20px;min-height:44px}
.pxv-fermer{
  width:40px;height:40px;flex:0 0 40px;
  border:1px solid rgba(28,23,18,.14);border-radius:var(--r);background:#fff;
  cursor:pointer;font-size:19px;line-height:1;color:var(--dark);display:grid;place-items:center;
}
.pxv-fermer:hover{border-color:var(--terra);color:var(--terra)}
.pxv-fermer:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

.pxv-corps{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 12px 18px;-webkit-overflow-scrolling:touch;
}

.pxv-pied{
  flex:0 0 auto;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(28,23,18,.1);background:var(--sand);
}
.pxv-pied .btn{display:block;text-align:center;width:100%}
/* Appeler est une action de conversion : la cible doit se viser au pouce.
   Sans le calage, le lien ne faisait que 23 px de haut. */
.pxv-pied__tel{display:flex;align-items:center;justify-content:center;min-height:44px;
  margin-top:4px;font-size:14px;color:var(--ink);text-decoration:none;border-radius:var(--r)}
.pxv-pied__tel:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.pxv-pied__tel:hover{color:var(--terra)}

/* ------------------------------------------------------- liens et groupes */
.pxv-lien{
  display:block;padding:13px 12px;border-radius:var(--r);
  color:var(--dark);text-decoration:none;
  font-family:var(--fb);font-size:16px;font-weight:600;line-height:1.3;
}
.pxv-lien:hover,.pxv-lien:focus-visible{background:rgba(177,74,40,.07);color:var(--terra)}
.pxv-lien[aria-current]{color:var(--terra)}

/* Un filet entre chaque entree de premier niveau, qu'elle soit un groupe
   depliable ou un lien simple : porte par le frere, jamais par le groupe,
   sinon « Nos realisations » se colle au groupe qui le precede. */
.pxv-corps > * + *{border-top:1px solid rgba(28,23,18,.08)}

.pxv-bascule{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 12px;border:0;background:none;cursor:pointer;border-radius:var(--r);
  font-family:var(--fb);font-size:16px;font-weight:600;color:var(--dark);text-align:left;
}
.pxv-bascule:hover{background:rgba(177,74,40,.07);color:var(--terra)}
.pxv-bascule:focus-visible{outline:2px solid var(--terra);outline-offset:-2px}
.pxv-chev{
  flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease);
}
.pxv-bascule[aria-expanded="true"] .pxv-chev{transform:rotate(-135deg) translate(-3px,-3px)}

/* Le tiroir s'ouvre sur sa hauteur réelle : pas de hauteur figée à maintenir. */
.pxv-tiroir{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.pxv-bascule[aria-expanded="true"]+.pxv-tiroir{grid-template-rows:1fr}
.pxv-tiroir>div{overflow:hidden;min-height:0}

/* --------------------------------------------------- fiches métier/besoin */
.pxv-fiche{
  display:flex;gap:11px;align-items:flex-start;padding:11px 12px;
  border-radius:var(--r);color:var(--dark);text-decoration:none;
}
.pxv-fiche:hover,.pxv-fiche:focus-visible{background:rgba(177,74,40,.07)}
.pxv-fiche__p{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--terra-soft);margin-top:7px}
.pxv-fiche b{display:block;font-family:var(--fb);font-size:15.5px;font-weight:600;line-height:1.25}
.pxv-fiche small{display:block;font-family:var(--fb);font-size:13px;color:var(--ink);opacity:.75;margin-top:2px;line-height:1.35}
.pxv-fiche[aria-current] b{color:var(--terra)}

.pxv-accroche{
  font-family:var(--fb);font-size:13.5px;line-height:1.5;color:var(--ink);
  background:var(--sand);border-radius:var(--r);padding:11px 13px;margin:2px 12px 8px;
}

/* ------------------------------------------------------------- bascules */
@media (max-width:860px){
  .pxv-burger{display:flex}
  .nav{gap:10px}
  .nav-cta{padding:11px 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .pxv-panneau,.pxv-voile,.pxv-tiroir,.pxv-chev,.pxv-burger__b{transition:none}
}