/* ==========================================================================
   BARRE PRINCIPALE
   ========================================================================== */
.knav{
  position:fixed; top:0; left:0; right:0; z-index:9995;
  background:#FDFBF7;
  border-bottom:1px solid #EAE6DF;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transition:box-shadow .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1);
}
.knav *{box-sizing:border-box;}
.knav.knav-collee{box-shadow:0 8px 28px rgba(34,33,30,.09);}
/* Barre d'administration WordPress : on se decale, sinon on passe dessous. */
body.admin-bar .knav{top:32px;}
@media (max-width:782px){ body.admin-bar .knav{top:46px;} }

.knav-in{
  max-width:1300px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:18px; height:74px;
}

/* ---------- Cale ----------
   La barre est en position fixed : sans cale, le contenu passerait
   dessous. Sa hauteur est ecrite ICI, pas calculee en JavaScript :
   74 px de contenu + 1 px de bordure. Une mesure au chargement se
   trompait des que la largeur changeait apres coup — on avait alors
   75 px de cale pour 65 px de barre, soit 10 px de vide sous le menu. */
#knav-cale{height:75px;}

/* ---------- Logo ---------- */
.knav-logo{display:flex; align-items:center; flex-shrink:0; margin-right:6px;}
.knav-logo img{display:block; height:44px; width:auto;}
.knav-logo:focus-visible{outline:2px solid #C89B7B; outline-offset:4px;}

/* ---------- Navigation ---------- */
.knav-nav{flex:1; min-width:0;}
.knav-l{list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0;}
.knav-l > li{position:relative;}
.knav-a{
  display:flex; align-items:center; gap:6px;
  padding:10px 13px; border-radius:2px;
  font-size:.93rem; font-weight:500; color:#22211E;
  text-decoration:none; white-space:nowrap;
  background:none; border:0; cursor:pointer;
  font-family:inherit;
  position:relative;
}
.knav-a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:#96603B; transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.knav-l > li:hover > .knav-a::after,
.knav-l > li:focus-within > .knav-a::after,
.knav-a[aria-current="page"]::after,
.knav-a.knav-actif::after{transform:scaleX(1);}
.knav-a[aria-current="page"],.knav-a.knav-actif{color:#3A4E3A;}
.knav-a:focus-visible{outline:2px solid #C89B7B; outline-offset:2px;}
/* Chevron des entrees a sous-menu */
.knav-ch{width:9px; height:9px; flex-shrink:0; margin-top:1px;
  border-right:1.6px solid #96603B; border-bottom:1.6px solid #96603B;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .24s cubic-bezier(.16,1,.3,1);}
.knav-l > li:hover > .knav-a .knav-ch,
.knav-l > li:focus-within > .knav-a .knav-ch{transform:rotate(225deg) translateY(-3px);}

/* ---------- Panneau deroulant ---------- */
.knav-sm{
  position:absolute; top:100%; left:0; min-width:268px;
  list-style:none; margin:0; padding:7px 0;
  background:#fff; border:1px solid #EAE6DF; border-radius:2px;
  box-shadow:0 18px 44px rgba(34,33,30,.13);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.knav-l > li:hover > .knav-sm,
.knav-l > li:focus-within > .knav-sm,
.knav-sm.knav-ouvert{opacity:1; visibility:visible; transform:translateY(0);}
.knav-sm a{
  display:block; padding:9px 20px;
  font-size:.87rem; color:#2C2825; text-decoration:none; line-height:1.35;
  transition:background .18s ease, color .18s ease;
}
.knav-sm a:hover,.knav-sm a[aria-current="page"]{background:#F4F1EA; color:#3A4E3A;}
.knav-sm a:focus-visible{outline:2px solid #C89B7B; outline-offset:-2px;}
/* Intertitre : sépare Bretagne et Ile-de-France sans allonger la liste.
   #6B655D sur blanc : contraste 5,9. */
.knav-gr{
  padding:13px 20px 4px;
  font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#6B655D;
}
.knav-sm li:first-child .knav-gr{padding-top:6px;}

/* ---------- Actions a droite ---------- */
.knav-act{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.knav-tel{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; font-weight:600; color:#3A4E3A; text-decoration:none;
  padding:9px 12px; border-radius:2px; white-space:nowrap;
  transition:background .2s ease;
}
.knav-tel:hover{background:#EFF1EC;}
.knav-tel:focus-visible{outline:2px solid #C89B7B; outline-offset:2px;}
.knav-tel svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}
.knav-cta{
  display:inline-flex; align-items:center;
  padding:11px 20px; border-radius:2px;
  background:#8C5A4F; color:#fff; text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
  transition:background .2s ease;
}
.knav-cta:hover{background:#75463D; color:#fff;}
.knav-cta:focus-visible{outline:2px solid #C89B7B; outline-offset:3px;}

/* ---------- Bouton hamburger ---------- */
.knav-bg{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:1px solid #EAE6DF; border-radius:2px;
  cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.knav-bg:focus-visible{outline:2px solid #C89B7B; outline-offset:2px;}
.knav-bg span{display:block; width:19px; height:1.6px; background:#22211E;
  transition:transform .26s cubic-bezier(.16,1,.3,1), opacity .18s ease;}
.knav-bg[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.knav-bg[aria-expanded="true"] span:nth-child(2){opacity:0;}
.knav-bg[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* ==========================================================================
   MOBILE ET TABLETTE
   ========================================================================== */
@media (max-width:1060px){
  .knav-in{height:64px; padding:0 18px; gap:12px;}
  #knav-cale{height:65px;}
  .knav-logo img{height:36px;}
  .knav-bg{display:flex;}
  .knav-act{display:none;}

  /* Panneau lateral */
  .knav-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(88vw,360px);
    background:#FDFBF7; border-left:1px solid #EAE6DF;
    box-shadow:-18px 0 48px rgba(34,33,30,.16);
    transform:translateX(102%);
    transition:transform .32s cubic-bezier(.16,1,.3,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:78px 0 28px; z-index:2;
  }
  body.admin-bar .knav-nav{padding-top:110px;}
  .knav.knav-ouv .knav-nav{transform:translateX(0);}

  /* Voile */
  .knav-voile{
    position:fixed; inset:0; background:rgba(34,33,30,.42);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
    z-index:1;
  }
  .knav.knav-ouv .knav-voile{opacity:1; visibility:visible;}

  .knav-l{flex-direction:column; align-items:stretch; gap:0;}
  .knav-l > li{border-bottom:1px solid #EAE6DF;}
  .knav-l > li:first-child{border-top:1px solid #EAE6DF;}
  .knav-a{
    padding:15px 22px; font-size:1rem; border-radius:0;
    justify-content:space-between; width:100%;
  }
  .knav-a::after{display:none;}
  .knav-a[aria-current="page"],.knav-a.knav-actif{
    color:#3A4E3A; box-shadow:inset 3px 0 0 #3A4E3A;
  }
  .knav-ch{transform:rotate(45deg);}
  .knav-a[aria-expanded="true"] .knav-ch{transform:rotate(225deg) translateY(-3px);}
  .knav-l > li:hover > .knav-a .knav-ch{transform:rotate(45deg);}
  .knav-l > li:hover > .knav-a[aria-expanded="true"] .knav-ch{transform:rotate(225deg) translateY(-3px);}

  /* Sous-menu en accordeon : pas de survol sur un ecran tactile. */
  .knav-sm{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    background:#F4F1EA; border:0; border-radius:0; box-shadow:none;
    padding:0; overflow:hidden; max-height:0;
    transition:max-height .3s cubic-bezier(.16,1,.3,1);
  }
  /* Sur tactile, le survol et le focus ne doivent PAS deplier : seul le
     clic le fait. D'ou ces deux regles qui remettent la hauteur a zero. */
  .knav-l > li:hover > .knav-sm,.knav-l > li:focus-within > .knav-sm{max-height:0;}
  /* Et celle-ci doit les battre, sinon le lien qui vient d'etre clique
     garde le focus, :focus-within l'emporte, et l'accordeon reste ferme.
     Constate au banc d'essai : panneau ouvert, hauteur mesuree 0. */
  .knav-l > li > .knav-sm.knav-ouvert{max-height:760px;}
  .knav-sm a{padding:12px 22px 12px 34px; font-size:.92rem;}
  .knav-gr{padding:14px 22px 4px;}

  /* Actions reprises en bas du panneau */
  .knav-mact{display:flex; flex-direction:column; gap:10px; padding:22px;}
  .knav-mact .knav-tel,.knav-mact .knav-cta{justify-content:center; width:100%;}
  .knav-mact .knav-tel{border:1px solid #3A4E3A;}
}
@media (min-width:1061px){ .knav-mact,.knav-voile{display:none;} }

@media (prefers-reduced-motion:reduce){
  .knav,.knav-nav,.knav-sm,.knav-a::after,.knav-ch,.knav-bg span{transition:none;}
}