/* Oustaou — menu principal.
   Espace de noms .onav, sans aucune classe partagée avec les maquettes : les
   pages dont le <style> est embarqué ne peuvent donc plus l'écraser. Chaque
   propriété structurante est déclarée explicitement, pour ne rien hériter. */

.onav{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column;
  background:#17120E;
  color:#F1E7D8;
  font-family:'Manrope',system-ui,sans-serif;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, visibility .28s;
}
.onav.open{ opacity:1; visibility:visible; pointer-events:auto; }
.onav *{ box-sizing:border-box; }
.onav a, .onav [data-oa]{ color:inherit; text-decoration:none; }
.onav ul{ list-style:none; margin:0; padding:0; }

/* Barre du haut : logo, ville, fermeture toujours visible */
.onav-bar{
  display:flex; flex-direction:row; align-items:center; gap:14px;
  padding:16px clamp(18px,4vw,44px);
  border-bottom:1px solid #34281E; flex:0 0 auto;
}
.onav-logo{ display:inline-flex; align-items:center; }
.onav-ville{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:#FFFFFF; margin-right:auto;
}
.onav-close{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:1px solid #34281E; border-radius:24px;
  color:#F1E7D8; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:1.4px; text-transform:uppercase; padding:10px 18px;
  cursor:pointer; transition:border-color .2s, color .2s;
}
.onav-close:hover{ border-color:#D2622E; color:#E8926A; }

.onav-scroll{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(22px,3.4vw,40px) clamp(18px,4vw,44px) 34px;
}

/* Les 7 catégories, en colonnes : tout l'arbre visible d'un coup */
.onav-cols{
  display:grid; gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:1320px; margin:0 auto;
}
.onav-col{ min-width:0; }
.onav-cat{
  display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 12px; padding:0 0 10px; border-bottom:1px solid #34281E;
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(16px,1.35vw,19px);
  line-height:1.2; letter-spacing:-.2px;
}
.onav-cat a, .onav-cat [data-oa]{ color:#F1E7D8; }
.onav-cat a:hover, .onav-cat [data-oa]:hover{ color:#E8926A; }
.onav-sub li + li{ margin-top:1px; }
.onav-sub a, .onav-sub [data-oa]{
  display:block; padding:7px 10px; margin-left:-10px; border-radius:8px;
  font-size:14px; line-height:1.35; color:#C2A98C;
  transition:background .15s, color .15s;
}
.onav-sub a:hover, .onav-sub [data-oa]:hover{ background:#211A13; color:#F1E7D8; }

/* Bouton d'accordéon : mobile uniquement */
.onav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:4px; }
.onav-chev{ display:block; width:11px; height:11px; position:relative; }
.onav-chev::before,.onav-chev::after{
  content:""; position:absolute; background:#D2622E; border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.onav-chev::before{ top:4px; left:0; width:11px; height:2px; }
.onav-chev::after{ left:4px; top:0; width:2px; height:11px; }
.onav-col.open .onav-chev::after{ transform:scaleY(0); opacity:0; }

/* Pied : transversales, devis, téléphone */
.onav-foot{
  max-width:1320px; margin:clamp(26px,3vw,40px) auto 0;
  padding-top:24px; border-top:1px solid #34281E;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:20px 34px;
  align-items:center; justify-content:space-between;
}
.onav-liens{ display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 22px; }
.onav-liens a, .onav-liens [data-oa]{
  font-size:14px; color:#C2A98C; padding:5px 0;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.onav-liens a:hover, .onav-liens [data-oa]:hover{ color:#F1E7D8; border-color:#D2622E; }
.onav-actions{ display:flex; flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
.onav-devis{
  background:#D2622E; color:#20130B; font-weight:700; font-size:14.5px;
  padding:13px 24px; border-radius:11px; transition:background .2s, color .2s;
}
.onav-devis:hover{ background:#E0A73E; color:#3A2A08; }
.onav-tel{ font-family:'Space Mono',monospace; font-size:14px; color:#E8926A; }

/* Accessibilité : le focus clavier doit se voir, y compris sur fond sombre */
.onav a:focus-visible,.onav [data-oa]:focus-visible,.onav button:focus-visible{
  outline:2px solid #E0A73E; outline-offset:3px; border-radius:6px;
}
.onav .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

@media(max-width:1180px){ .onav-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px){  .onav-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Mobile : une catégorie par ligne, sous-listes repliées */
@media(max-width:680px){
  .onav-cols{ grid-template-columns:1fr; gap:0; }
  .onav-col{ border-bottom:1px solid #34281E; }
  .onav-cat{ margin:0; padding:15px 0; border-bottom:none; font-size:18px; align-items:center; }
  .onav-cat a, .onav-cat [data-oa]{ flex:1 1 auto; }
  .onav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-right:-8px; }
  .onav-sub{ display:none; padding:0 0 12px; }
  .onav-col.open .onav-sub{ display:block; }
  .onav-foot{ flex-direction:column; align-items:flex-start; gap:18px; }
  .onav-actions{ width:100%; }
  .onav-devis{ flex:1 1 auto; text-align:center; }
}